Daddabuu
Saffisaan qindaa'ina, qindaa'ina, fi safara tarjaawwan tarjaa, qajeelcha, qaamolee, fi kkf faayidaalee flexbox deebii kennuu danda'an guutuudhaan bulchi. Hojiirra oolmaa walxaxaa ta'eef, CSS amala barbaachisaa ta'uu danda'a.
Amaloota flex dandeessisi
displayQabduu flexbox uumuu fi elementoota ijoollee kallatti gara wanta flex jijjiiruuf faayidaa hojii irra oolchi . Qabduu fi meeshaaleen flex amaloota flex dabalataatiin caalaatti fooyya'uu danda'u.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>Jijjiiramni deebii kennuu .d-flexfi .d-inline-flex.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex.d-xxl-flex.d-xxl-inline-flex
Kallattii
Kallattii wantoota flex qabduu flex fayyadamtoota kallattii waliin saagi. Yeroo baay'ee gita qajeelaa asitti dhiisuu dandeessa sababiin isaas durtii biraawzari row. Haa ta'u malee, haalawwan gatii kana ifatti saaguu barbaadde (akka qindaa'inoota deebii kennuu) si mudachuu danda'a.
Kallattii qajeelaa saaguuf fayyadami .flex-row(durtii biraawzari), ykn .flex-row-reversekallattii qajeelaa gama faallaa irraa jalqabuuf.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>.flex-columnKallattii dhaabbataa saaguuf, ykn kallattii .flex-column-reversedhaabbataa gama faallaa irraa jalqabuuf fayyadami.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>Jijjiiramni deebii kennuunis flex-direction.
.flex-row.flex-row-reverse.flex-column.flex-column-reverse.flex-sm-row.flex-sm-row-reverse.flex-sm-column.flex-sm-column-reverse.flex-md-row.flex-md-row-reverse.flex-md-column.flex-md-column-reverse.flex-lg-row.flex-lg-row-reverse.flex-lg-column.flex-lg-column-reverse.flex-xl-row.flex-xl-row-reverse.flex-xl-column.flex-xl-column-reverse.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Qabiyyee qajeelchuu
Faayidaa justify-contentqabduu flexbox irratti fayyadamii qindaa'ina wantoota flex siiqqe guddaa irratti jijjiiruuf (x-axis jalqabuuf, y-axis yoo flex-direction: column). start(durtii biraawzarii), end, center, between, around, ykn irraa filadhu evenly.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Jijjiiramni deebii kennuunis justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Wantoota qindeessuu
Faayidaa align-itemsqabduu flexbox irratti fayyadamii qindaa'ina wantoota flex siiqqe qaxxaamuraa irratti jijjiiruuf (siqqeewwan y jalqabuuf, siiqqe x yoo flex-direction: column). start, end, center, baseline, ykn stretch(durtii biraawzarii) irraa fili .
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Jijjiiramni deebii kennuunis align-items.
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Ofii qindeessuu
Faayidaawwan align-selfwantoota flexbox irratti fayyadami dhuunfaan qindaa'ina isaanii siiqqe qaxxaamuraa irratti jijjiiruuf (siqqeewwan y jalqabuuf, siiqqe x yoo flex-direction: column). Filannoowwan walfakkaatan keessaa filadhu align-items: start, end, center, baseline, ykn stretch(durtii biraawzari).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
Jijjiiramni deebii kennuunis align-self.
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-self-sm-start.align-self-sm-end.align-self-sm-center.align-self-sm-baseline.align-self-sm-stretch.align-self-md-start.align-self-md-end.align-self-md-center.align-self-md-baseline.align-self-md-stretch.align-self-lg-start.align-self-lg-end.align-self-lg-center.align-self-lg-baseline.align-self-lg-stretch.align-self-xl-start.align-self-xl-end.align-self-xl-center.align-self-xl-baseline.align-self-xl-stretch.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Guutuu
Gitaa tarree qaamolee obbolaa irratti fayyadamii .flex-fillgara bal'ina qabiyyee isaanii wajjin walqixa ta'etti dirqisiisuuf (ykn bal'ina walqixaa yoo qabiyyeen isaanii daangaa-sanduuqa isaanii hin caalle) yeroo iddoo qajeelaa jiru hunda fudhadhu.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>Jijjiiramni deebii kennuunis flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Guddachuu fi xiqqaachuu
.flex-grow-*Dandeettii wanta flex guddinaa bakka jiru guutuuf jijjiiruuf faayidaa fayyadami . Fakkeenya armaan gadii keessatti, .flex-grow-1elementoonni iddoo jiru hunda kan danda'u fayyadamu, yeroo ta'u wantoota flex lamaan hafan iddoo barbaachisaa isaanii hayyamu.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>.flex-shrink-*Dandeettii wanta flex yoo barbaachisaa ta'e xiqqaachuu jijjiiruuf faayidaa fayyadami . Fakkeenya armaan gadii keessatti, wanti flex inni lammaffaan with .flex-shrink-1qabiyyee isaa gara sarara haaraatti akka marsuuf dirqame, “xiqqeessuu” wanta flex duraan jiruuf bakka dabalataa hayyamuuf .w-100.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>Jijjiiramni deebii kennuu flex-growfi flex-shrink.
.flex-{grow|shrink}-0.flex-{grow|shrink}-1.flex-sm-{grow|shrink}-0.flex-sm-{grow|shrink}-1.flex-md-{grow|shrink}-0.flex-md-{grow|shrink}-1.flex-lg-{grow|shrink}-0.flex-lg-{grow|shrink}-1.flex-xl-{grow|shrink}-0.flex-xl-{grow|shrink}-1.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Marginoota ofumaan
Flexbox yeroo flex alignments auto margins wajjin wal makatu wantoota baay'ee ajaa'ibsiisoo tokko tokko hojjechuu danda'a. Armaan gaditti kan agarsiifaman fakkeenyota sadii wantoota flex karaa auto margins to'achuudha: durtii (auto margin hin qabu), wanta lama gara mirgaatti dhiibuu ( .me-auto), fi wanta lama gara bitaatti dhiibuu ( .ms-auto).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>Align-items waliin
Wanti flex tokko gara gubbaa ykn jala qabduu tokkootti align-items, flex-direction: column, fi margin-top: autoykn walitti makuun dhaabbataadhaan sochoosi margin-bottom: auto.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>Itti maruu
Akkaataa wantootni flex qabduu flex keessatti marfaman jijjiiri. Tasumaa marfamuu hin qabu (durtii biraawzari) .flex-nowrap, waliin marfamuu .flex-wrap, ykn marfamuu duubatti deebisuu keessaa filadhu .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Jijjiiramni deebii kennuunis flex-wrap.
.flex-nowrap.flex-wrap.flex-wrap-reverse.flex-sm-nowrap.flex-sm-wrap.flex-sm-wrap-reverse.flex-md-nowrap.flex-md-wrap.flex-md-wrap-reverse.flex-lg-nowrap.flex-lg-wrap.flex-lg-wrap-reverse.flex-xl-nowrap.flex-xl-wrap.flex-xl-wrap-reverse.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Ajajuu
Tartiiba mul'ataa wantoota flex murtaa'oo faayilii muraasaan jijjiiri order. Filannoowwan wanta tokko jalqaba ykn dhumaa hojjechuuf qofa kennina, akkasumas ajaja DOM fayyadamuuf deebisanii dhaabuu. Akkuma ordergatii lakkoofsa guutuu kamiyyuu 0 hanga 5 fudhatu, gatiiwwan dabalataa barbaachisan kamiifuu CSS amala dabali.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>Jijjiiramni deebii kennuunis order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Dabalataan akkasumas deebii kennuu .order-firstfi .order-lastgitaawwan kan elementii tokkoo fi , orderhojiirra oolchuudhaan jijjiiran jiru , akkaataa wal duraa duubaan.order: -1order: 6
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Qabiyyee qindeessuu
Wantoota flex siiqqe qaxxaamuraa irratti walittialign-content hiriirsuuf faayidaa qabduu flexbox irratti fayyadami. (durtii biraawzarii), , , , , ykn irraa filadhu . Faayidaa kana agarsiisuuf, meeshaalee flex dirqisiifnee daballeerra.startendcenterbetweenaroundstretchflex-wrap: wrap
Mataa ol qaba! Amalli kun tarreewwan tokkicha wanta flex irratti dhiibbaa hin qabu.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
Jijjiiramni deebii kennuunis align-content.
.align-content-start.align-content-end.align-content-center.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Wanti miidiyaa
Qaama wanta miidiyaa Bootstrap 4 irraa fakkeessuu barbaadduu ? Yeroo gabaabaa keessatti flex utilities muraasa kanneen duraa caalaa daran flexibility fi customization hayyamuun irra deebi'ii uumi.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Akkasumas qabiyyee fakkii cinatti vertikaaliin giddugaleessa gochuu barbaadda jedhi:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass jedhama
API faayidaa
Faayidaaleen Flexbox faayidaa API keenya keessatti bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),