Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check

Hi ku hatlisa lawula layout, ku ringanisa, na sayizi ya tikholomu ta gridi, ku famba-famba, swiphemu, na swin’wana hi nxaxamelo lowu heleleke wa switirhisiwa swa flexbox leswi hlamulaka. Eka ku tirhisiwa loku rharhanganeke swinene, CSS ya ntolovelo yi nga ha laveka.

Endla leswaku ku va ni mahanyelo yo olova

Tirhisa displayswitirhisiwa ku tumbuluxa xikhomela-ndhawu xa flexbox na ku hundzula swiaki swa vana vo kongoma swi va swilo swo flex. Swibye swa flex na swilo swikota ku cinciwa kuya emahlweni hi swivumbeko swo engetelela swa flex.

Ndzi xigwitsirisi xa flexbox!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ndzi xigwitsirisi xa flexbox xa inline!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Ku hambana loku hlamulaka na kona ku kona eka .d-flexna .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

Tlhelo

Seta ndlela ya swilo swo flex eka xigwitsirisi xa flex lexi nga na switirhisiwa swa nkongomiso. Hi xitalo u nga tshika tlilasi ya horizontal laha tani hi leswi browser default yi nga row. Hambiswiritano, u nga ha hlangana na swiyimo laha a wu lava ku veka hi ku kongoma ntikelo lowu (ku fana na swivumbeko leswi hlamulaka).

Tirhisa .flex-rowku veka ndlela leyi nga etlhelo (xihlawulekisi xa browser), kumbe .flex-row-reverseku sungula ndlela leyi nga etlhelo ku suka eka tlhelo leri hambaneke.

Flex nchumu wa 1
Flex nchumu wa 2
Flex nchumu wa 3
Flex nchumu wa 1
Flex nchumu wa 2
Flex nchumu wa 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>

Tirhisa .flex-columnku veka ndlela yo yima, kumbe .flex-column-reverseku sungula ndlela yo yima ku suka eka tlhelo leri hambaneke.

Flex nchumu wa 1
Flex nchumu wa 2
Flex nchumu wa 3
Flex nchumu wa 1
Flex nchumu wa 2
Flex nchumu wa 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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Ku lulamisa leswi nga endzeni

Tirhisa justify-contentswitirhisiwa eka swikhomela-ndhawu swa flexbox ku cinca ku ringanana ka swilo swa flex eka axis leyikulu (x-axis ku sungula, y-axis loko flex-direction: column). Hlawula eka start(xihlawulekisi xa xihlamusela-marito), end, center, between, around, kumbe evenly.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Lulamisa swilo

Tirhisa align-itemsswitirhisiwa eka swikhomela-ndhawu swa flexbox ku cinca ku ringanana ka swilo swa flex eka cross axis (y-axis ku sungula, x-axis loko flex-direction: column). Hlawula eka start, end, center, baseline, kumbe stretch(xihlawulekisi xa xihlamusela-marito).

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Lulamisa ku tiyimisela

Tirhisa align-selfswitirhisiwa eka swilo swa flexbox ku cinca hi swoxe ku ringanana ka swona eka cross axis (y-axis ku sungula, x-axis loko flex-direction: column). Hlawula eka swihlawulekisi leswi fanaka na align-items: start, end, center, baseline, kumbe stretch(browser default).

Flex nchumu
Nchumu wo flex lowu ringanisiweke
Flex nchumu
Flex nchumu
Nchumu wo flex lowu ringanisiweke
Flex nchumu
Flex nchumu
Nchumu wo flex lowu ringanisiweke
Flex nchumu
Flex nchumu
Nchumu wo flex lowu ringanisiweke
Flex nchumu
Flex nchumu
Nchumu wo flex lowu ringanisiweke
Flex nchumu
<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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Tata

Tirhisa .flex-filltlilasi eka nxaxamelo wa swiaki swa vamakwavo ku swi sindzisa ku va ku anama loku ringanaka na nhundzu ya swona (kumbe ku anama loku ringanaka loko nhundzu ya vona yi nga hundzi mabokisi ya vona ya ndzilakano) loko u ri karhi u teka ndhawu hinkwayo leyi nga kona ya horizontal.

Flex item leyi nga na swilo swo tala
Flex nchumu
Flex nchumu
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>

Ku hambana loku hlamulaka na kona ku kona eka flex-fill.

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

Kula u tlhela u hunguteka

Tirhisa .flex-grow-*switirhisiwa ku cinca-cinca vuswikoti bya nchumu wa flex byo kula ku tata ndhawu leyi nga kona. Eka xikombiso lexi nga laha hansi, .flex-grow-1swiaki swi tirhisa ndhawu hinkwayo leyi nga kona leyi yi nga yi kotaka, loko yi ri karhi yi pfumelela swilo swimbirhi leswi saleke swo olova ndhawu ya swona leyi lavekaka.

Flex nchumu
Flex nchumu
Nchumu wa vunharhu wo 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>

Tirhisa .flex-shrink-*switirhisiwa ku cinca-cinca vuswikoti bya nchumu wo flex byo hunguteka loko swi laveka. Eka xikombiso lexi nga laha hansi, nchumu wa vumbirhi lowu flex lowu nga ni .flex-shrink-1wu sindzisiwa ku phutsela leswi nga endzeni ka wona eka layini leyintshwa, wu “hunguteka” leswaku wu pfumelela ndhawu yo tala eka nchumu lowu hundzeke lowu flex lowu nga ni .w-100.

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

Ku hambana loku hlamulaka na kona ku kona eka flex-growna 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

Ti margin ta movha

Flexbox yi nga endla swilo swo saseka swo hlamarisa loko u hlanganisa ti-flex alignments na ti auto margins. Laha hansi ku kombisiwile swikombiso swinharhu swa ku lawula swilo leswi flex hi ku tirhisa ti-auto margin: default (ku hava auto margin), ku susumeta swilo swimbirhi exineneni ( .me-auto), ni ku susumeta swilo swimbirhi eximatsini ( .ms-auto).

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

Hi ku ringanisa-swilo

Yisa nchumu wun’we lowu olovisiweke hi ndlela yo yima ehenhla kumbe ehansi ka xigwitsirisi hi ku hlanganisa align-items, flex-direction: column, na margin-top: autokumbe margin-bottom: auto.

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

Phutsela

Cinca ndlela leyi swilo leswi flex swi phutselaka ha yona eka xigwitsirisi xo flex. Hlawula eka ku pfumala ku phutsela nikatsongo (ku phutsela ka xihlamusela-marito) hi .flex-nowrap, ku phutsela hi .flex-wrap, kumbe ku phutsela endzhaku hi .flex-wrap-reverse.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Xileriso

Cinca ku landzelelana loku voniwaka ka swilo swo karhi swa flex hi switirhisiwa swi nga ri swingani order. Hi nyika ntsena swihlawulekisi swo endla nchumu wo sungula kumbe wo hetelela, xikan’we na ku tlheriseriwa endzhaku ku tirhisa oda ya DOM. Tanihi leswi orderswi tekaka ntikelo wihi na wihi wa nhlayo leyi heleleke ku suka eka 0 ku ya eka 5, engetela CSS ya ntolovelo eka mimpimo yihi na yihi yo engetela leyi lavekaka.

Nchumu wo sungula wo flex
Nchumu wa vumbirhi wo flex
Nchumu wa vunharhu wo 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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Ku engetela kwalaho ku tlhela ku va na ti responsive .order-firstna .order-lasttitlilasi leti cincaka the orderya elemente hi ku tirhisa order: -1na order: 6, hi ku landzelelana.

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

Lulamisa leswi nga endzeni

Tirhisa align-contentswitirhisiwa eka swibye swa flexbox ku ringanisa swilo swo flex swin’we eka cross axis. Hlawula eka start(xihlawulekisi xa xihlamusela-marito), end, center, between, around, kumbe stretch. Ku kombisa switirhisiwa leswi, hi sindzisile flex-wrap: wrapno engetela nhlayo ya swilo swa flex.

Tinhloko ta le henhla! Nhundzu leyi a yi na vuyelo eka tilayini tin’we ta swilo swo olova.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Nchumu wa vuhangalasi bya mahungu

U lava ku phindha xiphemu xa nchumu wa midiya ku suka eka Bootstrap 4? Yi vumbe nakambe hi nkarhi wo koma hi switirhisiwa swi nga ri swingani swo olova leswi pfumelelaka ku cinca-cinca lokukulu swinene ni ku cinca-cinca ku tlula eku sunguleni.

Placeholder Image
Lexi i swin’wana leswi nga endzeni ku suka eka xiphemu xa vuhangalasi bya mahungu. U nga siva leswi hi leswi nga endzeni swihi na swihi ivi u swi lulamisa hilaha swi lavekaka hakona.
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>

Naswona u vula leswaku u lava ku veka swilo leswi nga endzeni hi ndlela leyi yimisiweke ekusuhi ni xifaniso:

Placeholder Image
Lexi i swin’wana leswi nga endzeni ku suka eka xiphemu xa vuhangalasi bya mahungu. U nga siva leswi hi leswi nga endzeni swihi na swihi ivi u swi lulamisa hilaha swi lavekaka hakona.
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

API ya switirhisiwa

Switirhisiwa swa Flexbox swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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