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">I'm a flexbox container!</div>

<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

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

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

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

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

Ni align-items ye

aw bɛ fɛn kelen wuli ka wuli ka taa minɛn dɔ sanfɛ walima a 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" 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>

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

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

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

Responsive variations also exist for 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

Align content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

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