Bɛn
Kwik kwik wan manej di layout, alaynɛshɔn, ɛn sayz fɔ grid kɔlɔm dɛn, nevigishɔn, kɔmpɔnɛnt dɛn, ɛn mɔ wit wan ful suit fɔ rispɔnsiv fleksbɔks yutiliti dɛn. Fɔ mɔ kɔmpleks implimɛnt dɛn, kɔstɔm CSS kin nid fɔ de.
Aplay display
yutiliti fɔ mek wan fleksbɔks kɔntena ɛn transfɔm dairekt pikin ɛlimɛnt dɛn to fleks aytem dɛn. Fleks kɔntena ɛn tin dɛn kin ebul fɔ chenj mɔ wit ɔda fleks prɔpati dɛn.
<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>
Rispɔnsiv difrɛns dɛn de bak fɔ .d-flex
ɛn .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
Set di dairekshɔn fɔ di fleks tin dɛn na wan fleks kɔntena wit dairekshɔn yutiliti dɛn. Bɔku tɛm yu kin pul di ɔrizɔntal klas ya as di brɔwza difɔlt na row
. Bɔt yu kin gɛt tin dɛn we yu nid fɔ sɛt dis valyu klia wan (lɛk layout dɛn we de ansa).
Yuz .flex-row
fɔ sɛt ɔrizɔntal dairekshɔn (di brɔwza difɔlt), ɔ .flex-row-reverse
fɔ stat di ɔrizɔntal dairekshɔn frɔm di ɔda say.
<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>
Yuz .flex-column
fɔ sɛt wan vertikal dairekshɔn, ɔ .flex-column-reverse
fɔ stat di vertikal dairekshɔn frɔm di ɔpɔzit say.
<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>
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Yuz justify-content
yutiliti dɛn na fleksbɔks kɔntena dɛn fɔ chenj di alaynɛshɔn fɔ fleks aytem dɛn na di men aks (di x-aks fɔ stat, y-aks if flex-direction: column
). Pik frɔm start
(brawza difɔlt), end
, center
, between
, ɔ around
.
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Yuz align-items
yutiliti dɛn na fleksbɔks kɔntena fɔ chenj di alaynɛshɔn fɔ fleks aytem dɛn na di krɔs aks (di y-aks fɔ stat, x-aks if flex-direction: column
). Pik frɔm start
, end
, center
, baseline
, ɔ stretch
(brɔwza difɔlt).
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Yuz align-self
yutiliti dɛn pan fleksbɔks aytem dɛn fɔ chenj dɛn alaynɛshɔn wan wan pan di krɔs aks (di y-aks fɔ stat, x-aks if flex-direction: column
). Pik frɔm di sem tin dɛn we yu kin pik lɛk align-items
: start
, end
, center
, baseline
, ɔ stretch
(browser difɔlt).
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Flexbox kin du sɔm fayn fayn tin dɛn we yu miks fleks alaynɛshɔn wit ɔto margin. Dɛn sho dɔŋ ya tri ɛgzampul dɛn fɔ kɔntrol fleks tin dɛn bay ɔto margin: difɔlt (nɔ gɛt ɔto margin), fɔ push tu tin dɛn na di rayt say ( .mr-auto
), ɛn fɔ push tu tin dɛn na di lɛft ( .ml-auto
).
Na ɔnfɔni, IE10 ɛn IE11 nɔ de sɔpɔt ɔto margin fayn fayn wan pan fleks aytem dɛn we dɛn mama ɛn papa gɛt nɔ-difɔlt justify-content
valyu. Si dis StackOverflow ansa fɔ mɔ ditel.
<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>
Muv wan fleks tin we de ɔp ɔ dɔŋ wan kɔntena vertikal wan bay we yu miks align-items
, flex-direction: column
, ɛn margin-top: auto
ɔ 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>
Chenj aw fleks tin dɛn de rap insay fleks kɔntena. Pik frɔm nɔ wrap atɔl (di brɔwza difɔlt) wit .flex-nowrap
, wrap wit .flex-wrap
, ɔ rivas wrap wit .flex-wrap-reverse
.
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Chenj di vijual ɔda fɔ sɔm patikyula fleks aytem dɛn wit wan anful order
yutiliti dɛn. Wi jɔs de gi opshɔn fɔ mek sɔntin fɔs ɔ las, ɛn bak fɔ riset fɔ yuz di DOM ɔda. As order
tek ɛni intaj valyu (ɛgz., 5
), ad kɔstɔm CSS fɔ ɛni ɔda valyu we nid.
<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>
Rispɔnsiv difrɛns dɛn de bak fɔ 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
Yuz align-content
yutiliti dɛn na fleksbɔks kɔntena dɛn fɔ alaynɛd fleks tin dɛn togɛda na di krɔs aks. Pik frɔm start
(brawza difɔlt), end
, center
, between
, around
, ɔ stretch
. Fɔ sho dɛn yutiliti ya, wi dɔn ɛnfɔs flex-wrap: wrap
ɛn inkrisayz di nɔmba fɔ di fleks tin dɛn.
Hed dɛn de ɔp! Dis prɔpati nɔ gɛt ɛni ifɛkt pan wan row dɛn fɔ fleks tin dɛn.
Rispɔnsiv difrɛns dɛn de bak fɔ 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