Mafere na isi ọdịnaya Gaa na ntugharị docs

Jikwaa ngwa ngwa, nhazi na nha nke kọlụm grid, igodo, akụrụngwa na ihe ndị ọzọ site na iji ngwa ngwa flexbox na-anabata ngwa ngwa. Maka mmejuputa iwu siri ike karị, CSS omenala nwere ike ịdị mkpa.

Kwado omume mgbanwe

Tinye displayakụrụngwa iji mepụta akpa flexbox wee gbanwee ihe ụmụaka na-eduzi ka ọ bụrụ ihe na-agbanwe agbanwe . Enwere ike ịmegharị arịa na ihe ndị na-agbanwe agbanwe site na iji njirimara mgbanwe ndị ọzọ.

Abụ m akpa flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Abụ m akpa flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Ọdịiche na-anabatakwa dịkwa maka .d-flexna .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

Ntuziaka

Tọọ ntụzịaka nke ihe ndị na-agbanwe agbanwe n'ime akpa mkpụgharị nwere ihe ntụzi aka. N'ọtụtụ oge, ị nwere ike ịhapụ klaasị kwụ ọtọ ebe a ka ihe nchọgharị ndabere bụ row. Otú ọ dị, ị nwere ike izute ọnọdụ ebe ịchọrọ ịtọ uru a n'ụzọ doro anya (dị ka nhazi na-anabata).

Jiri .flex-rowka ịtọọ ntụzịaka kwụ ọtọ (ndabara ihe nchọgharị ahụ), ma ọ bụ .flex-row-reverseka ịmalite ntụzịaka kwụ n'akụkụ nke ọzọ.

Flex ihe 1
Flex ihe 2
Flex ihe 3
Flex ihe 1
Flex ihe 2
Flex ihe 3
<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>

Jiri .flex-columnka ịtọ ụzọ kwụ ọtọ, ma ọ bụ .flex-column-reverseka ịmalite ụzọ kwụ ọtọ site n'akụkụ nke ọzọ.

Flex ihe 1
Flex ihe 2
Flex ihe 3
Flex ihe 1
Flex ihe 2
Flex ihe 3
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie ọdịnaya

Jiri justify-contentakụrụngwa na igbe flexbox ka ịgbanwee nhazi nke ihe ngbanwe na axis isi (axis x-amalite, y-axis ma ọ bụrụ flex-direction: column). Họrọ site na start(ndabara ihe nchọgharị), end, center, between, around, ma ọ bụ evenly.

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

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie ihe

Jiri align-itemsakụrụngwa dị na igbe flexbox iji gbanwee nhazi nke ihe ndị na-agbanwe agbanwe na axis obe (y-axis ịmalite, x-axis ma ọ bụrụ flex-direction: column). Họrọ site na start, end, center, baseline, ma ọ bụ stretch(ndabara ihe nchọgharị).

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

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie onwe

Jiri align-selfutilities na flexbox ihe ka ịgbanwee n'otu n'otu ha alignment na cross axis (y-axis na-amalite, x-axis ma ọ bụrụ flex-direction: column). Họrọ n'otu nhọrọ dị ka align-items: start, end, center, baseline, ma ọ bụ stretch(ndabara ihe nchọgharị).

Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Jupụta

Jiri .flex-fillklaasị na usoro nke nwanne ihe ịmanye ha ka obosara ha nhata ọdịnaya ha (ma ọ bụ nha nha ma ọ bụrụ na ọdịnaya ha anaghị agafe igbe oke ha) ka ị na-eburu oghere niile dị n'akụkụ.

Flex ihe nwere ọtụtụ ọdịnaya
Flex ihe
Flex ihe
<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>

Ọdịiche na-anabatakwa dịkwa maka flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Too na adalata

Jiri .flex-grow-*akụrụngwa ka ịgbanwee ike ihe na-agbanwe agbanwe iji mejupụta oghere dị. N'ihe atụ dị n'okpuru ebe a, ihe .flex-grow-1ndị ahụ na-eji ohere niile ọ nwere ike, ebe ha na-ahapụ ihe abụọ fọdụrụnụ na-agbanwe agbanwe ohere ha dị mkpa.

Flex ihe
Flex ihe
Ihe mgbanwe mgbanwe nke atọ
<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>

Jiri .flex-shrink-*akụrụngwa ka ịgbanwee ike ihe na-agbanwe agbanwe ọ bụrụ na ọ dị mkpa. N'ihe atụ dị n'okpuru ebe a, a na .flex-shrink-1-amanye ihe nke abụọ na-agbanwe agbanwe na ka ọ kechie ọdịnaya ya na ahịrị ọhụrụ, "na-ebelata" iji nyekwuo ohere maka ihe mgbanwe gara aga na .w-100.

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

Ọdịiche na-anabatakwa dịkwa maka flex-growna 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

Oke akpaaka

Flexbox nwere ike ime ụfọdụ ọmarịcha ihe mara mma mgbe ị na-agwakọta flex alignments na oke akpaaka. Egosiri n'okpuru bụ ọmụmaatụ atọ nke ịchịkwa ihe mgbanwe site na oke akpaaka: ndabara (enweghị oke akpaaka), ịkwanye ihe abụọ n'aka nri ( .me-auto), na ịkwanye ihe abụọ n'aka ekpe ( .ms-auto).

Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>

Na nhazi-ihe

Bugharịa otu ihe na-agbanwe agbanwe gaa n'elu ma ọ bụ ala nke akpa site na ịgwakọta align-items, flex-direction: column, na margin-top: automa ọ bụ margin-bottom: auto.

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

Kechie

Gbanwee ka ihe ndị na-agbanwe agbanwe si kechie n'ime akpa mgbanwe. Họrọ n'enweghị ihe mkpuchi ma ọlị (ndabara ihe nchọgharị ahụ) na .flex-nowrap, ijikọ ya na .flex-wrap, ma ọ bụ tụgharịa jiri .flex-wrap-reverse.

Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-nowrap">
  ...
</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-wrap">
  ...
</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Ọdịiche na-anabatakwa dịkwa maka 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

Nye iwu

Gbanwee usoro a na -ahụ anya nke ihe ndị na-agbanwe agbanwe site na iji obere orderngwa ọrụ. Anyị na-enye naanị nhọrọ maka ịme ihe mbụ ma ọ bụ nke ikpeazụ, yana ntọgharị iji iji usoro DOM. Dị ka orderọ na-ewe uru integer ọ bụla site na 0 ruo 5, tinye CSS omenala maka ụkpụrụ ọ bụla ọzọ achọrọ.

Ihe mbụ mgbanwe
Ihe mgbanwe mgbanwe nke abụọ
Ihe mgbanwe mgbanwe nke atọ
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Na mgbakwunye, enwerekwa anabata .order-firstna .order-lastklaasị na-agbanwe orderihe mmewere site na itinye order: -1na order: 6, n'otu n'otu.

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

Hazie ọdịnaya

Jiri align-contentakụrụngwa na arịa flexbox kwado ihe ndị na-agbanwe agbanwe ọnụ na axis cross. Họrọ site na start(ndabara ihe nchọgharị), end, center, between, around, ma ọ bụ stretch. Iji gosi akụrụngwa ndị a, anyị etinyela flex-wrap: wrapma mụbaa ọnụ ọgụgụ nke flex ihe.

Welie isi elu! Ngwongwo a enweghị mmetụta na otu ahịrị nke ihe mgbanwe.

Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-end flex-wrap">...</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-center flex-wrap">...</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-between flex-wrap">...</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-around flex-wrap">...</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex align-content-stretch flex-wrap">...</div>

Ọdịiche na-anabatakwa dịkwa maka 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Ihe mgbasa ozi

Na-achọ ịmegharị akụkụ ihe mgbasa ozi sitere na Bootstrap 4? Megharịa ya n'oge na-adịghị na ole na ole flex utilities na-enye ohere ọbụna karịa mgbanwe na nhazi karịa ka ọ dị na mbụ.

Placeholder Image
Nke a bụ ụfọdụ ọdịnaya sitere na mpaghara mgbasa ozi. Ị nwere ike dochie nke a na ọdịnaya ọ bụla ma dozie ya dịka ọ dị mkpa.
<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>

Ma kwuo na ịchọrọ itinye ọdịnaya dị n'akụkụ onyonyo a kwụ ọtọ:

Placeholder Image
Nke a bụ ụfọdụ ọdịnaya sitere na mpaghara mgbasa ozi. Ị nwere ike dochie nke a na ọdịnaya ọ bụla ma dozie ya dịka ọ dị mkpa.
<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

Utilities API

Ekwuwapụtara ngwa Flexbox n'ime ngwa API anyị na scss/_utilities.scss. Mụta otu esi eji ngwa API.

    "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
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),