Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu

Lawula ngokukhawuleza uyilo, ulungelelwaniso, kunye nobungakanani bekholamu zegridi, ukukhangela, izinto, kunye nokunye okuninzi ngesuti epheleleyo yezixhobo eziphendulayo zebhokisi ye-flexibox. Ukuphunyezwa okuntsonkothileyo ngakumbi, iCSS yesiko ingafuneka.

Nika amandla ukuziphatha okuguquguqukayo

Faka displayizinto eziluncedo ukwenza isikhongozeli se-flexbox kwaye uguqule izinto ezithe ngqo zabantwana zibe zizinto eziguqukayo. Izikhongozeli zeFlex kunye nezinto ziyakwazi ukuguqulwa ngakumbi ngeempawu ezongezelelweyo ze-flex.

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

Iiyantlukwano eziphendulayo zikwakhona .d-flexkwaye .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

Isalathiso

Seta icala lezinto eziguquguqukayo kwisikhongozeli esine-flex esineendlela eziluncedo. Kwiimeko ezininzi ungashiya udidi oluthe tye apha njengoko umkhangeli zincwadi ongagqibekanga unjalo row. Nangona kunjalo, ungadibana neemeko apho ubufuna ukuseta ngokuthe gca eli xabiso (njengoyilo oluphendulayo).

Sebenzisa .flex-rowukuseta isalathiso esithe tye (isikhangeli esingagqibekanga), okanye .flex-row-reverseukuqalisa ulwalathiso oluthe tye ukusuka kwelinye icala.

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

Sebenzisa .flex-columnukuseta icala elithe nkqo, okanye .flex-column-reverseukuqalisa icala elithe nkqo ukusuka kwelinye icala.

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

Iiyantlukwano eziphendulayo zikwakhona 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

thethelela umxholo

Sebenzisa justify-contentizinto eziluncedo kwizikhongozeli zeflexbox ukutshintsha ulungelelwaniso lwezinto eziguqukayo kwi-axis engundoqo (i-x-axis yokuqala, i-y-axis ukuba flex-direction: column). Khetha kwi start(ukungagqibeki kwesikhangeli), end, center, between, around, okanye evenly.

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

Iiyantlukwano eziphendulayo zikwakhona 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

Lungelelanisa izinto

Sebenzisa align-itemsizinto eziluncedo kwizikhongozeli zeflexbox ukutshintsha ulungelelwaniso lwezinto eziguqukayo kwi-axis enqamlezileyo (umgca ongu-y ukuqalisa, u-x-axis ukuba flex-direction: column). Khetha kwi start, end, center, baseline, okanye stretch(ukungagqibeki kwesikhangeli).

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

Iiyantlukwano eziphendulayo zikwakhona 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

Zilungelelanise

Sebenzisa align-selfizinto eziluncedo kwizinto ze-flexbox ukuzitshintshela ulungelelwaniso lwazo kwi-axis enqamlezileyo (umgca ongu-y ukuqalisa, umgca ongu-x ukuba flex-direction: column). Khetha kwiinketho ezifanayo njenge align-items: start, end, center, baseline, okanye stretch(ukungagqibeki kwesikhangeli).

Flex into
Into eguquguqukayo elungelelanisiweyo
Flex into
Flex into
Into eguquguqukayo elungelelanisiweyo
Flex into
Flex into
Into eguquguqukayo elungelelanisiweyo
Flex into
Flex into
Into eguquguqukayo elungelelanisiweyo
Flex into
Flex into
Into eguquguqukayo elungelelanisiweyo
Flex into
<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>

Iiyantlukwano eziphendulayo zikwakhona 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

Gcwalisa

Sebenzisa .flex-filliklasi kuluhlu lwezinto ezizalanayo ukuzinyanzela kububanzi obulingana nomxholo wazo (okanye ububanzi obulinganayo ukuba umxholo wazo awugqithisi iibhokisi zabo zomda) ngelixa uthatha yonke indawo ethe tye ekhoyo.

Into yeFlex enomxholo omninzi
Flex into
Flex into
<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>

Iiyantlukwano eziphendulayo zikwakhona flex-fill.

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

Khula kwaye ucuthe

Sebenzisa .flex-grow-*izinto eziluncedo ukuguqula ukukwazi kwento eguqukayo ukukhula ukuzalisa indawo ekhoyo. Kulo mzekelo ungezantsi, .flex-grow-1izinto zisebenzisa yonke indawo ekhoyo, ngelixa uvumela izinto ezimbini eziseleyo zibe yindawo yazo eyimfuneko.

Flex into
Flex into
Into yesithathu eguqukayo
<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>

Sebenzisa .flex-shrink-*izinto eziluncedo ukuguqula isakhono sento eguqukayo ukuba icuthe ukuba kuyimfuneko. Kulo mzekelo ungezantsi, into yesibini eguquguqukayo kunye .flex-shrink-1nokunyanzeliswa ukuba idibanise imixholo yayo kumgca omtsha, "ukunciphisa" ukuvumela indawo engaphezulu yento yangaphambili ye-flex .w-100.

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

Iiyantlukwano eziphendulayo zikwakhona flex-growkwaye 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

Imida ezenzekelayo

I-Flexbox inokwenza izinto ezintle kakhulu xa udibanisa ulungelelwaniso oluguquguqukayo kunye nemida yeauto. Iboniswe ngezantsi yimizekelo emithathu yokulawula izinto eziguqukayo kusetyenziswa imida ye-auto: okungagqibekanga (akukho mda we-auto), ukutyhala izinto ezimbini ngasekunene ( .me-auto), nokutyhala izinto ezimbini ekhohlo ( .ms-auto).

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

Kunye nokulungelelanisa-izinto

Ngokuthe nkqo susa into enye ukuya phezulu okanye ezantsi kwesikhongozeli ngokuxuba align-items, flex-direction: columnkunye margin-top: autookanye margin-bottom: auto.

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

Ukusonga

Guqula indlela izinto eziguquguqukayo ezizisonga ngayo kwisikhongozeli se-flex. Khetha ukusuka ekungasongelweni konke konke (isikhangeli esingagqibekanga) nge .flex-nowrap, ukusonga nge .flex-wrap, okanye umva ukusonga nge .flex-wrap-reverse.

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

Iiyantlukwano eziphendulayo zikwakhona 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

Umyalelo

Guqula ulandelelwano olubonakalayo lwezinto ezithile eziguquguqukayo kunye nesandla sezinto ordereziluncedo. Sinikezela kuphela iinketho zokwenza into yokuqala okanye yokugqibela, kunye nokusetha kwakhona ukusebenzisa iodolo yeDOM. Njengoko orderkuthatha naliphi na inani elipheleleyo ukusuka ku-0 ukuya ku-5, yongeza i-CSS yesiko kuwo nawaphi na amaxabiso afunekayo.

Into yokuqala eguqukayo
Into yesibini ye-flex
Into yesithathu eguqukayo
<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>

Iiyantlukwano eziphendulayo zikwakhona 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

Ukongeza kukwakho neeklasi eziphendulayo .order-firstkunye .order-lastneeklasi ezitshintsha orderinto ngokufaka isicelo order: -1kwaye order: 6, ngokulandelelanayo.

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

Lungelelanisa umxholo

Sebenzisa align-contentizinto eziluncedo kwizikhongozeli ze-flexbox ukulungelelanisa izinto eziguqukayo kunye kwi-axis enqamlezileyo. Khetha kwi start(ukungagqibeki kwesikhangeli), end, center, between, around, okanye stretch. Ukubonisa ezi zinto ziluncedo, sinyanzelise flex-wrap: wrapkwaye sanyusa inani lezinto eziguqukayo.

Iintloko phezulu! Le propati ayinayo impembelelo kwimiqolo enye yezinto eziguquguqukayo.

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

Iiyantlukwano eziphendulayo zikwakhona 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

Into yemidiya

Ujonge ukuphindaphinda into yemidiya kwiBootstrap 4? Yenze kwakhona ngethutyana nje ngezinto ezimbalwa ezivumela ukuba ube bhetyebhetye ngakumbi kunye nokwenza ngokwezifiso kunangaphambili.

Placeholder Image
Lo ngomnye umxholo ovela kwicandelo leendaba. Ungabuyisela oku kunye nawo nawuphi na umxholo kwaye ulungelelanise njengoko kufuneka.
<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>

Kwaye uthi ufuna ukubeka embindini ngokuthe nkqo umxholo osecaleni komfanekiso:

Placeholder Image
Lo ngomnye umxholo ovela kwicandelo leendaba. Ungabuyisela oku kunye nawo nawuphi na umxholo kwaye ulungelelanise njengoko kufuneka.
<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

Izinto eziluncedo zeFlex zibhengezwe kwizinto eziluncedo zethu kwi-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo 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,
      ),
    ),