Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check

Laola meralo ka potlako, tekano le boholo ba likholomo tsa grid, ho tsamaea, likarolo, le tse ling ka lethathamo le felletseng la lisebelisoa tse arabelang tsa flexbox. Bakeng sa ts'ebetsong e rarahaneng haholoanyane, CSS e tloaelehileng e ka 'na ea hlokahala.

Etsa hore boitšoaro bo hlephileng

Sebelisa displaylisebelisoa ho theha setshelo sa flexbox le ho fetola likarolo tsa bana tse tobileng hore e be lintho tse feto-fetohang. Lijana tsa Flex le lintho li khona ho fetoloa ho ea pele ka thepa e eketsehileng ea flex.

Ke sejana sa flexbox!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ke inline flexbox setshelo!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Liphetoho tse arabelang li boetse li teng bakeng sa .d-flexle .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

Tataiso

Beha tsela ea lintho tse feto-fetohang ka har'a sets'oants'o se nang le lisebelisoa tsa tataiso. Maemong a mangata o ka siea sehlopha se otlolohileng mona kaha sebatli sa kamehla ke row. Leha ho le joalo, u ka 'na ua kopana le maemo ao u neng u hloka ho beha boleng bona ka mokhoa o hlakileng (joaloka meralo e arabelang).

Sebelisa .flex-rowho seta tsela e tšekaletseng (sebatli sa sebatli), kapa .flex-row-reverseho qala tsela e tšekaletseng ho tloha ka lehlakoreng le leng.

Flex ntlha ea 1
Flex ntlha ea 2
Flex ntlha ea 3
Flex ntlha ea 1
Flex ntlha ea 2
Flex ntlha ea 3
html
<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>

Sebelisa .flex-columnho beha tsela e otlolohileng, kapa .flex-column-reverseho qala tsela e otlolohileng ho tloha ka lehlakoreng le leng.

Flex ntlha ea 1
Flex ntlha ea 2
Flex ntlha ea 3
Flex ntlha ea 1
Flex ntlha ea 2
Flex ntlha ea 3
html
<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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Netefatsa litaba

Sebelisa justify-contentlisebelisoa holim'a lijana tsa flexbox ho fetola tekano ea lintho tse feto-fetohang holim'a axis e kholo (x-axis ho qala, y-axis haeba flex-direction: column). Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, around, kapa evenly.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Hlophisa lintho

Sebelisa align-itemslisebelisoa holim'a lijana tsa flexbox ho fetola tsela eo lintho tse feto-fetohang li leng ka har'a axis ea sefapano (k-axis ea ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa ho start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Ipakanye

Sebelisa align-selflisebelisoa linthong tsa flexbox ho fetola ka bonngoe tsela eo li tsamaisanang ka eona holim'a axis ea sefapano (y-axis ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa likhethong tse tšoanang le tsa align-items: start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).

Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Tlatsa

Sebelisa .flex-fillsehlopha letotong la likarolo tsa bana ho li qobella ho ba bophara bo lekanang le litaba tsa bona (kapa bophara bo lekanang haeba litaba tsa bona li sa fete mabokose a bona a moeli) ha u ntse u nka sebaka sohle se otlolohileng.

Flex ntho e nang le litaba tse ngata
Ntho ea Flex
Ntho ea Flex
html
<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>

Liphetoho tse arabelang li boetse li teng bakeng sa flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Hola le ho honyela

Sebelisa .flex-grow-*lisebelisoa ho fetola bokhoni ba ntho e fetohang ho hola ho tlatsa sebaka se fumanehang. Mohlala o ka tlase, .flex-grow-1likarolo li sebelisa sebaka sohle se fumanehang seo li ka se khonang, ha li ntse li lumella lintho tse peli tse setseng tsa flex sebaka sa tsona se hlokahalang.

Ntho ea Flex
Ntho ea Flex
Ntho ea boraro ea flex
html
<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>

Sebelisa .flex-shrink-*lisebelisoa ho fetola bokhoni ba ntho e feto-fetohang ho honyela ha ho hlokahala. Mohlala o ka tlase, ntho ea bobeli ea flex e nang le .flex-shrink-1e qobelloa ho thatela likahare tsa eona moleng o mocha, "ho honyela" ho lumella sebaka se eketsehileng bakeng sa ntho e fetileng ea flex ka .w-100.

Ntho ea Flex
Ntho ea Flex
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Liphetoho tse arabelang li boetse li teng bakeng sa flex-growle 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

Mekhahlelo ea likoloi

Flexbox e ka etsa lintho tse ntle haholo ha o kopanya lialgment tse feto-fetohang le mehatla ea likoloi. Ka tlaase mona ho na le mehlala e meraro ea ho laola lintho tse feto-fetohang ka maqheku a koloi: kamehla (ha ho margin ea koloi), ho sutumelletsa lintho tse peli ka ho le letona ( .me-auto), le ho sutumelletsa lintho tse peli ka ho le letšehali ( .ms-auto).

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
html
<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>

Ka ho lumellana-lintho

Ka ho otloloha, suthisa ntho e le 'ngoe ka holimo kapa tlase ho setshelo ka ho kopanya align-items, flex-direction: columnkapa .margin-top: automargin-bottom: auto

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
html
<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>

Qela

Fetola hore na lintho tse flexhang li phuthela joang ka har'a setshelo sa flex. Khetha ho se phutheloe ho hang (sebatli sa sebatli) ka .flex-nowrap, ho phuthela ka .flex-wrap, kapa ho phuthela ka morao ka .flex-wrap-reverse.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex flex-wrap">
  ...
</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Taelo

Fetola tatellano ea pono ea lintho tse ikhethileng ka lisebelisoa tse 'maloa order. Re fana feela ka likhetho tsa ho etsa ntho pele kapa ea ho qetela, hammoho le ho seta bocha ho sebelisa odara ea DOM. Joalo ka ha orderho nka boleng bo felletseng ho tloha ho 0 ho isa ho 5, eketsa CSS ea tloaelo bakeng sa boleng bofe kapa bofe bo hlokahalang.

Ntho ea pele ea flex
Ntho ea bobeli ea flex
Ntho ea boraro ea flex
html
<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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Ho feta moo ho boetse ho na le lihlopha tse arabelang .order-firstle .order-lasttse fetolang orderntho e itseng ka ho sebelisa order: -1le order: 6, ka ho latellana.

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

Hlophisa litaba

Sebelisa align-contentlisebelisoa ho li-container tsa flexbox ho hokahanya lintho hammoho holim'a axis ea sefapano. Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, around, kapa stretch. Ho bonts'a lisebelisoa tsena, re qobelletse flex-wrap: wraple ho eketsa palo ea lintho tse feto-fetohang.

Hlokomela! Thepa ena ha e na phello meleng e le 'ngoe ea lintho tse feto-fetohang.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Ntho ea media

U batla ho pheta karolo ea ntho ea media ho Bootstrap 4? E ntlafatse kapele ka lisebelisoa tse 'maloa tse u lumellang hore u be bonolo le ho itlhophisa ho feta pele.

Placeholder Image
Tsena ke litaba tse tsoang karolong ea media. U ka nkela sena sebaka ka litaba life kapa life 'me u li fetole kamoo ho hlokahalang.
html
<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>

'Me u re u batla ho beha litaba sebakeng se otlolohileng haufi le setšoantšo:

Placeholder Image
Tsena ke litaba tse tsoang karolong ea media. U ka nkela sena sebaka ka litaba life kapa life 'me u li fetole kamoo ho hlokahalang.
html
<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

Lisebelisoa tsa Flexbox li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa 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,
      ),
    ),