Source

Do eɖokui ɖe dzi

Dzra grid sɔtiwo ƒe ɖoɖo, woƒe ɖoɖowɔwɔ, kple woƒe lolome, mɔfiamewo, akpawo, kple bubuwo ɖo kaba kple flexbox dɔwɔnu siwo ɖoa nya ŋu ƒe ƒuƒoƒo bliboa. Le dɔwɔwɔ siwo sesẽ wu gome la, CSS si wowɔ ɖe ɖoɖo nu ate ŋu ahiã.

Na flex nuwɔnawo nawɔ dɔ

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.

Nyee nye flexbox ƒe nugoe!
<div class="d-flex p-2">I'm a flexbox container!</div>
Nyee nye inline flexbox nugoe!
<div class="d-inline-flex p-2">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

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.

Flex nu 1 lia
Flex nu 2 lia
Flex nu 3 lia
Flex nu 1 lia
Flex nu 2 lia
Flex nu 3 lia
<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>

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.

Flex nu 1 lia
Flex nu 2 lia
Flex nu 3 lia
Flex nu 1 lia
Flex nu 2 lia
Flex nu 3 lia
<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>

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

Tsɔ nya siwo le eme la ɖo kpe edzi

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, alo around.

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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>

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

Ðo nuawo ɖe ɖoɖo nu

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

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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

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

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.

Flex nusi wotsɔ wɔe
Flex nusi woɖo ɖe ɖoɖo nu
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi woɖo ɖe ɖoɖo nu
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi woɖo ɖe ɖoɖo nu
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi woɖo ɖe ɖoɖo nu
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi woɖo ɖe ɖoɖo nu
Flex nusi wotsɔ wɔe
<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

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 ( .mr-auto), kple nu eve tutu ɖe miame ( .ml-auto).

Nublanuitɔe la, IE10 kple IE11 medoa alɔ auto margins nyuie le flex nu siwo dzila ƒe justify-contentasixɔxɔ si menye default o le la dzi o. Kpɔ StackOverflow ƒe ŋuɖoɖo sia hena numeɖeɖe bubuwo.

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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>

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.

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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>

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.

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex flex-nowrap">
  ...
</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex flex-wrap">
  ...
</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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

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 ene (le kpɔɖeŋu me, 5), tsɔ CSS tɔxɛ kpe ɖe asixɔxɔ bubu ɖesiaɖe si hiã ŋu.

Gbãtɔ flex nu
Nu evelia si wotsɔ flex wɔe
Flex nu etɔ̃lia
<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>

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

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

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.

Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex align-content-end flex-wrap">...</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex align-content-center flex-wrap">...</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex align-content-between flex-wrap">...</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<div class="d-flex align-content-around flex-wrap">...</div>
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
Flex nusi wotsɔ wɔe
<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