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

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

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, 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 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

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

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

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 sɛ ɔmfa ne mu nsɛm nkɔ nkyerɛwde foforo so, “ɛ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

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 ( .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 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>

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

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 (sɛ nhwɛso no, 5), 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-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 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