I-Flex

Ngokushesha phatha isakhiwo, 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.

Ngiyisitsha se-flexbox!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Ngiyisitsha se-flexbox esisemgqeni!

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Ukwehluka 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

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.

I-Flex into engu-1

Flex into 2

Flex into 3

I-Flex into engu-1

Flex into 2

Flex into 3

<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>

Sebenzisa .flex-columnukusetha isiqondiso esiqondile, noma .flex-column-reverseukuqala isiqondiso esiqondile ukusuka kolunye uhlangothi.

I-Flex into engu-1

Flex into 2

Flex into 3

I-Flex into engu-1

Flex into 2

Flex into 3

<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>

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

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, noma around.

Into ye-Flex

<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>

Ukuhlukahluka okusabelayo kukhona futhi justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

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).

Into ye-Flex

<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

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).

Into ye-Flex

Into eguqukayo eqondaniswe

Into ye-Flex

Into eguqukayo eqondaniswe

Into ye-Flex

Into eguqukayo eqondaniswe

Into ye-Flex

Into eguqukayo eqondaniswe

Into ye-Flex

Into eguqukayo eqondaniswe

Into ye-Flex

<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

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.

Flex into enokuqukethwe okuningi

Into ye-Flex

<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>

Ukuhlukahluka okusabelayo kukhona futhi flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-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.

Into ye-Flex

Into yesithathu ye-flex

<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>

Sebenzisa .flex-shrink-*izinsiza ukuze uguqule ikhono lento eguquguqukayo ukuze inciphe uma kudingeka. Esibonelweni esingezansi, into yesibili eguquguqukayo nayo .flex-shrink-1iphoqeleka ukuthi igoqe okuqukethwe emugqeni omusha, “ukuncipha” ukuze kuvunyelwe isikhala esengeziwe sento eguquguqukayo yangaphambilini ngokuthi .w-100.

Into ye-Flex

<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>

Ukwehluka 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

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 ( .mr-auto), nokusunduza izinto ezimbili kwesokunxele ( .ml-auto).

Ngeshwa, i-IE10 ne-IE11 awawasekeli kahle amamajini azenzakalelayo ezintweni eziguquguqukayo umzali wazo onevelu elingelona elizenzakalelayo justify-content. Bona le mpendulo ye-StackOverflow ukuze uthole imininingwane eyengeziwe.

Into ye-Flex

<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="mr-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="ml-auto p-2 bd-highlight">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

Into ye-Flex

<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>

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.

Into ye-Flex

<div class="d-flex flex-nowrap">
  ...
</div>

Into ye-Flex

<div class="d-flex flex-wrap">
  ...
</div>

Into ye-Flex

<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

Oda

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

First flex item

Second flex item

Third flex item

<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>

Responsive variations also exist for order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

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.

Amakhanda phezulu! Lesi sici asinawo umthelela kumugqa owodwa wezinto eziguqukayo.

Into ye-Flex

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Into ye-Flex

<div class="d-flex align-content-end flex-wrap">...</div>

Into ye-Flex

<div class="d-flex align-content-center flex-wrap">...</div>

Into ye-Flex

<div class="d-flex align-content-between flex-wrap">...</div>

Into ye-Flex

<div class="d-flex align-content-around flex-wrap">...</div>

Into ye-Flex

<div class="d-flex align-content-stretch flex-wrap">...</div>

Ukuhlukahluka okusabelayo kukhona futhi 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