Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Fa'afoliga

Fa'atopetope le fa'atulagaina, fa'aogaina, ma le fa'avasegaina o koluma fa'asologa, ta'avale, vaega, ma isi mea fa'atasi ai ma se fa'aoga atoa o mea fa'aoga flexbox tali. Mo fa'atinoga sili atu ona lavelave, atonu e mana'omia le CSS masani.

Fa'aagaaga fa'aletonu

Fa'aoga displaymea aoga e fai ai se atigipusa flexbox ma fa'aliliu sa'o elemene tamaiti i ni mea fa'alelei. E mafai ona toe fa'aleleia atili koneteina ma mea fa'apipi'i fa'atasi ma mea fa'aopoopo fa'aopoopo.

O a'u o se pusa flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
O a'u o se atigipusa flexbox totonu!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

E iai fo'i suiga tali atu mo .d-flexma .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

Fa'atonuga

Seti le itu o mea fetu'utu'una'i i totonu o se atigi pusa fa'atasi ma fa'aoga fa'aoga. I le tele o tulaga e mafai ona e aveese le vasega faalava iinei ona o le browser default o le row. Ae ui i lea, atonu e te feagai ma tulaga e te manaʻomia ai le faʻatulagaina manino o lenei tau (pei o faʻasologa tali).

Fa'aoga .flex-rowe seti ai se itu fa'ata'atia (le browser default), po'o .flex-row-reversele amata o le itu fa'asaga mai le isi itu.

Fuafua mea 1
Fuafua mea 2
Fuafua mea 3
Fuafua mea 1
Fuafua mea 2
Fuafua mea 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>

Fa'aoga .flex-columne seti ai se itu tu'usa'o, po'o .flex-column-reversele amataina o le itu sa'o mai le isi itu.

Fuafua mea 1
Fuafua mea 2
Fuafua mea 3
Fuafua mea 1
Fuafua mea 2
Fuafua mea 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>

O lo'o i ai fo'i suiga fa'afoliga mo 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

Fa'amaonia mataupu

Fa'aoga justify-contentmea fa'aoga i luga o pusa flexbox e sui ai le fa'aogaina o mea fa'afeso'ota'i i luga o le axis autu (x-axis e amata, y-axis pe afai flex-direction: column). Filifili mai start(le browser default), end, center, between, around, poʻo evenly.

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

O lo'o i ai fo'i suiga fa'afoliga mo 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

Fa'aoga mea

Fa'aoga align-itemsmea fa'aoga i luga o pusa flexbox e sui ai le fa'aogaina o mea fa'apipi'i i luga o le koluse axis (o le y-axis e amata, x-axis pe afai flex-direction: column). Filifili mai le start, end, center, baseline, po'o le stretch(fa'aoga le browser).

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

O lo'o i ai fo'i suiga fa'afoliga mo 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

Fa'asa'o oe lava

Fa'aoga align-selfmea fa'aoga i luga o mea flexbox e sui ta'ito'atasi lo latou fa'aogaina i luga o le koluse axis (o le y-axis e amata, x-axis pe afai flex-direction: column). Filifili mai filifiliga tutusa e pei o le align-items: start, end, center, baseline, poʻo stretch(faʻaoga le browser).

Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
<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>

O lo'o i ai fo'i suiga fa'afoliga mo 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

Faatumu

Fa'aoga le .flex-fillvasega i luga o se fa'asologa o aumea e fa'amalosi i latou i le lautele e tutusa ma o latou anotusi (po'o le tutusa lautele pe a le sili atu a latou mea i totonu o latou atigipusa-pusa) a'o fa'aoga uma avanoa avanoa.

Fetu'aiga mea ma le tele o anotusi
Fuafua mea
Fuafua mea
<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>

O lo'o i ai fo'i suiga fa'afoliga mo flex-fill.

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

Tupu ma fa'aitiiti

Fa'aoga .flex-grow-*mea fa'aoga e fa'asolo ai se mea fa'alelei e mafai ona tupu e fa'atumu avanoa avanoa. I le faʻataʻitaʻiga o loʻo i lalo, .flex-grow-1e faʻaogaina e elemene avanoa avanoa uma e mafai, aʻo faʻatagaina mea faʻaopoopo e lua o loʻo totoe o latou avanoa talafeagai.

Fuafua mea
Fuafua mea
Lona tolu mea fetuutuunai
<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>

Fa'aoga .flex-shrink-*mea fa'aoga e fesuia'i ai le mafai ona fa'aiti'i'i se mea pe a mana'omia. I le faʻataʻitaʻiga o loʻo i lalo, o le mea faʻapipiʻi lona lua ma .flex-shrink-1e faʻamalosia e afifi ona mea i totonu i se laina fou, "faʻaitiitia" e faʻataga ai le tele o avanoa mo le mea faʻapipiʻi muamua ma .w-100.

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

E iai fo'i suiga tali atu mo flex-growma 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

Fa'ailoga ta'avale

E mafai e le Flexbox ona fai ni mea mata'utia pe a e fa'afefiloi fa'aoga fa'aoga ma fa'alava ta'avale. O lo'o fa'aalia i lalo ni fa'ata'ita'iga se tolu o le fa'atonutonuina o mea fe'avea'i e ala i ta'otoga ta'avale: fa'aletonu (leai se laina ta'avale), tulei mea e lua i le taumatau ( .me-auto), ma tulei mea e lua i le agavale ( .ms-auto).

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

Fa'atasi ai-aitema

Fa'atū sa'o se mea fe'ai se tasi i le pito i luga po'o le pito i lalo o se koneteina e ala i le fa'afefiloi align-items, flex-direction: column, ma margin-top: autopo'o le margin-bottom: auto.

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

afifi

Suia pe fa'afefea ona afifi aitema fe'avea'i i totonu o se atigi pusa. Filifili mai le leai o se afifiina (le browser default) i le .flex-nowrap, afifi i le .flex-wrap, poʻo le fesuiaʻi afifi i le .flex-wrap-reverse.

Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
<div class="d-flex flex-nowrap">
  ...
</div>
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
<div class="d-flex flex-wrap">
  ...
</div>
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
Fuafua mea
<div class="d-flex flex-wrap-reverse">
  ...
</div>

O lo'o i ai fo'i suiga fa'afoliga mo 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

Poloaiga

Suia le fa'atonuga va'aia o mea fa'apitoa fa'afeso'ota'i fa'atasi ma nai ordermea aoga. Matou te tuʻuina atu naʻo filifiliga mo le faia o se mea muamua pe mulimuli, faʻapea foʻi ma le toe setiina e faʻaaoga ai le DOM order. A'o orderave so'o se tau aofa'i mai le 0 i le 5, fa'aopoopo le CSS masani mo so'o se tau fa'aopoopo e mana'omia.

Muamua mea fetuutuunai
Mea fa'alelei lona lua
Lona tolu mea fetuutuunai
<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>

O lo'o i ai fo'i suiga fa'afoliga mo 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

E le gata i lea o loʻo i ai foʻi tali .order-firstma .order-lastvasega e suia ai le orderelemene e ala i le faʻaogaina order: -1ma le order: 6, i le faasologa.

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

Fa'aoga anotusi

Fa'aoga align-contentmea fa'aoga i koneteina flexbox e fa'aoga fa'atasi ai mea fa'apipi'i i luga ole koluse. Filifili mai start(le browser default), end, center, between, around, poʻo stretch. Ina ia faʻaalia nei mea aoga, ua matou faʻamalosia flex-wrap: wrapma faʻateleina le numera o mea faʻapipiʻi.

Ulu i luga! O lenei meatotino e leai se aoga i laina tasi o mea faʻapipiʻi.

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

O lo'o i ai fo'i suiga fa'afoliga mo 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

Mea fa'asalalau

Va'ai e toe fa'atusa le vaega o mea fa'asalalau mai le Bootstrap 4? Toe fa'afo'i i se taimi fa'atasi ai ma ni nai mea fa'aoga fetu'utu'una'i e mafai ai ona sili atu ona fetu'una'i ma fa'avasegaina nai lo le taimi muamua.

Placeholder Image
O nisi nei o anotusi mai se vaega fa'asalalau. E mafai ona e suia lenei mea i soʻo se anotusi ma fetuunai pe a manaʻomia.
<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 fai atu e te mana'o e fa'atotonu fa'atotonugalemu mea i tafatafa o le ata:

Placeholder Image
O nisi nei o anotusi mai se vaega fa'asalalau. E mafai ona e suia lenei mea i soʻo se anotusi ma fetuunai pe a manaʻomia.
<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

Flexbox utilities o loʻo faʻaalia i totonu oa matou mea aoga API i scss/_utilities.scss. A'oa'o pe fa'afefea ona fa'aoga mea aoga 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,
      ),
    ),