Do eɖokui ɖe dzi

Na flex nuwɔnawo nawɔ dɔ

Zã displayutilities tsɔ wɔ flexbox nugoe eye nàtrɔ direct children elements woazu flex nu. Woate ŋu atrɔ asi le flex nugoewo kple nuawo ŋu geɖe wu kple flex nɔnɔme bubuwo.

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

Nyaŋuɖoɖo ƒe vovototowo hã li na .d-flexkple .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

Mɔfiame

Ðo mɔfiame si flex nusiwo le flex nugoe si me mɔfiame dɔwɔnuwo le me. Le go geɖe me la, àteŋu aɖe asi le horizontal class la ŋu le afisia elabena browser ƒe gɔmedzedze nye row. Ke hã, àte ŋu ado go nɔnɔme siwo me wòhiã be nàɖo asixɔxɔ sia tẽ (abe ɖoɖo siwo ɖoa nya ŋu ene).

Zãe nàtsɔ .flex-rowaɖo mɔfiame si le tsia dzi (browser la ƒe gɔmedzedze), alo .flex-row-reversenàdze mɔfiame si le tsia dzi gɔme tso akpa si tsi tre ɖe eŋu.

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

Zãe nàtsɔ .flex-columnaɖo mɔfiame si le tsitrenu, alo .flex-column-reversenàtsɔ adze mɔfiame si le tsitrenu gɔme tso akpa si tsi tre ɖe eŋu.

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

Vovototo siwo le ŋuɖoɖo me hã li na 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

Tsɔ nya siwo le eme la ɖo kpe edzi

Zã justify-contentdɔwɔnu siwo le flexbox nugoewo dzi nàtsɔ atrɔ flex nuawo ƒe ɖoɖo si le axis gã la dzi (x-axis la be nàdze egɔme, y-axis ne flex-direction: column). Tia tso start(browser ƒe gɔmedzedze), end, center, between, around, alo 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>

Vovototo siwo le ŋuɖoɖo me hã li na 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

Ðo nuawo ɖe ɖoɖo nu

Zã align-itemsdɔwɔnu siwo le flexbox nugoewo dzi nàtsɔ atrɔ flex nuawo ƒe ɖoɖowɔwɔ ɖe cross axis dzi (y-axis si woadze egɔme, x-axis ne flex-direction: column). Tia tso start, end, center, baseline, alo stretch(browser ƒe gɔmedzedze).

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

Vovototo siwo le ŋuɖoɖo me hã li na 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

Ðo ɖokuiwò ɖe ɖoɖo nu

Zã align-selfdɔwɔnu siwo le flexbox nuawo dzi nàtsɔ atrɔ woƒe ɖoɖo ɖekaɖeka le atitsoga ƒe axis dzi (y-axis la be nàdze egɔme, x-axis ne flex-direction: column). Tia tiatia siwo le align-items: start, end, center, baseline, alo stretch(browser default) la dometɔ ɖeka me.

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

Vovototo siwo le ŋuɖoɖo me hã li na 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

Yɔ

Zã .flex-fillklass la ɖe nɔviawo ƒe akpa siwo kplɔ wo nɔewo ɖo dzi nàtsɔ azi wo dzi ɖe kekeme siwo sɔ kple woƒe emenyawo (alo kekeme siwo sɔ ne woƒe emenyawo mewu woƒe liƒo-ɖakawo ta o) esime nèle teƒe siwo katã li le tsia dzi la xɔm.

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

Vovototo siwo le ŋuɖoɖo me hã li na flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Tsi eye nàɖiɖi

Zã .flex-grow-*dɔwɔnuwo nàtsɔ atrɔ asi le flex nu ƒe ŋutete ŋu be wòatsi be wòaxɔ teƒe si li. Le kpɔɖeŋu si le ete me la, .flex-grow-1elementawo zãa teƒe siwo katã li si wòate ŋui, esime wòɖea mɔ na flex nu eve susɔeawo woƒe teƒe si hiã.

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

Zã .flex-shrink-*utilities nàtsɔ atrɔ asi le flex item ƒe ŋutete ŋu be wòaɖiɖi ne ehiã. Le kpɔɖeŋu si le ete me la, wozia flex item evelia .flex-shrink-1dzi be wòaxatsa eƒe emenyawo ɖe fli yeye dzi, “wòanɔ ɖeɖem kpɔtɔ” be wòana teƒe geɖe nanɔ flex nu si do ŋgɔ si ŋu .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>

Nyaŋuɖoɖo ƒe vovototowo hã li na flex-growkple 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 ƒe akpa aɖewo

Flexbox ate ŋu awɔ nu dziŋɔ aɖewo ŋutɔ ne ètsaka flex alignments kple auto margins. Woɖe flex nuawo dzi ɖuɖu to auto margins dzi ƒe kpɔɖeŋu etɔ̃ fia le ete: default (no auto margin), nu eve tutu ɖe ɖusime ( .me-auto), kple nu eve tutu ɖe miame ( .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>

Kple align-nuawo

Tsɔ nu ɖeka si wobɔbɔ la yi nugoe aɖe tame alo ete le tsitrenu to align-items, flex-direction: column, kple margin-top: autoalo tsakatsaka me 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>

Bla

Trɔ alesi flex nuawo xatsa ɖe flex nugoe me. Tia tso nu babla aɖeke kura me o (browser ƒe gɔmedzedze) kple .flex-nowrap, babla kple .flex-wrap, alo babla ɖe megbe kple .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>

Vovototo siwo le ŋuɖoɖo me hã li na 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

Gbeɖeɖe

Trɔ nukpɔkpɔ ƒe ɖoɖo si le flex nu aɖewo koŋ ŋu kple dɔwɔnu ʋɛ aɖewo order. Míenaa tiatia siwo nàwɔ be nàwɔ nu gbãtɔ alo mamlɛtɔ ko, kpakple gbugbɔgaɖɔɖo be woazã DOM ƒe nudɔdɔa. Abe alesi orderwòxɔa xexlẽdzesi blibo ƒe asixɔxɔ ɖesiaɖe tso 0 va ɖo 5 ene la, tsɔ CSS tɔxɛ kpe ɖe asixɔxɔ bubu ɖesiaɖe si hiã ŋu.

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

Vovototo siwo le ŋuɖoɖo me hã li na 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

Tsɔ kpe ɖe eŋu la, responsive .order-firstkple .order-lastclasses hã li siwo trɔa the orderof an element to dɔwɔwɔ order: -1kple order: 6, ɖe wo nɔewo yome.

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

Ðo nya siwo le eme la ɖe ɖoɖo nu

Zã align-contentdɔwɔnu siwo le flexbox nugoewo dzi nàtsɔ aɖo flex nuawo ɖe ɖoɖo nu ɖekae le cross axis la dzi. Tia tso start(browser ƒe gɔmedzedze), end, center, between, around, alo stretch. Be míaɖe dɔwɔnu siawo afia la, flex-wrap: wrapmíezi flex nuawo dzi eye míedzi wo ɖe edzi.

Tawo yi dzi! Nɔnɔme sia mekpɔa ŋusẽ aɖeke ɖe flex nusiwo le fli ɖeka dzi o.

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

Vovototo siwo le ŋuɖoɖo me hã li na 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

Nyadzɔdzɔgblɔmɔnuwo ƒe nu

Èle didim be yeagbugbɔ media object ƒe akpaa awɔ tso Bootstrap 4 mea? Gbugbɔ wɔe le ɣeyiɣi kpui aɖe ko me kple flex utilities ʋɛ aɖewo siwo ɖea mɔ na asitɔtrɔ le nɔnɔmewo ŋu kple asitɔtrɔ le nɔnɔmewo ŋu wu tsã gɔ̃ hã.

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

Eye gblɔ be yedi be yeatsɔ nyatakakaawo aɖo titina ɖe nɔnɔmetata la xa le tsitrenu:

<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 ƒe nyawo

Dɔwɔnuwo ƒe API

Woɖe gbeƒã Flexbox dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

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