Lewati ke konten utama Lewati ke navigasi dokumen
in English

Melenturkan

Kelola tata letak, perataan, dan ukuran kolom kisi, navigasi, komponen, dan lainnya dengan cepat dengan rangkaian lengkap utilitas flexbox responsif. Untuk implementasi yang lebih kompleks, CSS khusus mungkin diperlukan.

Aktifkan perilaku fleksibel

Terapkan displayutilitas untuk membuat wadah flexbox dan mengubah elemen turunan langsung menjadi item fleksibel. Wadah dan item fleksibel dapat dimodifikasi lebih lanjut dengan properti fleksibel tambahan.

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

Variasi responsif juga ada untuk .d-flexdan .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

Arah

Atur arah item fleksibel dalam wadah fleksibel dengan utilitas arah. Dalam kebanyakan kasus, Anda dapat menghilangkan kelas horizontal di sini karena default browser adalah row. Namun, Anda mungkin mengalami situasi di mana Anda perlu menetapkan nilai ini secara eksplisit (seperti tata letak responsif).

Gunakan .flex-rowuntuk mengatur arah horizontal (default browser), atau .flex-row-reverseuntuk memulai arah horizontal dari sisi yang berlawanan.

Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 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>

Gunakan .flex-columnuntuk mengatur arah vertikal, atau .flex-column-reverseuntuk memulai arah vertikal dari sisi yang berlawanan.

Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 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>

Variasi responsif juga ada untuk 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

Membenarkan konten

Gunakan justify-contentutilitas pada wadah flexbox untuk mengubah perataan item fleksibel pada sumbu utama (sumbu x untuk memulai, sumbu y jika flex-direction: column). Pilih dari start(browser default), end, center, between, around, atau evenly.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<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>

Variasi responsif juga ada untuk 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

Sejajarkan item

Gunakan align-itemsutilitas pada wadah flexbox untuk mengubah perataan item fleksibel pada sumbu silang (sumbu y untuk memulai, sumbu x jika flex-direction: column). Pilih dari start, end, center, baseline, atau stretch(browser default).

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<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>

Variasi responsif juga ada untuk 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

Sejajarkan diri

Gunakan align-selfutilitas pada item flexbox untuk mengubah perataannya satu per satu pada sumbu silang (sumbu y untuk memulai, sumbu x jika flex-direction: column). Pilih dari opsi yang sama seperti align-items: start, end, center, baseline, atau stretch(browser default).

Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
<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>

Variasi responsif juga ada untuk 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

Mengisi

Gunakan .flex-fillkelas pada serangkaian elemen saudara untuk memaksanya menjadi lebar yang sama dengan kontennya (atau lebar yang sama jika kontennya tidak melampaui kotak batasnya) sambil mengambil semua ruang horizontal yang tersedia.

Item fleksibel dengan banyak konten
Barang fleksibel
Barang fleksibel
<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>

Variasi responsif juga ada untuk flex-fill.

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

Tumbuh dan menyusut

Gunakan .flex-grow-*utilitas untuk mengaktifkan kemampuan item fleksibel untuk tumbuh untuk mengisi ruang yang tersedia. Dalam contoh di bawah ini, .flex-grow-1elemen menggunakan semua ruang yang tersedia, sambil membiarkan dua item fleksibel lainnya menggunakan ruang yang diperlukan.

Barang fleksibel
Barang fleksibel
Item fleksibel ketiga
<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>

Gunakan .flex-shrink-*utilitas untuk mengaktifkan kemampuan item fleksibel untuk menyusut jika perlu. Dalam contoh di bawah, item fleksibel kedua dengan .flex-shrink-1dipaksa untuk membungkus isinya ke baris baru, "menyusut" untuk memberikan lebih banyak ruang untuk item fleksibel sebelumnya dengan .w-100.

Barang fleksibel
Barang fleksibel
<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>

Variasi responsif juga ada untuk flex-growdan 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

Margin otomatis

Flexbox dapat melakukan beberapa hal yang cukup mengagumkan saat Anda mencampur perataan fleksibel dengan margin otomatis. Ditampilkan di bawah ini adalah tiga contoh pengendalian item fleksibel melalui margin otomatis: default (tanpa margin otomatis), mendorong dua item ke kanan ( .me-auto), dan mendorong dua item ke kiri ( .ms-auto).

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<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>

Dengan align-item

Pindahkan satu item fleksibel secara vertikal ke atas atau bawah wadah dengan mencampur align-items, flex-direction: column, dan margin-top: autoatau margin-bottom: auto.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<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>

Membungkus

Ubah cara item fleksibel dibungkus dalam wadah fleksibel. Pilih dari tanpa pembungkus sama sekali (browser default) dengan .flex-nowrap, membungkus dengan .flex-wrap, atau membalikkan pembungkusan dengan .flex-wrap-reverse.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-nowrap">
  ...
</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-wrap">
  ...
</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Variasi responsif juga ada untuk 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

Memesan

Ubah urutan visual item fleksibel tertentu dengan beberapa orderutilitas. Kami hanya menyediakan opsi untuk membuat item pertama atau terakhir, serta reset untuk menggunakan urutan DOM. Karena ordermengambil nilai integer apa pun dari 0 hingga 5, tambahkan CSS khusus untuk nilai tambahan apa pun yang diperlukan.

Item fleksibel pertama
Item fleksibel kedua
Item fleksibel ketiga
<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>

Variasi responsif juga ada untuk 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

Selain itu ada juga kelas responsif .order-firstdan .order-lastyang mengubah orderelemen dengan menerapkan order: -1dan order: 6, masing-masing.

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

Sejajarkan konten

Gunakan align-contentutilitas pada wadah flexbox untuk menyelaraskan item fleksibel pada sumbu silang. Pilih dari start(browser default), end, center, between, around, atau stretch. Untuk mendemonstrasikan utilitas ini, kami telah menerapkan flex-wrap: wrapdan meningkatkan jumlah item fleksibel.

Perhatian! Properti ini tidak berpengaruh pada satu baris item fleksibel.

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

Variasi responsif juga ada untuk 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

Objek media

Ingin mereplikasi komponen objek media dari Bootstrap 4? Buat ulang dalam waktu singkat dengan beberapa utilitas fleksibel yang memungkinkan lebih banyak fleksibilitas dan penyesuaian daripada sebelumnya.

Placeholder Image
Ini adalah beberapa konten dari komponen media. Anda dapat mengganti ini dengan konten apa pun dan menyesuaikannya sesuai kebutuhan.
<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>

Dan katakan Anda ingin memusatkan konten secara vertikal di sebelah gambar:

Placeholder Image
Ini adalah beberapa konten dari komponen media. Anda dapat mengganti ini dengan konten apa pun dan menyesuaikannya sesuai kebutuhan.
<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>

Kelancangan

API Utilitas

Utilitas Flexbox dideklarasikan di API utilitas kami discss/_utilities.scss . Pelajari cara menggunakan API utilitas.

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