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">I'm a flexbox container!</div><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.d-xxl-flex.d-xxl-inline-flex
Mɔfiame
Ðo mɔfiame si flex nuawo le 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 mb-3">
<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.
<div class="d-flex flex-column mb-3">
<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.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">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">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">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">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">
<div class="p-2 w-100">Flex item</div>
<div class="p-2 flex-shrink-1">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 mb-3">
<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 mb-3">
<div class="me-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 mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-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.
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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 megbe babla 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">
<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-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-between.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-between.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-between.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-between.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-between.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-between.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
),
"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,
),
),