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ɔ
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
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
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, alo 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>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
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
Ð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
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
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, wozi flex nu evelia dzi kple .flex-shrink-1be wòaxatsa eƒe emenyawo ɖe fli yeye dzi, “wòle ɖeɖem kpɔtɔ” be wòana teƒe geɖe nanɔ flex nu si do ŋgɔ la ŋu kple .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
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.
<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>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
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.
<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-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
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