Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check

Bi komek tam a karûbarên flexbox-ê yên bersivdar re zû birêkûpêk, rêzkirin, û mezinbûna stûnên torê, navîgasyon, pêkhate û hêj bêtir birêve bibin. Ji bo pêkanînên tevlihevtir, dibe ku CSS-ya xwerû hewce be.

Tevgerên nerm çalak bikin

Karûbaran bicîh bînin da ku konteynirek flexbox displaybiafirînin û hêmanên zarokan ên rasterast veguherînin tiştên nerm . Konteynir û hêmanên Flex dikarin bi taybetmendiyên pêvek ên pêvek bêtir werin guheztin.

Ez konteynirek flexbox im!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ez konteynerek flexbox a hundurîn im!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Guhertoyên bersivdar jî ji bo .d-flexû .d-inline-flexhene.

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

Ber

Arasteya hêmanên flex bi karûbarên rêwerzê ve di konteynirek nerm de bicîh bikin. Di pir rewşan de hûn dikarin li vir çîna horizontî derxin ji ber ku geroka xwerû ye row. Lêbelê, hûn dikarin bi rewşên ku hûn hewce ne ku hûn vê nirxê bi eşkere destnîşan bikin (mîna sêwiranên bersivdar) re rû bi rû bimînin.

Ji .flex-rowbo danîna rêgezek horizontî (pêşniyara gerokê) bikar bînin, an jî .flex-row-reverseji hêla berevajî ve rêça horizontal dest pê bikin.

Xala Flex 1
Xala Flex 2
Xala Flex 3
Xala Flex 1
Xala Flex 2
Xala Flex 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Ji .flex-columnbo danîna rêgezek vertîkal bikar bînin, an jî .flex-column-reverseji hêla dijber ve rêça vertîkal dest pê bikin.

Xala Flex 1
Xala Flex 2
Xala Flex 3
Xala Flex 1
Xala Flex 2
Xala Flex 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Guhertoyên bersivdar jî ji bo hene 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

Naveroka rastdar bikin

justify-contentKarûbarên li ser konteynerên flexbox bikar bînin da ku lihevhatina hêmanên flex ên li ser eksê sereke biguhezînin (xebata x-a ku dest pê dike, y-tevger heke flex-direction: column). Hilbijêre ji start(geroka xwerû), end, center, between, around, an evenly.

Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê 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>

Guhertoyên bersivdar jî ji bo hene 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

Align tomar

align-itemsKarûbarên li ser konteynerên flexbox bikar bînin da ku lihevhatina hêmanên flex ên li ser xaçê biguhezînin (texna y ya ku dest pê dike, x-teşe heke flex-direction: column). Hilbijêre ji start, end, center, baseline, an stretch(geroka xwerû).

Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê 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>

Guhertoyên bersivdar jî ji bo hene 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

Xwe li hev bikin

Karûbarên li ser hêmanên flexbox bikar bînin align-selfda ku bi rengek kesane lihevhatina wan li ser xaçê biguherînin (texna y ya ku dest pê dike, x-teşe heke flex-direction: column). Ji heman vebijarkên wekî align-items: start, end, center, baseline, an stretch(geroka gerokê) hilbijêrin.

Babetê Flex
Tiştek flex a lihevhatî
Babetê Flex
Babetê Flex
Tiştek flex a lihevhatî
Babetê Flex
Babetê Flex
Tiştek flex a lihevhatî
Babetê Flex
Babetê Flex
Tiştek flex a lihevhatî
Babetê Flex
Babetê Flex
Tiştek flex a lihevhatî
Babetê 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>

Guhertoyên bersivdar jî ji bo hene 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

Tijîkirin

Dersê li ser rêzek hêmanên xwişk-bira bikar bînin .flex-fillda ku wan bi darê zorê bidin ber firehiyên ku bi naveroka wan re wekhev in (an firehiyên wekhev heke naveroka wan ji qutiyên sînorê wan derbas nebe) dema ku hemî cîhê horizontî yê berdest digire.

Tiştek Flex bi gelek naverok
Babetê Flex
Babetê Flex
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Guhertoyên bersivdar jî ji bo hene flex-fill.

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

Mezin dibin û biçûk dibin

Karûbaran bikar bînin .flex-grow-*da ku kapasîteya hêmanek nerm a mezinbûnê biguhezînin da ku cîhê berdest tijî bikin. Di mînaka jêrîn de, .flex-grow-1hêman hemî cîhê berdest ên ku dikarin bikar tînin, di heman demê de rê dide du tiştên mayî cîhê xweya pêwîst.

Babetê Flex
Babetê Flex
Tişta sêyem flex
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Karûbaran bikar bînin .flex-shrink-*da ku heke hewce bike kapasîteya hilberek nermî ya piçûktir bike. Di mînaka li jêr de, madeya flex a duyemîn bi .flex-shrink-1neçarî ye ku naveroka xwe bi xêzek nû ve girêbide, "biçûk bibe" da ku cîhê zêde ji bo tiştê berê yê flex bi .w-100.

Babetê Flex
Babetê Flex
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Guhertoyên bersivdar jî ji bo flex-growû flex-shrinkhene.

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

Margin Auto

Flexbox dikare hin tiştên pir bi heybet bike gava ku hûn hevrêziyên nerm bi marjînalên otomatîkî re tevlihev bikin. Li jêr sê mînakên kontrolkirina hêmanên nerm bi rêgezên otomatîkî ve têne xuyang kirin: xwerû (bê marjîna otomatîk), xistina du tiştan ber bi rastê ( .me-auto), û xistina du tiştan ber bi çepê ( .ms-auto).

Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Bi align-tişt

align-itemsBi tevlêkirina , flex-direction: column, û margin-top: autoan , yek hêmanek flex ber bi jor an binê konteynirekê ve biherikînin margin-bottom: auto.

Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
Babetê Flex
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Pêçan

Biguhezînin ka tiştên nerm çawa di konteynirek nerm de dipêçin. Hilbijêre ji qet pêçandî ne (wek geroka gerokê) bi .flex-nowrap, pêça bi .flex-wrap, an pêça berevajî bi .flex-wrap-reverse.

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

Guhertoyên bersivdar jî ji bo hene 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

Emir

Rêza dîtbarî ya hêmanên nerm ên taybetî bi çend amûran orderbiguhezînin. Em tenê vebijarkan ji bo çêkirina tiştek yekem an paşîn, û her weha ji nû ve vebijarkek ji bo karanîna fermana DOM peyda dikin. Ji ber orderku ji 0 heta 5 nirxek yekjimar digire, ji bo her nirxek din hewce bike CSS-ya xwerû lê zêde bike.

Yekem xala flex
Babetê flex duyemîn
Tişta sêyem flex
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Guhertoyên bersivdar jî ji bo hene 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

Wekî din, di heman demê de bersivdar .order-firstû .order-lastçînên ku bi rêzdarî bi sepandin û , orderelementek diguhezînin jî hene.order: -1order: 6

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

Naveroka hev bikin

align-contentKarûbarên li ser konteynirên flexbox bikar bînin da ku tiştên flex bi hev re li ser axa xaçê rêz bikin. Hilbijêre ji start(geroka xwerû), end, center, between, around, an stretch. flex-wrap: wrapJi bo ku van karûbaran nîşan bidin, me hejmara hêmanên nerm ferz kiriye û zêde kiriye.

Serê xwe! Vê taybetmendiyê ti bandorek li ser rêzikên yekane yên hêmanên nerm nake.

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

Guhertoyên bersivdar jî ji bo hene align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Objekt Media

Digerin ku hêmana hêmana medyayê ji Bootstrap 4 dubare bikin? Wê di demek zû de bi çend karûbarên nermî yên ku ji berê hê bêtir nermbûn û xwerûkirinê dihêlin ji nû ve biafirînin.

Placeholder Image
Ev hin naverok ji pêkhateyek medyayê ye. Hûn dikarin vê bi her naverokê veguherînin û li gorî hewcedariyê wê sererast bikin.
html
<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>

Û bêje ku hûn dixwazin naverokê li kêleka wêneyê naverok bikin:

Placeholder Image
Ev hin naverok ji pêkhateyek medyayê ye. Hûn dikarin vê bi her naverokê veguherînin û li gorî hewcedariyê wê sererast bikin.
html
<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

Karûbarên Flexbox di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

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