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 display
izinto 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">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
Iiyantlukwano eziphendulayo zikwakhona .d-flex
kwaye .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-row
ukuseta isalathiso esithe tye (isikhangeli esingagqibekanga), okanye .flex-row-reverse
ukuqalisa ulwalathiso oluthe tye ukusuka kwelinye icala.
<div class="d-flex flex-row">
<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>
Sebenzisa .flex-column
ukuseta icala elithe nkqo, okanye .flex-column-reverse
ukuqalisa icala elithe nkqo ukusuka kwelinye icala.
<div class="d-flex flex-column">
<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>
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-content
izinto 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
.
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-items
izinto 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).
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-self
izinto 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).
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
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">
<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">
<div class="mr-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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
Ngokuthe nkqo susa into enye ukuya phezulu okanye ezantsi kwesikhongozeli ngokuxuba align-items
, flex-direction: column
kunye margin-top: auto
okanye margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" 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" 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>
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
.
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 order
eziluncedo. Sinikezela kuphela iinketho zokwenza into yokuqala okanye yokugqibela, kunye nokusetha kwakhona ukusebenzisa iodolo yeDOM. Njengoko order
kuthatha naliphi na ixabiso elipheleleyo (umzekelo, 5
), yongeza iCSS yesiko kuwo nawaphi na amaxabiso afunekayo.
<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>
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-content
izinto 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: wrap
kwaye sanyusa inani lezinto eziguqukayo.
Iintloko phezulu! Le propati ayinayo impembelelo kwimiqolo enye yezinto eziguquguqukayo.
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