Ana içeriğe geç Dokümanlar navigasyonuna atla

Tam bir duyarlı flexbox yardımcı programı paketi ile ızgara sütunlarının, navigasyonun, bileşenlerin ve daha fazlasının yerleşimini, hizalamasını ve boyutlandırılmasını hızla yönetin. Daha karmaşık uygulamalar için özel CSS gerekli olabilir.

Esnek davranışları etkinleştir

displayBir esnek kutu kabı oluşturmak ve doğrudan alt öğeleri esnek öğelere dönüştürmek için yardımcı programları uygulayın . Esnek kaplar ve öğeler, ek esnek özelliklerle daha fazla değiştirilebilir.

Ben bir esnek kutu kabıyım!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ben bir satır içi esnek kutu kabıyım!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Duyarlı varyasyonlar da ve için .d-flexmevcuttur .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

Yön

Yön yardımcı programlarıyla esnek bir kapta esnek öğelerin yönünü ayarlayın. Çoğu durumda, tarayıcı varsayılanı olduğu için yatay sınıfı burada atlayabilirsiniz row. Ancak, bu değeri açıkça ayarlamanız gereken durumlarla (duyarlı düzenler gibi) karşılaşabilirsiniz.

.flex-rowYatay bir yön (tarayıcı varsayılanı) ayarlamak veya .flex-row-reverseyatay yönü karşı taraftan başlatmak için kullanın .

Esnek öğe 1
Esnek öğe 2
Esnek öğe 3
Esnek öğe 1
Esnek öğe 2
Esnek öğe 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>

.flex-columnDikey yönü ayarlamak veya .flex-column-reversedikey yönü karşı taraftan başlatmak için kullanın .

Esnek öğe 1
Esnek öğe 2
Esnek öğe 3
Esnek öğe 1
Esnek öğe 2
Esnek öğe 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>

için duyarlı varyasyonlar da mevcuttur 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

İçeriği doğrula

justify-contentAna eksendeki esnek öğelerin hizalamasını değiştirmek için esnek kutu kaplarındaki yardımcı programları kullanın (başlangıç ​​için x ekseni, ise y ekseni flex-direction: column). start(tarayıcı varsayılanı), end, center, between, aroundveya arasından seçim yapın evenly.

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<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>

için duyarlı varyasyonlar da mevcuttur 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

Öğeleri hizala

align-itemsÇapraz eksendeki esnek öğelerin hizalamasını değiştirmek için esnek kutu kaplarındaki yardımcı programları kullanın (y ekseni başlatılacak, x ekseni ise flex-direction: column). start, end, center, baselineveya stretch(tarayıcı varsayılanı) arasından seçim yapın .

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<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>

için duyarlı varyasyonlar da mevcuttur 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

kendini hizala

align-selfÇapraz eksendeki hizalamalarını ayrı ayrı değiştirmek için flexbox öğelerindeki yardımcı programları kullanın (y ekseni başlangıç ​​için, x ekseni ise flex-direction: column). align-items: start, end, center, baseline, veya stretch(tarayıcı varsayılanı) ile aynı seçenekler arasından seçim yapın .

esnek öğe
Hizalanmış esnek öğe
esnek öğe
esnek öğe
Hizalanmış esnek öğe
esnek öğe
esnek öğe
Hizalanmış esnek öğe
esnek öğe
esnek öğe
Hizalanmış esnek öğe
esnek öğe
esnek öğe
Hizalanmış esnek öğe
esnek öğe
<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>

için duyarlı varyasyonlar da mevcuttur 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

Doldurmak

.flex-fillMevcut tüm yatay alanı kaplarken, içeriklerine eşit genişliklere (veya içerikleri sınır kutularını geçmiyorsa eşit genişliklere) zorlamak için bir dizi kardeş öğe üzerinde sınıfı kullanın .

Çok fazla içeriğe sahip esnek öğe
esnek öğe
esnek öğe
<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>

için duyarlı varyasyonlar da mevcuttur flex-fill.

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

Büyü ve küçül

.flex-grow-*Esnek bir öğenin mevcut alanı dolduracak şekilde büyüme yeteneğini değiştirmek için yardımcı programları kullanın . Aşağıdaki örnekte, .flex-grow-1öğeler, kalan iki esnek öğeye gerekli alanlarını sağlarken, tüm kullanılabilir alanı kullanır.

esnek öğe
esnek öğe
Üçüncü esnek öğe
<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>

.flex-shrink-*Esnek bir öğenin gerektiğinde küçültme özelliğini değiştirmek için yardımcı programları kullanın . Aşağıdaki örnekte, ile ikinci esnek öğe .flex-shrink-1, içeriğini yeni bir satıra sarmaya zorlanır, önceki esnek öğe için daha fazla alan sağlamak için "küçülür" .w-100.

esnek öğe
esnek öğe
<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>

Duyarlı varyasyonlar da ve için flex-growmevcuttur 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

Otomatik kenar boşlukları

Flexbox, esnek hizalamaları otomatik kenar boşluklarıyla karıştırdığınızda oldukça harika şeyler yapabilir. Aşağıda, otomatik kenar boşlukları aracılığıyla esnek öğeleri kontrol etmenin üç örneği gösterilmektedir: varsayılan (otomatik kenar boşluğu yok), iki öğeyi sağa .me-autoitme ( ) ve iki öğeyi sola itme ( .ms-auto).

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<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>

hizalama öğeleri ile

align-itemsBir esnek öğeyi , flex-direction: columnve margin-top: autoveya karıştırarak bir kabın üstüne veya altına dikey olarak taşıyın margin-bottom: auto.

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<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>

Paketlemek

Esnek öğelerin esnek bir kapta nasıl sarılacağını değiştirin. ile hiç kaydırma (tarayıcı varsayılanı) .flex-nowrap, ile kaydırma .flex-wrapveya ile ters kaydırma arasından seçim yapın .flex-wrap-reverse.

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex flex-nowrap">
  ...
</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex flex-wrap">
  ...
</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex flex-wrap-reverse">
  ...
</div>

için duyarlı varyasyonlar da mevcuttur 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

Bir avuç yardımcı programla belirli esnek öğelerin görsel sırasını değiştirin order. DOM siparişini kullanmak için yalnızca bir öğeyi ilk veya son yapmak için seçenekler ve ayrıca sıfırlama sunuyoruz. order0'dan 5'e kadar herhangi bir tamsayı değeri alırken, gereken ek değerler için özel CSS ekleyin .

İlk esnek öğe
İkinci esnek öğe
Üçüncü esnek öğe
<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>

için duyarlı varyasyonlar da mevcuttur 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

Ek olarak , sırasıyla ve uygulayarak bir öğenin şeklini değiştiren responsive .order-firstve sınıfları da vardır..order-lastorderorder: -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

İçeriği hizala

Esnek öğeleri çapraz eksende align-contenthizalamak için esnek kutu kaplarındaki yardımcı programları kullanın . (tarayıcı varsayılanı), , , , veya arasından seçim yapın . Bu yardımcı programları göstermek için esnek öğelerin sayısını zorunlu kıldık ve artırdık.startendcenterbetweenaroundstretchflex-wrap: wrap

Önüne bak! Bu özelliğin tek sıra esnek öğe üzerinde hiçbir etkisi yoktur.

esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-end flex-wrap">...</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-center flex-wrap">...</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-between flex-wrap">...</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-around flex-wrap">...</div>
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
esnek öğe
<div class="d-flex align-content-stretch flex-wrap">...</div>

için duyarlı varyasyonlar da mevcuttur 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

Medya nesnesi

Medya nesnesi bileşenini Bootstrap 4'ten kopyalamak mı istiyorsunuz? Eskisinden daha fazla esneklik ve özelleştirmeye izin veren birkaç esnek yardımcı programla hemen yeniden oluşturun.

Placeholder Image
Bu, bir medya bileşeninden bazı içeriklerdir. Bunu herhangi bir içerikle değiştirebilir ve gerektiği gibi ayarlayabilirsiniz.
<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>

Diyelim ki içeriği resmin yanında dikey olarak ortalamak istiyorsunuz:

Placeholder Image
Bu, bir medya bileşeninden bazı içeriklerdir. Bunu herhangi bir içerikle değiştirebilir ve gerektiği gibi ayarlayabilirsiniz.
<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>

küstah

Yardımcı Programlar API'sı

Flexbox yardımcı programları, scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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