Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Przewód

Szybko zarządzaj układem, wyrównaniem i rozmiarami kolumn siatki, nawigacji, komponentów i nie tylko dzięki pełnemu zestawowi responsywnych narzędzi Flexbox. W przypadku bardziej złożonych implementacji może być konieczne niestandardowe CSS.

Włącz elastyczne zachowania

Zastosuj displaynarzędzia, aby utworzyć kontener flexbox i przekształcić bezpośrednie elementy potomne w elementy flex. Elastyczne pojemniki i przedmioty można dalej modyfikować za pomocą dodatkowych właściwości elastycznych.

Jestem kontenerem flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jestem wbudowanym kontenerem flexbox!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Odmiany responsywne istnieją również dla .d-flexi .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

Kierunek

Ustaw kierunek elementów elastycznych w kontenerze elastycznym za pomocą narzędzi kierunkowych. W większości przypadków możesz pominąć tutaj klasę poziomą, ponieważ domyślna przeglądarka to row. Możesz jednak napotkać sytuacje, w których musisz jawnie ustawić tę wartość (np. Układy responsywne).

Użyj .flex-row, aby ustawić kierunek poziomy (domyślny w przeglądarce) lub .flex-row-reverserozpocząć kierunek poziomy od przeciwnej strony.

Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
Wygiąć element 1
Elastyczny element 2
Elastyczny element 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>

Użyj .flex-column, aby ustawić kierunek pionowy lub .flex-column-reverserozpocząć kierunek pionowy od przeciwnej strony.

Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
Wygiąć element 1
Elastyczny element 2
Elastyczny element 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>

Odmiany responsywne istnieją również dla 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

Uzasadnij treść

Użyj justify-contentnarzędzi na kontenerach flexbox, aby zmienić wyrównanie elementów flex na głównej osi (oś x do początku, oś y, jeśli flex-direction: column). Wybierz spośród start(domyślnie przeglądarki), end, center, between, aroundlub evenly.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<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>

Odmiany responsywne istnieją również dla 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

Wyrównaj przedmioty

Użyj align-itemsnarzędzi na kontenerach flexbox, aby zmienić wyrównanie elementów elastycznych na osi poprzecznej (oś y do początku, oś x, jeśli flex-direction: column). Wybierz spośród start, end, center, baselinelub stretch(domyślna przeglądarka).

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<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>

Odmiany responsywne istnieją również dla 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

Wyrównaj siebie

Użyj align-selfnarzędzi na elementach flexbox, aby indywidualnie zmienić ich wyrównanie na osi poprzecznej (oś y do początku, oś x, jeśli flex-direction: column). Wybierz jedną z tych samych opcji, co align-items: start, end, center, baselinelub stretch(domyślna przeglądarka).

Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
<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>

Odmiany responsywne istnieją również dla 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

Wypełnić

Użyj .flex-fillklasy na serii elementów równorzędnych, aby zmusić je do szerokości równej ich zawartości (lub równych szerokości, jeśli ich zawartość nie przekracza ramek granicznych), jednocześnie zajmując całą dostępną przestrzeń poziomą.

Elastyczny przedmiot z dużą ilością treści
Element elastyczny
Element elastyczny
<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>

Odmiany responsywne istnieją również dla flex-fill.

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

Rosną i kurczą się

Użyj .flex-grow-*narzędzi, aby przełączyć zdolność elastycznego elementu do powiększania się w celu wypełnienia dostępnej przestrzeni. W poniższym przykładzie .flex-grow-1elementy wykorzystują całą dostępną przestrzeń, jaką mogą, pozostawiając pozostałym dwóm elementom elastycznym ich niezbędną przestrzeń.

Element elastyczny
Element elastyczny
Trzeci element elastyczny
<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>

Użyj .flex-shrink-*narzędzi, aby w razie potrzeby przełączyć zdolność elementu elastycznego do zmniejszania. W poniższym przykładzie drugi element flex z .flex-shrink-1jest zmuszony do zawinięcia swojej zawartości do nowej linii, „kurcząc się”, aby zapewnić więcej miejsca dla poprzedniego elementu flex z .w-100.

Element elastyczny
Element elastyczny
<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>

Odmiany responsywne istnieją również dla flex-growi 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

Marże automatyczne

Flexbox może zrobić kilka niesamowitych rzeczy, gdy połączysz elastyczne wyrównanie z automatycznymi marginesami. Poniżej pokazano trzy przykłady kontrolowania elementów elastycznych za pomocą automatycznych marginesów: domyślne (brak automatycznego marginesu), przesuwanie dwóch elementów w prawo ( .me-auto) i przesuwanie dwóch elementów w lewo ( .ms-auto).

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<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>

Z wyrównaniem elementów

Przenieś w pionie jeden element flex na górę lub dół kontenera, mieszając align-items, flex-direction: columni margin-top: autolub margin-bottom: auto.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<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>

Zawinąć

Zmień sposób zawijania elementów elastycznych w kontenerze elastycznym. Wybierz opcję braku zawijania (domyślne ustawienie przeglądarki) za pomocą .flex-nowrap, zawijania za pomocą .flex-wraplub odwrotnego zawijania za pomocą .flex-wrap-reverse.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-nowrap">
  ...
</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-wrap">
  ...
</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Odmiany responsywne istnieją również dla 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

Zamówienie

Zmień wizualną kolejność określonych elementów elastycznych za pomocą kilku ordernarzędzi. Zapewniamy tylko opcje dodawania przedmiotu jako pierwszego lub ostatniego, a także resetowania w celu użycia zamówienia DOM. Ponieważ orderprzyjmuje dowolną wartość całkowitą od 0 do 5, dodaj niestandardowy CSS dla wszelkich dodatkowych potrzebnych wartości.

Pierwsza elastyczna pozycja
Drugi element elastyczny
Trzeci element elastyczny
<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>

Odmiany responsywne istnieją również dla 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

Dodatkowo istnieją również responsywne .order-firsti .order-lastklasy zmieniające orderelement poprzez zastosowanie odpowiednio order: -1i order: 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

Wyrównaj zawartość

Użyj align-contentnarzędzi na kontenerach flexbox, aby wyrównać elementy flex razem na osi poprzecznej. Wybierz spośród start(domyślnie przeglądarki), end, center, between, aroundlub stretch. Aby zademonstrować te narzędzia, wymusiliśmy flex-wrap: wrapi zwiększyliśmy liczbę elementów elastycznych.

Heads-up! Ta właściwość nie ma wpływu na pojedyncze wiersze elementów flex.

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

Odmiany responsywne istnieją również dla 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

Obiekt medialny

Chcesz zreplikować komponent obiektu multimedialnego z Bootstrap 4? Odtwórz go w mgnieniu oka za pomocą kilku narzędzi elastycznych, które zapewniają jeszcze większą elastyczność i dostosowywanie niż wcześniej.

Placeholder Image
To jest część treści z komponentu multimedialnego. Możesz to zastąpić dowolną treścią i dostosować ją w razie potrzeby.
<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>

I powiedz, że chcesz wyśrodkować zawartość w pionie obok obrazu:

Placeholder Image
To jest część treści z komponentu multimedialnego. Możesz to zastąpić dowolną treścią i dostosować ją w razie potrzeby.
<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

Narzędzia API

Narzędzia Flexbox są zadeklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss.Dowiedz się, jak korzystać z interfejsu API narzędzi.

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