Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check

Ceev ceev tswj qhov kev teeb tsa, kev sib dhos, thiab qhov loj ntawm kab kab ke, kev taw qhia, cov khoom siv, thiab ntau ntxiv nrog rau tag nrho cov suite ntawm cov khoom siv flexbox teb. Rau kev siv ntau dua, kev cai CSS tej zaum yuav tsim nyog.

Pab kom flex cwj pwm

Siv displaycov khoom siv hluav taws xob los tsim lub thawv flexbox thiab hloov cov ntsiab lus ntawm cov menyuam yaus rau hauv cov khoom flex. Flex ntim thiab cov khoom tuaj yeem hloov kho ntxiv nrog cov khoom flex ntxiv.

Kuv yog flexbox thawv!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Kuv yog inline flexbox thawv!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Teb variations kuj muaj rau .d-flexthiab .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

Kev taw qhia

Teem cov kev taw qhia ntawm cov khoom flex nyob rau hauv ib lub thawv flex nrog cov khoom siv kev taw qhia. Feem ntau koj tuaj yeem tshem tawm cov chav kawm kab rov tav ntawm no raws li qhov browser default yog row. Txawm li cas los xij, koj tuaj yeem ntsib cov xwm txheej uas koj xav tau los teeb tsa tus nqi no (xws li cov lus teb layouts).

Siv .flex-rowlos teeb tsa kab rov tav kev taw qhia (qhov browser default), lossis .flex-row-reversepib txoj kab rov tav los ntawm sab nraud.

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

Siv .flex-columnlos teeb tsa txoj kab ntsug, lossis .flex-column-reversepib txoj kab ntsug ntawm sab nraud.

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

Teb variations kuj muaj rau 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

Txhim kho cov ntsiab lus

Siv justify-contentcov khoom siv hluav taws xob ntawm flexbox ntim los hloov cov kev sib tw ntawm cov khoom flex ntawm lub ntsiab axis (x-axis pib, y-axis yog flex-direction: column). Xaiv los ntawm start(browser default), end, center, between, around, lossis evenly.

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

Teb variations kuj muaj rau 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

Kho cov khoom

Siv align-itemscov khoom siv hluav taws xob ntawm cov thawv flexbox los hloov cov kev sib tw ntawm cov khoom flex ntawm tus ntoo khaub lig axis (y-axis pib, x-axis yog flex-direction: column). Xaiv los ntawm start, end, center, baseline, lossis stretch(browser default).

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

Teb variations kuj muaj rau 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

Kho tus kheej

Siv align-selfcov khoom siv hluav taws xob ntawm cov khoom flexbox los hloov lawv cov kev sib tw ntawm tus ntoo khaub lig axis (y-axis pib, x-axis yog flex-direction: column). Xaiv los ntawm tib txoj kev xaiv xws li align-items: start, end, , center, baseline, lossis stretch(browser default).

Flex khoom
Aligned flex khoom
Flex khoom
Flex khoom
Aligned flex khoom
Flex khoom
Flex khoom
Aligned flex khoom
Flex khoom
Flex khoom
Aligned flex khoom
Flex khoom
Flex khoom
Aligned flex khoom
Flex khoom
<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>

Teb variations kuj muaj rau 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

Sau

Siv cov .flex-fillchav kawm ntawm cov nus muag cov ntsiab lus kom yuam lawv mus rau hauv qhov dav sib npaug ntawm lawv cov ntsiab lus (lossis qhov dav sib npaug yog tias lawv cov ntsiab lus tsis dhau lawv cov thawv ciam teb) thaum noj tag nrho cov chaw kab rov tav.

Flex yam khoom nrog ntau cov ntsiab lus
Flex khoom
Flex khoom
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>

Teb variations kuj muaj rau flex-fill.

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

Loj hlob thiab ntsws

Siv .flex-grow-*cov khoom siv hluav taws xob los hloov cov khoom flex lub peev xwm loj hlob los sau qhov chaw muaj. Hauv qhov piv txwv hauv qab no, cov .flex-grow-1ntsiab lus siv txhua qhov chaw uas nws tuaj yeem ua tau, thaum tso cai rau ob qho khoom flex ntxiv lawv qhov chaw tsim nyog.

Flex khoom
Flex khoom
Yam thib peb 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>

Siv .flex-shrink-*cov khoom siv hluav taws xob los hloov cov khoom flex lub peev xwm kom ntsws yog tias tsim nyog. Hauv qhov piv txwv hauv qab no, qhov thib ob flex khoom nrog .flex-shrink-1raug yuam kom qhwv nws cov ntsiab lus rau ib kab tshiab, "shrinking" kom tso cai rau ntau qhov chaw rau cov khoom flex yav dhau los nrog .w-100.

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

Teb variations kuj muaj rau flex-growthiab 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

Nws pib margins

Flexbox tuaj yeem ua qee yam zoo nkauj heev thaum koj sib xyaw flex kev sib raug zoo nrog cov npoo pib. Hauv qab no yog peb qhov piv txwv ntawm kev tswj cov khoom flex ntawm nws pib margins: lub neej ntawd (tsis muaj qhov pib pib), thawb ob yam khoom mus rau sab xis ( .me-auto), thiab thawb ob yam khoom mus rau sab laug ( .ms-auto).

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

Nrog cov khoom sib dhos

Vertically txav ib yam khoom flex mus rau saum lossis hauv qab ntawm lub thawv los ntawm kev sib xyaw align-items, flex-direction: column, thiab margin-top: autolossis margin-bottom: auto.

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

Qhwv

Hloov cov khoom flex li cas qhwv hauv lub thawv flex. Xaiv los ntawm tsis muaj wrapping txhua (qhov browser default) nrog .flex-nowrap, wrapping nrog .flex-wrap, lossis thim rov qab wrapping nrog .flex-wrap-reverse.

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

Teb variations kuj muaj rau 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

Kev txiav txim

Hloov qhov pom kev txiav txim ntawm cov khoom flex tshwj xeeb nrog ib txhais tes ntawm ordercov khoom siv. Peb tsuas yog muab cov kev xaiv los ua ib yam khoom ua ntej lossis zaum kawg, nrog rau kev rov pib siv DOM xaj. Raws li orderyuav siv tus nqi ntawm tus lej ntawm 0 txog 5, ntxiv kev cai CSS rau ib qho txiaj ntsig ntxiv uas xav tau.

Thawj yam khoom flex
Qhov thib ob flex khoom
Yam thib peb 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>

Teb variations kuj muaj rau 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

Tsis tas li ntawd kuj tseem muaj cov lus teb .order-firstthiab .order-lastcov chav kawm uas hloov cov orderntsiab lus los ntawm kev thov order: -1thiab order: 6, feem.

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

Hloov cov ntsiab lus

Siv align-contentcov khoom siv hluav taws xob ntawm cov thawv flexbox txhawm rau kho cov khoom flex ua ke ntawm tus ntoo khaub lig. Xaiv los ntawm start(browser default), end, center, between, around, lossis stretch. Txhawm rau ua kom pom cov khoom siv hluav taws xob no, peb tau tswj hwm flex-wrap: wrapthiab nce tus naj npawb ntawm cov khoom flex.

Tau taub hau! Cov cuab yeej no tsis cuam tshuam rau ib kab ntawm cov khoom flex.

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

Teb variations kuj muaj rau 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

Media khoom

Nrhiav kom rov ua dua cov khoom siv xov xwm los ntawm Bootstrap 4? Rov tsim nws tsis muaj sij hawm nrog ob peb flex utilities uas tso cai rau txawm ntau yooj thiab customization dua ua ntej.

Placeholder Image
Nov yog qee cov ntsiab lus los ntawm kev tshaj tawm xov xwm. Koj tuaj yeem hloov qhov no nrog txhua cov ntsiab lus thiab kho nws raws li xav tau.
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>

Thiab hais tias koj xav vertically nruab nrab cov ntsiab lus ntawm ib sab ntawm daim duab:

Placeholder Image
Nov yog qee cov ntsiab lus los ntawm kev tshaj tawm xov xwm. Koj tuaj yeem hloov qhov no nrog txhua cov ntsiab lus thiab kho nws raws li xav tau.
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

Flexbox cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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