Flex
Lawula ngokukhawuleza uyilo, ulungelelwaniso, kunye nobungakanani bekholamu zegridi, ukukhangela, izinto, kunye nokunye okuninzi ngesuti epheleleyo yezixhobo eziphendulayo zebhokisi ye-flexibox. Ukuphunyezwa okuntsonkothileyo ngakumbi, iCSS yesiko ingafuneka.
Faka displayizinto eziluncedo ukwenza isikhongozeli se-flexbox kwaye uguqule izinto ezithe ngqo zabantwana zibe zizinto eziguqukayo. Izikhongozeli zeFlex kunye nezinto ziyakwazi ukuguqulwa ngakumbi ngeempawu ezongezelelweyo ze-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>Iiyantlukwano eziphendulayo zikwakhona .d-flexkwaye .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
Seta icala lezinto eziguquguqukayo kwisikhongozeli esine-flex esineendlela eziluncedo. Kwiimeko ezininzi ungashiya udidi oluthe tye apha njengoko umkhangeli zincwadi ongagqibekanga unjalo row. Nangona kunjalo, ungadibana neemeko apho ubufuna ukuseta ngokuthe gca eli xabiso (njengoyilo oluphendulayo).
Sebenzisa .flex-rowukuseta isalathiso esithe tye (isikhangeli esingagqibekanga), okanye .flex-row-reverseukuqalisa ulwalathiso oluthe tye ukusuka kwelinye icala.
<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-columnukuseta icala elithe nkqo, okanye .flex-column-reverseukuqalisa icala elithe nkqo ukusuka kwelinye icala.
<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>Iiyantlukwano eziphendulayo zikwakhona 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
Sebenzisa justify-contentizinto eziluncedo kwizikhongozeli zeflexbox ukutshintsha ulungelelwaniso lwezinto eziguqukayo kwi-axis engundoqo (i-x-axis yokuqala, i-y-axis ukuba flex-direction: column). Khetha kwi start(ukungagqibeki kwesikhangeli), end, center, between, okanye 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>Iiyantlukwano eziphendulayo zikwakhona 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
Sebenzisa align-itemsizinto eziluncedo kwizikhongozeli zeflexbox ukutshintsha ulungelelwaniso lwezinto eziguqukayo kwi-axis enqamlezileyo (umgca ongu-y ukuqalisa, u-x-axis ukuba flex-direction: column). Khetha kwi start, end, center, baseline, okanye stretch(ukungagqibeki kwesikhangeli).
<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>Iiyantlukwano eziphendulayo zikwakhona 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
Sebenzisa align-selfizinto eziluncedo kwizinto ze-flexbox ukuzitshintshela ulungelelwaniso lwazo kwi-axis enqamlezileyo (umgca ongu-y ukuqalisa, umgca ongu-x ukuba flex-direction: column). Khetha kwiinketho ezifanayo njenge align-items: start, end, center, baseline, okanye stretch(ukungagqibeki kwesikhangeli).
<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>Iiyantlukwano eziphendulayo zikwakhona 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
Sebenzisa .flex-filliklasi kuluhlu lwezinto ezizalanayo ukuzinyanzela kububanzi obulinganayo ngelixa uthatha yonke indawo ethe tye ekhoyo. Iluncedo ngakumbi kububanzi obulinganayo, okanye obuthethelelekayo, ukukhangela.
<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>Iiyantlukwano eziphendulayo zikwakhona flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Sebenzisa .flex-grow-*izinto eziluncedo ukuguqula ukukwazi kwento eguqukayo ukukhula ukuzalisa indawo ekhoyo. Kulo mzekelo ungezantsi, .flex-grow-1izinto zisebenzisa yonke indawo ekhoyo, ngelixa uvumela izinto ezimbini eziseleyo zibe yindawo yazo eyimfuneko.
<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-*izinto eziluncedo ukuguqula isakhono sento eguqukayo ukuba icuthe ukuba kuyimfuneko. Kulo mzekelo ungezantsi, into yesibini eguquguqukayo kunye .flex-shrink-1nokunyanzeliswa ukusonga iziqulatho zayo kumgca omtsha, “ukuncipha” ukuvumela isithuba esingakumbi sento ebhetyebhetye yangaphambili nge .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>Iiyantlukwano eziphendulayo zikwakhona flex-growkwaye 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
I-Flexbox inokwenza izinto ezintle kakhulu xa udibanisa ulungelelwaniso oluguquguqukayo kunye nemida yeauto. Iboniswe ngezantsi yimizekelo emithathu yokulawula izinto eziguqukayo kusetyenziswa imida ye-auto: okungagqibekanga (akukho mda we-auto), ukutyhala izinto ezimbini ngasekunene ( .mr-auto), nokutyhala izinto ezimbini ekhohlo ( .ml-auto).
Ngelishwa, i-IE10 kunye ne-IE11 aziyixhasi ngokufanelekileyo imida ye-auto kwizinto eziguqukayo ezinomzali onexabiso elingagqibekanga justify-content. Jonga le mpendulo ye-StackOverflow ngeenkcukacha ezithe vetshe.
<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>Ngokuthe nkqo susa into enye ukuya phezulu okanye ezantsi kwesikhongozeli ngokuxuba align-items, flex-direction: columnkunye margin-top: autookanye 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>Guqula indlela izinto eziguquguqukayo ezizisonga ngayo kwisikhongozeli se-flex. Khetha ukusuka ekungasongelweni konke konke (isikhangeli esingagqibekanga) nge .flex-nowrap, ukusonga nge .flex-wrap, okanye umva ukusonga nge .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>Iiyantlukwano eziphendulayo zikwakhona 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
Guqula ulandelelwano olubonakalayo lwezinto ezithile eziguquguqukayo kunye nesandla sezinto ordereziluncedo. Sinikezela kuphela iinketho zokwenza into yokuqala okanye yokugqibela, kunye nokusetha kwakhona ukusebenzisa iodolo yeDOM. Njengoko orderkuthatha naliphi na ixabiso elipheleleyo (umzekelo, 5), yongeza iCSS yesiko kuwo nawaphi na amaxabiso afunekayo.
<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>Iiyantlukwano eziphendulayo zikwakhona 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
Sebenzisa align-contentizinto eziluncedo kwizikhongozeli ze-flexbox ukulungelelanisa izinto eziguqukayo kunye kwi-axis enqamlezileyo. Khetha kwi start(ukungagqibeki kwesikhangeli), end, center, between, around, okanye stretch. Ukubonisa ezi zinto ziluncedo, sinyanzelise flex-wrap: wrapkwaye sanyusa inani lezinto eziguqukayo.
Iintloko phezulu! Le propati ayinayo impembelelo kwimiqolo enye yezinto eziguquguqukayo.
<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>Iiyantlukwano eziphendulayo zikwakhona 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