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 ɛyɛ pɛpɛɛpɛ 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ɛ.
Ma flex suban ahorow nyɛ adwuma
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 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">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.d-xxl-flex.d-xxl-inline-flex
Kwan a ɛrefa
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 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>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 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>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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Bu emu nsɛm no bem
Fa justify-contentutilities a ɛ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, around, anaa evenly.
<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>
<div class="d-flex justify-content-evenly">...</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-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Fa nneɛma no hyia
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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Fa wo ho hyɛ mu
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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Gu mu
Fa .flex-filladesuakuw no di dwuma wɔ anuanom nneɛma ahorow a ɛtoatoa so so hyɛ wɔn ma wɔyɛ ntrɛwmu a ɛne wɔn nsɛm no yɛ pɛ (anaasɛ ntrɛwmu a ɛyɛ pɛ sɛ wɔn nsɛm no ntra wɔn hye-adaka ahorow no so a) bere a wogye baabi a ɛwɔ soro a ɛwɔ hɔ nyinaa.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Nyin na twetwe
Fa .flex-grow-*utilities di dwuma de toggle flex ade bi tumi a ɛma enyin ma ɛhyɛ baabi a ɛwɔ hɔ no ma. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, .flex-grow-1elements no de space a ɛwɔ hɔ nyinaa a ɛbɛtumi di dwuma, berɛ a ɛma flex nneɛma mmienu a aka no kwan ma wɔn space a ɛhia no.
<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>Fa .flex-shrink-*utilities di dwuma fa toggle flex ade bi tumi a ɛtwetwe sɛ ɛho hia a. Wɔ nhwɛso a ɛwɔ ase ha no mu no, wɔhyɛ flex ade a ɛto so abien a ɛne .flex-shrink-1no ma ɛkyekyere ne mu nsɛm no ma ɛyɛ nkyerɛwde foforo, “ɛtwetwe” na ama kwan pii ama flex ade a atwam no ne .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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma flex-growne 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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Auto margins a ɛyɛ adwuma
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 ( .me-auto), ne nneɛma abien a wobɛpia akɔ benkum ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Na align-nneɛma ahorow
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 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>Kyekyere ho
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 (browser 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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Kra
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 fi 0 kosi 5 no, fa custom CSS ka ho ma botae foforo biara a ehia.
<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>Nsonsonoe ahorow a ɛma mmuae nso wɔ hɔ ma order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Bio nso ɛwɔ hɔ nso responsive .order-firstne .order-lastclasses a ɛsesa the orderof an element denam order: -1ne order: 6, a wɔde di dwuma so.
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Fa nsɛm a ɛwɔ mu no hyia
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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Media ade a wɔde di dwuma
Worehwehwɛ sɛ wobɛsan ayɛ media adeɛ no fã no afiri Bootstrap 4 mu? San yɛ no bere tiaa bi mu denam flex utilities kakraa bi a ɛma kwan ma wotumi yɛ nsakrae ne sɛnea wopɛ mpo sen kan no.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Na ka sɛ wopɛ sɛ wode nsɛm no hyɛ mfonini no nkyɛn vertically center:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass
Nneɛma a wɔde di dwuma API
Flexbox utilities no wɔabɔ ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),