Ka kuru
Aw bɛ teliya ka grid kuluw labɛncogo, u labɛncogo, ani u bonya ɲɛnabɔ, u ka taamacogo, u yɔrɔw, ani fɛn wɛrɛw ni flexbox nafamafɛnw ye minnu bɛ jaabi di. Walasa ka waleyali gɛlɛnw sɔrɔ, CSS ladamu bɛ se ka kɛ wajibi ye.
Aw bɛ se ka flex kɛwalew kɛ
Aw bɛ displaynafalanw kɛ walasa ka flexbox minɛn dɔ dilan ani ka denmisɛnninw ka fɛnw tigɛli kɛ flex fɛnw ye. Flex minɛnw ni fɛnw bɛ se ka ladilan ka taa a fɛ ni flex jogo wɛrɛw ye.
<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>Jaabi caman ɲɔgɔnna fana bɛ yen .d-flexani .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
Kuntilenna
Aw bɛ flex fɛnw ɲɛsincogo sigi flex minɛn kɔnɔ ni direction utilities ye. a ka c' a la aw bɛ se ka kalasi horizontal bɔ yan i n' a fɔ navigatɔrɔn ka default ye row. Nka, i bɛ se ka ko dɔw sɔrɔ minnu na i mago tun bɛ ka nin nafa in sigi k’a jɛya (i n’a fɔ jaabiw labɛncogo).
Baara kɛ ni .flex-rowa ye walasa ka sira tilennen sigi (navigatɛri ka default), walima .flex-row-reverseka sira tilennen daminɛ ka bɔ fan dɔ fɛ.
<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>Aw bɛ baara kɛ ni .flex-columna ye walasa ka sira jɔlen sigi, walima .flex-column-reverseka sira jɔlen daminɛ ka bɔ fan dɔ fɛ.
<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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Aw ye jo di kɔnɔkow ma
Baara kɛ ni justify-contentnafamafɛnw ye flexbox minɛnw kan walasa ka flex fɛnw labɛncogo Changer axis principal kan (x-axis ka daminɛ, y-axis ni flex-direction: column). Sugandili kɛ start(navigatɛri ka default), end, center, between, walima 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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Aw bɛ fɛnw labɛn ɲɔgɔn fɛ
Baara kɛ ni align-itemsnafamafɛnw ye flexbox minɛnw kan walasa ka flex fɛnw labɛncogo Changer cross axis kan (y-axis ka daminɛ, x-axis ni flex-direction: column). startA’ ye , end, center, baseline, walima stretch(navigatɛri ka daminɛ) sugandi .
<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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Aw bɛ aw yɛrɛ labɛn
Baara kɛ ni align-selfnafamafɛnw ye flexbox fɛnw kan walasa k’u kelen-kelen bɛɛ labɛncogo Changer cross axis kan (y-axis ka daminɛ, x-axis ni flex-direction: column). Sugandili kɛ sugandiliw la i n’a fɔ align-items: start, end, center, baseline, walima stretch(navigatɛri ka daminɛ).
<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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Ka fa
Baara kɛ ni .flex-fillkalan ye balimakɛw ka fɛn dɔw kan minnu bɛ tugu ɲɔgɔn na walasa k’u wajibiya ka kɛ bonyaw ye minnu bɛ bɛn u kɔnɔkow ma (walima u bonya kelenw ni u kɔnɔkow ma tɛmɛ u dankan-kɛsuw kan) k’a sɔrɔ i bɛ yɔrɔ tilennenw bɛɛ ta minnu bɛ sɔrɔ.
<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>Jaabi caman ɲɔgɔnna fana bɛ yen flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Aw bɛ bonya ka dɔgɔya
Baara kɛ ni .flex-grow-*nafamafɛnw ye walasa ka flex fɛn dɔ seko wuli ka yɔrɔ sɔrɔlen fa. Misali min bɛ duguma, .flex-grow-1fɛnw bɛ baara Kɛ ni yɔrɔ bɛɛ ye min bɛ Se ka Kɛ a la, k’a sɔrɔ a bɛ fɛn fla tɔw To u ka yɔrɔ wajibiyalen na.
<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>Baara kɛ ni .flex-shrink-*nafamafɛnw ye walasa ka flex fɛn dɔ seko wuli ni a mago bɛ a la. Misali min bɛ duguma, flex fɛn filanan min bɛ ni .flex-shrink-1o bɛ Wajibiya k’a kɔnɔkow siri tigɛli kura la, “ka dɔgɔya” walasa ka yɔrɔ caman di flex fɛn tɛmɛnen ma ni .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>Jaabi caman ɲɔgɔnna fana bɛ yen flex-growani 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 marges (Auto marges).
Flexbox bɛ se ka fɛn kabakoma dɔw kɛ ni i ye flex alignments ni auto margins ɲagami ɲɔgɔn na. Misali saba jiralen bɛ jukɔrɔ minnu bɛ flex fɛnw kɔlɔsi auto margins fɛ: default (no auto margin), fɛn fila gɛlɛyali ka taa kinin fɛ ( .mr-auto), ani fɛn fila gɛlɛyali ka taa numan fɛ ( .ml-auto).
A fɔ man di nka, IE10 ni IE11 tɛ auto margins dɛmɛ ka ɲɛ flex fɛnw kan minnu bangebaga ka justify-contentnafa tɛ default ye. Aw ye nin StackOverflow jaabi lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
<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>Ni align-items ye
aw bɛ fɛn kelen wuli ka wuli ka taa minɛn dɔ sanfɛ walima duguma ni a ɲagaminen align-itemsye , flex-direction: column, ani margin-top: autowalima 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>Ka meleke
Aw bɛ flex fɛnw bɛ siri cogo min na flex minɛn kɔnɔ, aw bɛ o Changer. Sugandili kɛ ka bɔ no wrapping at all (navigateur default) ni .flex-nowrap, wrapping ni .flex-wrap, walima wrapping kɔsegin ni .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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Ci
Flex fɛn kɛrɛnkɛrɛnnenw yecogo caman Changer ni orderutilités bolomafaraw ye. An bɛ sugandiliw dɔrɔn de di walasa ka fɛn dɔ kɛ fɔlɔ walima laban, ani fana ka segin-ka-bɔnye kɛ walasa ka baara kɛ ni DOM komandi ye. I n’a fɔ ordera bɛ jateden dafalen suguya bɛɛ ta cogo min na (misali la, 5), aw bɛ CSS ladamulen fara a kan nafa wɛrɛw la minnu ka kan ka kɛ.
<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>Jaabi caman ɲɔgɔnna fana bɛ yen 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
Kɔnɔkow labɛn ɲɔgɔn fɛ
Baara kɛ ni align-contentnafamafɛnw ye minnu bɛ flexbox minɛnw kan walasa ka flex fɛnw labɛn ɲɔgɔn fɛ cross axis kan. Sugandili kɛ start(navigatɛri ka default), end, center, between, around, walima stretch. Walasa ka nin nafamafɛnw jira, an ye flex-wrap: wrapflex fɛnw wajibiya ani ka dɔ fara u hakɛ kan.
Kungolow bɛ wuli! O nafolo in tɛ nɔ bila flex fɛnw sinsinni kelenw na.
<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>Jaabi caman ɲɔgɔnna fana bɛ yen 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