Source

Olova

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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ndzi xigwitsirisi xa flexbox xa inline!
<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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

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>

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

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

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

Tata

Tirhisa .flex-filltlilasi eka nxaxamelo wa swiaki swa vamakwavo ku swi sindzisa ku va hi ku anama loku ringanaka loko u ri karhi u teka ndhawu hinkwayo leyi nga kona leyi nga etlhelo. Ngopfu-ngopfu swi pfuna eka ku famba-famba loku ringanaka, kumbe loku faneleke.

Flex nchumu
Flex nchumu
Flex nchumu
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">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

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

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 wa flex na .flex-shrink-1wu sindzisiwa ku phutsela leswi nga endzeni ka wona eka layini leyintshwa, “ku hunguteka” ku pfumelela ndhawu yo tala eka nchumu wa flex wa khale hi .w-100.

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

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

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 ( .mr-auto), ni ku susumeta swilo swimbirhi eximatsini ( .ml-auto).

Khombo ra kona, IE10 na IE11 a va seketeli kahle ti-auto margin eka swilo swa flex leswi mutswari wa swona a nga ni justify-contentntikelo lowu nga riki wa xiviri. Vona nhlamulo leyi ya StackOverflow ku kuma vuxokoxoko byo tala.

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

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

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

Xileriso

Cinca ku landzelelana ka swivono swa 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 (xikombiso, 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
<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>

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

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