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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><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.
<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.
<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.
<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).
<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).
<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 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.
<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>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.
<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 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.
<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.
<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.
<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.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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 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 (xikombiso, 5), engetela CSS ya ntolovelo eka mimpimo yihi na yihi yo engetela leyi lavekaka.
<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.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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