Source

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

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

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>

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 .

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

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

Ka fa

Baara kɛ ni .flex-fillkalan ye balimakɛw ka fɛnw kan minnu bɛ tugu ɲɔgɔn na walasa k’u wajibiya ka kɛ bonya kelen ye k’a sɔrɔ i bɛ yɔrɔ tilennen bɛɛ ta min bɛ sɔrɔ. Kɛrɛnkɛrɛnnenya la, a nafa ka bon kurunbokari la min bonya bɛ bɛn, walima min bɛ jo sɔrɔ.

Flex fɛn dɔ
Flex fɛn dɔ
Flex fɛn dɔ
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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 taa yɔrɔ sɔrɔlen fa. Misali min bɛ duguma, .flex-grow-1fɛnɲɛnɛmaw 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
<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-*nafalanw 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.

Flex fɛn dɔ
Flex fɛn dɔ
<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 justify-contentnafa tɛ default ye. Aw ye nin StackOverflow jaabi lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.

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

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

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

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

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

Aw bɛ 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-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