Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

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

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

Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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>
<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).

Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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
  • .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).

Into ye-Flex
Into eguqukayo eqondaniswe
Into ye-Flex
Into ye-Flex
Into eguqukayo eqondaniswe
Into ye-Flex
Into ye-Flex
Into eguqukayo eqondaniswe
Into ye-Flex
Into ye-Flex
Into eguqukayo eqondaniswe
Into ye-Flex
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
  • .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.

Flex into enokuqukethwe okuningi
Into ye-Flex
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
  • .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.

Into ye-Flex
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 isonge okuqukethwe kwayo emugqeni omusha, "ukuncipha" ukuze kuvunyelwe isikhala esengeziwe sento eguquguqukayo yangaphambilini nge- .w-100.

Into ye-Flex
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
  • .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).

Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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="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>

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
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex flex-wrap">
  ...
</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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
  • .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.

Into yokuqala eguqukayo
Into yesibili eguqukayo
Into yesithathu ye-flex
<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>

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

Ukwengeza kukhona futhi amakilasi aphendulayo .order-firstnamakilasi .order-lastashintsha orderisici ngokufaka order: -1kanye order: 6, ngokulandelana.

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

Qondanisa okuqukethwe

Sebenzisa align-contentizinsiza eziqukathi ze-flexbox ukuze uqondanise izinto eziguqukayo ndawonye ku-axis enqamulayo. Khetha kokuthi start(okuzenzakalelayo kwesiphequluli), end, center, between, around, noma stretch. Ukuze sibonise lezi zinsiza, siphoqelele flex-wrap: wrapfuthi sandisa inani lezinto eziguqukayo.

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

Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
Into ye-Flex
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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Into yemidiya

Ufuna ukuphindaphinda ingxenye yento yemidiya ku-Bootstrap 4? Idale kabusha ngokushesha ngezisetshenziswa ezimbalwa eziguquguqukayo ezivumela ukuguquguquka okwengeziwe nokwenza ngendlela oyifisayo kunangaphambili.

Placeholder Image
Lokhu okunye okuqukethwe okuvela engxenyeni yemidiya. Ungashintsha lokhu nganoma yikuphi okuqukethwe futhi ukulungise njengoba kudingeka.
<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>

Futhi uthi ufuna ukubeka phakathi ngokuqondile okuqukethwe eduze kwesithombe:

Placeholder Image
Lokhu okunye okuqukethwe okuvela engxenyeni yemidiya. Ungashintsha lokhu nganoma yikuphi okuqukethwe futhi ukulungise njengoba kudingeka.
<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

I-Utilities API

Izinsiza ze-Flexbox zimenyezelwa kuzinsiza zethu ze-API ku- scss/_utilities.scss. Funda indlela yokusebenzisa i-API yezinsiza.

    "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,
      ),
    ),