Da adi
Fa grid columns, navigation, components, ne nea ɛkeka ho nhyehyɛe, nhyehyɛe, ne ne kɛse ho dwuma ntɛmntɛm denam flexbox utilities a ɛyɛ mmuae a edi mũ so. Sɛ wopɛ sɛ wode di dwuma a ɛyɛ den kɛse a, ebia ɛho behia sɛ wɔyɛ CSS a wɔahyɛ da ayɛ.
Fa displayutilities yɛ flexbox container na dannan direct children elements kɔ flex nneɛma mu. Flex containers ne nneɛma tumi sesa bio de flex properties foforo.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma .d-flexne .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
Fa flex nneɛma no akwankyerɛ si flex container a akwankyerɛ utilities wom mu. Mpɛn pii no wubetumi ayi horizontal class no afi ha sɛnea browser default no yɛ row. Nanso, ebia wubehyia tebea horow a na ehia sɛ wode saa botae yi si hɔ pefee (te sɛ nhyehyɛe ahorow a ɛyɛ mmuae).
Fa di dwuma .flex-rowde hyehyɛ akwankyerɛ a ɛkɔ soro (browsa no default), anaasɛ .flex-row-reversefi ase kyerɛ ɔkwan a ɛkɔ soro no fi ɔfã a ɛne no bɔ abira no.
<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>Fa di dwuma .flex-columnde hyehyɛ akwankyerɛ a ɛda hɔ gyina hɔ, anaasɛ .flex-column-reversefi ase kyerɛ ɔkwan a ɛda hɔ no fi ɔfã a ɛne no bɔ abira no.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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
Fa justify-contentutilities wɔ flexbox containers so sesa flex nneɛma a ɛwɔ axis titiriw no so no hyia (x-axis a wode befi ase, y-axis sɛ flex-direction: column). Paw fi start(browser default), end, center, between, anaa 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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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
Fa align-itemsutilities a ɛwɔ flexbox containers so sesa flex nneɛma a ɛwɔ cross axis no so no hyia (y-axis a wode befi ase, x-axis sɛ flex-direction: column). Paw fi start, end, center, baseline, anaa stretch(browser default) mu.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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
Fa align-selfutilities wɔ flexbox nneɛma so sesa wɔn alignment no ankorankoro wɔ cross axis no so (y-axis no de fi ase, x-axis sɛ flex-direction: column). Paw fi nneɛma koro no ara a wobɛpaw no mu sɛ align-items: start, end, center, baseline, anaa 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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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 betumi ayɛ nneɛma bi a ɛyɛ fɛ a ɛyɛ hu bere a wode flex alignments ne auto margins frafra no. Nhwɛso abiɛsa a ɛkyerɛ sɛnea wodi flex nneɛma so denam auto margins so: default (no auto margin), nneɛma abien a wobɛpia akɔ nifa ( .mr-auto), ne nneɛma abien a wobɛpia akɔ benkum ( .ml-auto).
Awerɛhosɛm ne sɛ, IE10 ne IE11 ntumi mmoa auto margins yiye wɔ flex nneɛma a n’awofo wɔ justify-contentbo a ɛnyɛ default. Hwɛ StackOverflow mmuae yi ma nsɛm pii.
<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>Fa ade biako a ɛyɛ flex kɔ ade bi atifi anaa ase gyina hɔ denam align-items, flex-direction: column, ne margin-top: autoanaa 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>Sesa sɛnea nneɛma a wɔde flex no kyekyere ho wɔ ade a wɔde flex gu mu mu. Paw fi no wrapping koraa (browsa default) a .flex-nowrap, wrapping ne .flex-wrap, anaa reverse wrapping ne .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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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
Sesa nhyehyɛe a wɔde aniwa hu a ɛwɔ flex nneɛma pɔtee bi mu denam nsa kakraa bi a orderwɔde di dwuma so. Yɛde akwan a wobɛfa so ayɛ ade bi a edi kan anaa nea etwa to nkutoo ma, ne reset a wode bedi DOM ahyɛde no. Sɛnea orderegye integer botae biara (sɛ nhwɛso no, 5), fa custom CSS ka ho ma botae foforo biara a ehia.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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
Fa align-contentutilities a ɛwɔ flexbox containers so di dwuma fa flex nneɛma bom wɔ cross axis no so. Paw fi start(browser default), end, center, between, around, anaa stretch. Sɛ yɛbɛkyerɛ saa utilities yi a, yɛahyɛ flex-wrap: wrapna yɛama flex nneɛma dodow akɔ soro.
Ti a ɛwɔ soro! Saa agyapade yi nni nkɛntɛnso biara wɔ flex nneɛma a ɛtoatoa so biako so.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma 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