Salá koleka na makambo ya ntina Salta na navigation ya docs
in English

Ya pete

Bokamba noki layout, alignment, mpe taille ya ba colonnes ya grille, navigation, ba composants, mpe mingi mosusu na suite mobimba ya ba utilitaires flexbox oyo ezo répondre. Mpo na bosaleli ya mindondo mingi, CSS ya momesano ekoki kozala na ntina.

Activer ba comportements ya flex

Salelá displayba utilitaires mpo na kosala conteneur ya flexbox mpe kobongola ba éléments ya bana direct na biloko ya flex. Ba récipients ya flex na biloko ezali na makoki ya ko modifier lisusu na ba propriétés ya flex ya kobakisa.

Nazali récipient ya flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Nazali récipient ya flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Ba variations ya réponse ezali pe pona .d-flexpe .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

Ngambo

Botia direction ya biloko ya flex na récipient ya flex na ba utilitaires ya direction. Na makambo mingi okoki ko omiter classe horizontale awa lokola défaut ya navigateur ezali row. Kasi, okoki kokutana na makambo oyo osengelaki kotya polele motuya oyo (lokola ba layouts oyo ezoyanola).

Salelá .flex-rowmpo na kotya ngámbo oyo ezali na ngámbo ya nse (ya navigateur na ndenge ya liboso), to .flex-row-reversempo na kobanda ngámbo ya ngámbo mosusu.

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

Salelá .flex-columnmpo na kotya ngámbo ya semba, to .flex-column-reversempo na kobanda ngámbo ya ngámbo mosusu.

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

Ba variations ya réponse ezali pe pona 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

Kolongisa makambo oyo ezali na kati

Salelá justify-contentba utilitaires na ba récipients ya flexbox mpo na kobongola alignment ya biloko ya flex na axe principal (axe x mpo na kobanda, axe y soki flex-direction: column). Pona kati na start(navigateur ya liboso), end, center, between, around, to evenly.

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

Ba variations ya réponse ezali pe pona 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

Bongisá biloko na molɔngɔ

Salelá align-itemsba utilitaires na ba récipients ya flexbox mpo na kobongola alignment ya biloko ya flex na axe croisé (axe y mpo na kobanda, axe x soki flex-direction: column). Pona kati na start, end, center, baseline, to stretch(navigateur ya liboso).

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

Ba variations ya réponse ezali pe pona 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

Align yo moko

Salelá align-selfba utilitaires na biloko ya flexbox mpo na kobongola mokomoko alignment na yango na axe croisé (axe y mpo na kobanda, axe x soki flex-direction: column). Pona kati na ba options ndenge moko na align-items: start, end, center, baseline, to stretch(navigateur par défaut).

Flex eloko
Eloko ya flex oyo ezali na boyokani
Flex eloko
Flex eloko
Eloko ya flex oyo ezali na boyokani
Flex eloko
Flex eloko
Eloko ya flex oyo ezali na boyokani
Flex eloko
Flex eloko
Eloko ya flex oyo ezali na boyokani
Flex eloko
Flex eloko
Eloko ya flex oyo ezali na boyokani
Flex eloko
<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>

Ba variations ya réponse ezali pe pona 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

Kotondisa

Salelá .flex-fillkelasi na molɔngɔ́ ya biloko ya bandeko mpo na kotinda bango na makasi na bonene oyo ekokani na makambo na bango (to bonene oyo ekokani soki makambo na bango eleki te bakɛsi-ba-border na bango) ntango ozali kozwa esika nyonso oyo ezali na nse ya mabele.

Flex eloko na ebele ya contenus
Flex eloko
Flex eloko
<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>

Ba variations ya réponse ezali pe pona flex-fill.

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

Kokola mpe kokita

Salelá .flex-grow-*ba utilitaires mpo na kobongola makoki ya eloko moko ya flex mpo na kokola mpo na kotondisa esika oyo ezali. Na ndakisa oyo ezali awa na nse, ba .flex-grow-1éléments esalela espace nionso oyo ekoki, tout en permettant ba éléments flex mibale oyo etikali espace na bango oyo esengeli.

Flex eloko
Flex eloko
Eloko ya misato ya flex
<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>

Salelá .flex-shrink-*ba utilitaires mpo na kobongola makoki ya eloko moko ya flex ya kokita soki esengeli. Na ndakisa oyo ezali awa na nse, eloko ya mibale ya kobalusa na etindami na .flex-shrink-1makasi mpo na kozinga biloko na yango na molɔngɔ ya sika, “kokita” mpo na kopesa esika mingi mpo na eloko oyo ebaluki liboso na .w-100.

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

Ba variations ya réponse ezali pe pona flex-growpe 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

Ba marges ya automatique

Flexbox ekoki kosala mwa makambo kitoko ya kokamwa ntango ozali kosangisa ba alignments ya flex na ba marges ya auto. Emonisami awa na nse bandakisa misato ya kotambwisa biloko oyo ezali kolɛmba na nzela ya ba marges auto: par défaut (marge automatique ezali te), kotindika biloko mibale na lobɔkɔ ya mobali ( .me-auto), mpe kotindika biloko mibale na lobɔkɔ ya mwasi ( .ms-auto).

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

Na align-biloko

Bokende na verticale eloko moko ya flex na likolo to na nse ya récipient na kosangisaka align-items, flex-direction: column, mpe margin-top: autoto margin-bottom: auto.

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

Kokanga

Bobongola ndenge oyo biloko ya flex ezingaka na kati ya eloko oyo batyaka na flex. Pona kati na enveloppement ata moke te (ya navigateur par défaut) na .flex-nowrap, enveloppe na .flex-wrap, to enveloppe inverse na .flex-wrap-reverse.

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

Ba variations ya réponse ezali pe pona 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

Etinda

Bobongola ordre visuel ya biloko ya flex spécifique na mwa ba orderutilitaires. Tozali kopesa kaka ba options ya kosala eloko moko liboso to ya suka, mpe lisusu réinitialisation mpo na kosalela commande ya DOM. Lokola orderezuaka valeur nionso ya nombre entier kobanda 0 ti na 5, bakisa CSS personnalisé pona ba valeurs nionso ya kobakisa oyo esengeli.

Eloko ya liboso ya flex
Eloko ya mibale ya flex
Eloko ya misato ya flex
<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>

Ba variations ya réponse ezali pe pona 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

En plus ezali pe na responsive .order-firstna ba .order-lastclasses oyo e changer ya orderya élément moko en appliquant order: -1na order: 6, respectivement.

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

Bobongisa makambo oyo ezali na kati

Salelá align-contentba utilitaires na ba récipients ya flexbox mpo na ko aligner biloko ya flex esika moko na axe croisé. Pona kati na start(navigateur ya liboso), end, center, between, around, to stretch. Mpo na kolakisa ba utilitaires oyo, tosili kosala makasi flex-wrap: wrapmpe tobakisaki motango ya biloko ya flex.

Mitó likoló! Propriété oyo ezali na effet moko te na ba lignes unique ya biloko ya flex.

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

Ba variations ya réponse ezali pe pona 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

Objet ya media

Ozali koluka kozongela composant ya objet ya media uta na Bootstrap 4? Bosala yango lisusu na ntango moke na mwa ba utilitaires flex oyo epesaka nzela na flexibilité mpe personnalisation mingi koleka liboso.

Placeholder Image
Oyo ezali mwa makambo oyo euti na eteni moko ya media. Okoki kozongisa yango na esika na yango na makambo nyonso oyo ezali na kati mpe kobongisa yango soki esengeli.
<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>

Mpe loba olingi ko centrer verticalement contenus pembeni ya image:

Placeholder Image
Oyo ezali mwa makambo oyo euti na eteni moko ya media. Okoki kozongisa yango na esika na yango na makambo nyonso oyo ezali na kati mpe kobongisa yango soki esengeli.
<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 oyo azali

API ya ba utilitaires

Ba utilitaires ya Flexbox esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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