I-Flex
Ngokushesha phatha ukwakheka, ukuqondanisa, nosayizi wamakholomu egridi, ukuzulazula, izingxenye, nokunye okwengeziwe ngohlelo olugcwele lwezinsiza eziphendulayo ze-flexbox. Ukuze uthole ukuqaliswa okuyinkimbinkimbi, i-CSS yangokwezifiso ingase idingeke.
Nika amandla ukuziphatha okuguquguqukayo
Sebenzisa displayizinsiza ukuze udale isiqukathi se-flexbox futhi uguqule izici zezingane eziqondile zibe izinto eziguqukayo. Iziqukathi ze-Flex nezinto ziyakwazi ukuguqulwa ngokuqhubekayo ngezakhiwo ezengeziwe eziguqukayo.
<div class="d-flex p-2">I'm a flexbox container!</div><div class="d-inline-flex p-2">I'm an inline flexbox container!</div>Ukuhlukahluka okusabelayo kukhona .d-flexfuthi .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
Isiqondiso
Setha isiqondiso sezinto eziguqukayo esitsheni esiguquguqukayo esinezinsiza zokuqondisa. Ezimweni eziningi ungashiya isigaba esivundlile lapha njengoba okuzenzakalelayo kwesiphequluli kuyi- row. Nokho, ungase uhlangabezane nezimo lapho ubudinga ukusetha ngokusobala leli nani (njengezakhiwo eziphendulayo).
Sebenzisa .flex-rowukusetha isiqondiso esivundlile (okuzenzakalelayo kwesiphequluli), noma .flex-row-reverseukuqala indawo evundlile ukusuka kolunye uhlangothi.
<div class="d-flex flex-row mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>Sebenzisa .flex-columnukusetha isiqondiso esiqondile, noma .flex-column-reverseukuqala isiqondiso esiqondile ukusuka kolunye uhlangothi.
<div class="d-flex flex-column mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>Ukuhlukahluka okusabelayo kukhona futhi 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
Lungiselela okuqukethwe
Sebenzisa justify-contentizinsiza ezitsheni ze-flexbox ukuze uguqule ukuqondanisa kwezinto eziguqukayo ku-eksisi eyinhloko (i-eksisi engu-x ezoqala, i-eksisi engu-y uma flex-direction: column). Khetha kokuthi start(okuzenzakalelayo kwesiphequluli), end, center, between, around, noma 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>
Ukuhlukahluka okusabelayo kukhona futhi 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
Qondanisa izinto
Sebenzisa align-itemsizinsiza ezitsheni ze-flexbox ukuze uguqule ukuqondanisa kwezinto eziguqukayo ku-axis enqamulayo (i-eksisi ka-y ezoqala, i-x-eksisi uma flex-direction: column). Khetha kokuthi start, end, center, baseline, noma stretch(okuzenzakalelayo kwesiphequluli).
<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>
Ukuhlukahluka okusabelayo kukhona futhi 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
Qondanisa wena
Sebenzisa align-selfizinsiza ezintweni ze-flexbox ukuze uguqule ngakunye ukuqondana kwazo ku-axis enqamulayo (i-eksisi ka-y ezoqala, i-x-eksisi uma flex-direction: column). Khetha ezinkethweni ezifanayo njengokuthi align-items: start, end, center, baseline, noma stretch(okuzenzakalelayo kwesiphequluli).
<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>
Ukuhlukahluka okusabelayo kukhona futhi 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
Gcwalisa
Sebenzisa .flex-fillikilasi ochungechungeni lwezici zezelamani ukuze uziphoqelele ebubanzini obulingana nokuqukethwe kwazo (noma ububanzi obulinganayo uma okuqukethwe kwazo kungadluli amabhokisi azo emngceleni) kuyilapho uthatha yonke indawo evundlile etholakalayo.
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>Ukuhlukahluka okusabelayo kukhona futhi flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Khula ushwabane
Sebenzisa .flex-grow-*izinsiza ukuze uguqule ikhono lento eguquguqukayo ukuze ikhule ukuze ugcwalise isikhala esitholakalayo. Esibonelweni esingezansi, .flex-grow-1izakhi zisebenzisa sonke isikhala esitholakalayo, kuyilapho zivumela izinto ezimbili ezisele eziguquguqukayo zibe indawo yazo edingekayo.
<div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
</div>Sebenzisa .flex-shrink-*izinsiza ukuze uguqule ikhono lento eguquguqukayo ukuze inciphe uma kudingeka. Esibonelweni esingezansi, into yesibili eguquguqukayo nayo .flex-shrink-1iphoqeleka ukuthi isonge okuqukethwe kwayo emugqeni omusha, "ukuncipha" ukuze kuvunyelwe isikhala esengeziwe sento eguquguqukayo yangaphambilini nge- .w-100.
<div class="d-flex">
<div class="p-2 w-100">Flex item</div>
<div class="p-2 flex-shrink-1">Flex item</div>
</div>Ukuhlukahluka okusabelayo kukhona flex-growfuthi 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
Amamajini azenzakalelayo
I-Flexbox ingenza izinto ezinhle kakhulu uma uhlanganisa ukuqondanisa okuguquguqukayo namamajini azenzakalelayo. Okuboniswe ngezansi izibonelo ezintathu zokulawula izinto eziguqukayo usebenzisa amamajini azenzakalelayo: okuzenzakalelayo (ayikho imajini ezenzakalelayo), ukusunduza izinto ezimbili kwesokudla ( .me-auto), nokusunduza izinto ezimbili kwesokunxele ( .ms-auto).
<div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3">
<div class="me-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-auto p-2">Flex item</div>
</div>Ngokuqondanisa-izinto
Ngokuqondile hambisa into eyodwa egobekayo uye phezulu noma phansi esitsheni ngokuxuba align-items, flex-direction: columnnoma .margin-top: automargin-bottom: auto
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>Goqa
Shintsha indlela izinto eziguqukayo ezigoqa ngayo esitsheni esiguquguqukayo. Khetha kusukela ekungagoqeni nhlobo (okuzenzakalelayo kwesiphequluli) ngokuthi .flex-nowrap, ukugoqa nge .flex-wrap, noma ukuhlehlisa ukugoqa nge .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>
Ukuhlukahluka okusabelayo kukhona futhi 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
Oda
Shintsha ukuhleleka okubonakalayo kwezinto ezithile eziguquguqukayo ngezinsiza ezimbalwa order. Sinikeza kuphela izinketho zokwenza into kuqala noma yokugcina, kanye nokusetha kabusha ukuze usebenzise i-oda le-DOM. Njengoba orderkuthatha noma yiliphi inani eliphelele ukusuka ku-0 kuye ku-5, engeza i-CSS yangokwezifiso kunoma imaphi amanani engeziwe adingekayo.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>Ukuhlukahluka okusabelayo kukhona futhi 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
Additionally there are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.
.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
Align content
Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.
Heads up! This property has no effect on single rows of flex items.
<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>
Responsive variations also exist for align-content.
.align-content-start.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-between.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-between.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-between.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-between.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-between.align-content-xxl-around.align-content-xxl-stretch
Media object
Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
<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>And say you want to vertically center the content next to the image:
<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
Utilities API
Flexbox utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"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
),
"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,
),
),