Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

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.

Ne ye flexbox minɛn ye!
html ye
<div class="d-flex p-2">I'm a flexbox container!</div>
Ne ye inline flexbox minɛn ye!
html ye
<div class="d-inline-flex p-2">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
  • .d-xxl-flex
  • .d-xxl-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ɛ.

Flex fɛn 1nan
Flex fɛn 2nan
Flex fɛn 3nan
Flex fɛn 1nan
Flex fɛn 2nan
Flex fɛn 3nan
html ye
<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>

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

Flex fɛn 1nan
Flex fɛn 2nan
Flex fɛn 3nan
Flex fɛn 1nan
Flex fɛn 2nan
Flex fɛn 3nan
html ye
<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>

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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, around, walima evenly.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<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>

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

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 .

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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ɛ).

Flex fɛn dɔ
Fɛn min bɛ flex la min bɛ bɛn ɲɔgɔn ma
Flex fɛn dɔ
Flex fɛn dɔ
Fɛn min bɛ flex la min bɛ bɛn ɲɔgɔn ma
Flex fɛn dɔ
Flex fɛn dɔ
Fɛn min bɛ flex la min bɛ bɛn ɲɔgɔn ma
Flex fɛn dɔ
Flex fɛn dɔ
Fɛn min bɛ flex la min bɛ bɛn ɲɔgɔn ma
Flex fɛn dɔ
Flex fɛn dɔ
Fɛn min bɛ flex la min bɛ bɛn ɲɔgɔn ma
Flex fɛn dɔ
<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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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ɔ.

Flex item ni kɔnɔkow caman
Flex fɛn dɔ
Flex fɛn dɔ
html ye
<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>

Jaabi caman ɲɔgɔnna fana bɛ yen flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-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.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn sabanan
html ye
<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>

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 ni .flex-shrink-1bɛ 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.

Flex fɛn dɔ
Flex fɛn dɔ
html ye
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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ɛ ( .me-auto), ani fɛn fila gɛlɛyali ka taa numan fɛ ( .ms-auto).

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
html ye
<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>

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.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
html ye
<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>

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.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex flex-nowrap">
  ...
</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex flex-wrap">
  ...
</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 o nafa ta ka bɔ 0 la ka se 5 ma, i ka CSS ladamulen fara a kan nafa wɛrɛw la minnu ka kan ka kɛ.

Fɔlɔ flex fɛn
Fɛn filanan min bɛ flex kɛ
Flex fɛn sabanan
html ye
<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>

Jaabi caman ɲɔgɔnna fana bɛ yen 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

O tɛmɛnen 'kɔ, jaabi .order-firstni .order-lastkalasi fana bɛ yen minnu bɛ fɛn orderdɔ 'kɔnɔ fɛn caman Yɛlɛma ni u waleyali order: -1ye ani order: 6, o cogo la.

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

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.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex align-content-end flex-wrap">...</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex align-content-center flex-wrap">...</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex align-content-between flex-wrap">...</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex align-content-around flex-wrap">...</div>
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<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-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

Media fɛn

Aw b’a fɛ ka media object component lasegin ka bɔ Bootstrap 4 la wa? A dabɔ kokura waati dɔɔnin kɔnɔ ni flex utilité damadɔw ye minnu bɛ sira Di hali flexibilité ni customisation ka tɛmɛn fɔlɔ kan.

Placeholder Image
Nin ye kunnafoni dɔw ye minnu bɛ bɔ kunnafonidilan dɔ yɔrɔ dɔ la. Aw bɛ se ka nin fɛn o fɛn bila a nɔ na ni kɔnɔkow bɛɛ ye ani ka a ladilan i n’a fɔ a mago bɛ cogo min na.
html ye
<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>

Ani k’a fɔ ko i b’a fɛ ka kɔnɔkow cɛmancɛ jɔlen to ja kɛrɛfɛ:

Placeholder Image
Nin ye kunnafoni dɔw ye minnu bɛ bɔ kunnafonidilan dɔ yɔrɔ dɔ la. Aw bɛ se ka nin fɛn o fɛn bila a nɔ na ni kɔnɔkow bɛɛ ye ani ka a ladilan i n’a fɔ a mago bɛ cogo min na.
html ye
<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 ye

Nafamafɛnw API

Flexbox nafalanw bɛ fɔ an ka nafamafɛnw API kɔnɔ san scss/_utilities.scss. Aw ye baara kɛcogo dɔn ni utilities API ye.

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