Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs

Ni kiakia ṣakoso awọn ifilelẹ, titete, ati iwọn ti awọn ọwọn akoj, lilọ kiri, awọn paati, ati diẹ sii pẹlu suite kikun ti awọn ohun elo flexbox idahun. Fun awọn imuse idiju diẹ sii, CSS aṣa le jẹ pataki.

Mu awọn ihuwasi rọ

Waye displayawọn ohun elo lati ṣẹda apoti flexbox ki o yi awọn eroja ti awọn ọmọde taara pada si awọn ohun kan rọ. Awọn apoti Flex ati awọn ohun kan ni anfani lati ṣe atunṣe siwaju pẹlu awọn ohun-ini irọrun.

Mo jẹ apoti flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Mo jẹ apoti apoti flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Awọn iyatọ idahun tun wa fun .d-flexati .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

Itọsọna

Ṣeto itọsọna ti awọn ohun kan ti o rọ sinu apo eiyan pẹlu awọn ohun elo itọnisọna. Ni ọpọlọpọ igba o le fi kilaasi petele silẹ nibi bi aiyipada aṣawakiri jẹ row. Sibẹsibẹ, o le ba pade awọn ipo nibiti o nilo lati ṣeto iye yii ni gbangba (bii awọn ipalemo idahun).

Lo .flex-rowlati ṣeto itọnisọna petele (aiyipada aṣawakiri), tabi .flex-row-reverselati bẹrẹ itọsọna petele lati apa idakeji.

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

Lo .flex-columnlati ṣeto itọsọna inaro, tabi .flex-column-reverselati bẹrẹ itọsọna inaro lati apa idakeji.

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

Awọn iyatọ idahun tun wa fun 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

Da akoonu

Lo justify-contentawọn ohun elo lori awọn apoti flexbox lati yi titete awọn ohun kan rọ lori ipo akọkọ (apa-x lati bẹrẹ, y-axis ti o ba jẹ flex-direction: column). Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi evenly.

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

Awọn iyatọ idahun tun wa fun 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

Sopọ awọn nkan

Lo align-itemsawọn ohun elo lori awọn apoti flexbox lati yi titete awọn ohun kan rọ lori ipo agbelebu (y-axis lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).

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

Awọn iyatọ idahun tun wa fun 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

Dapọ mọ ara ẹni

Lo align-selfawọn ohun elo lori awọn ohun kan flexbox lati ṣe iyipada titete wọn ni ẹyọkan lori ipo agbelebu (apa y lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati awọn aṣayan kanna bi align-items: start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).

Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
<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>

Awọn iyatọ idahun tun wa fun 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

Kun

Lo .flex-fillkilasi naa lori lẹsẹsẹ awọn eroja arakunrin lati fi ipa mu wọn sinu awọn iwọn ti o dọgba si akoonu wọn (tabi awọn iwọn iwọn dogba ti akoonu wọn ko ba kọja awọn apoti aala wọn) lakoko gbigbe gbogbo aaye petele ti o wa.

Nkan Flex pẹlu ọpọlọpọ akoonu
Nkan Flex
Nkan Flex
<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>

Awọn iyatọ idahun tun wa fun flex-fill.

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

Dagba ati dinku

Lo .flex-grow-*awọn ohun elo lati yi agbara ohun kan rọ lati dagba lati kun aaye to wa. Ni apẹẹrẹ ni isalẹ, awọn .flex-grow-1eroja lo gbogbo aaye ti o wa ti o le, lakoko ti o ngbanilaaye awọn ohun elo meji ti o ku ni aaye pataki wọn.

Nkan Flex
Nkan Flex
Kẹta Flex ohun kan
<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>

Lo .flex-shrink-*awọn ohun elo lati yi agbara ohun kan rọ lati dinku ti o ba jẹ dandan. Ninu apẹẹrẹ ti o wa ni isalẹ, ohun elo ti o ni irọrun keji pẹlu .flex-shrink-1ti fi agbara mu lati fi ipari si awọn akoonu rẹ si laini titun kan, "isunkun" lati gba aaye diẹ sii fun ohun kan ti o rọ tẹlẹ pẹlu .w-100.

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

Awọn iyatọ idahun tun wa fun flex-growati 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

Awọn ala aifọwọyi

Flexbox le ṣe diẹ ninu awọn ohun oniyi lẹwa nigbati o ba dapọ awọn tito nkan lẹsẹsẹ pẹlu awọn ala adaṣe. Ti o han ni isalẹ jẹ awọn apẹẹrẹ mẹta ti ṣiṣakoso awọn ohun kan rọ nipasẹ awọn ala adaṣe: aiyipada (ko si ala adaṣe), titari awọn ohun meji si apa ọtun ( .me-auto), ati titari awọn ohun meji si apa osi ( .ms-auto).

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

Pẹlu titọ-ohun

Ni inaro gbe ohun kan rọ si oke tabi isalẹ ti apoti kan nipa dapọ align-items, flex-direction: column, ati margin-top: autotabi margin-bottom: auto.

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

Fi ipari si

Yi pada bi awọn ohun kan ti n yipada sinu apo eiyan kan. Yan lati ko si murasilẹ rara (aifọwọyi aṣawakiri) pẹlu .flex-nowrap, murasilẹ pẹlu .flex-wrap, tabi yipo pẹlu .flex-wrap-reverse.

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

Awọn iyatọ idahun tun wa fun 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

Bere fun

Yi aṣẹ wiwo ti awọn ohun kan rọ pẹlu ọwọ awọn orderohun elo. A pese awọn aṣayan fun ṣiṣe ohun kan ni akọkọ tabi kẹhin, bakanna bi atunto lati lo aṣẹ DOM. Bi ordero ṣe gba iye odidi eyikeyi lati 0 si 5, ṣafikun aṣa CSS fun eyikeyi awọn iye afikun ti o nilo.

Ohun akọkọ rọ
Ohun kan Flex keji
Kẹta Flex ohun kan
<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>

Awọn iyatọ idahun tun wa fun 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

Ni afikun awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati order: 6, lẹsẹsẹ.

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

Sopọ akoonu

Lo align-contentawọn ohun elo lori awọn apoti flexbox lati mu awọn nkan rọ pọ lori ipo agbelebu. Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi stretch. Lati ṣe afihan awọn ohun elo wọnyi, a ti fi ipa flex-wrap: wrapmu ati pọ si nọmba awọn ohun kan rọ.

Efeti sile! Ohun-ini yii ko ni ipa lori awọn ori ila ẹyọkan ti awọn nkan rọ.

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

Awọn iyatọ idahun tun wa fun 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

Ohun elo media

Ṣe o n wa lati tun ṣe paati ohun elo media lati Bootstrap 4? Tun ṣe ni igba diẹ pẹlu awọn ohun elo irọrun diẹ ti o gba laaye paapaa irọrun ati isọdi ju ti iṣaaju lọ.

Placeholder Image
Eyi jẹ diẹ ninu akoonu lati paati media kan. O le rọpo eyi pẹlu akoonu eyikeyi ki o ṣatunṣe bi o ṣe nilo.
<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>

Ati pe o fẹ lati ni inaro aarin akoonu ti o tẹle aworan naa:

Placeholder Image
Eyi jẹ diẹ ninu akoonu lati paati media kan. O le rọpo eyi pẹlu akoonu eyikeyi ki o ṣatunṣe bi o ṣe nilo.
<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

API Awọn ohun elo

Awọn ohun elo Flexbox jẹ ikede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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