Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
in English

Флекс

Хутка кіруйце размяшчэннем, выраўноўваннем і памерам слупкоў сеткі, навігацыяй, кампанентамі і іншым з дапамогай поўнага набору адаптыўных утыліт flexbox. Для больш складаных рэалізацый можа спатрэбіцца карыстацкі CSS.

Уключыць гнуткія паводзіны

Ужывайце displayўтыліты для стварэння кантэйнера flexbox і пераўтварэння прамых даччыных элементаў у гнуткія элементы. Кантэйнеры і прадметы Flex можна дадаткова мадыфікаваць з дапамогай дадатковых уласцівасцей гнуткасці.

Я кантэйнер flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Я ўбудаваны кантэйнер flexbox!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Адаптыўныя варыянты таксама існуюць для .d-flexі .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

Напрамак

Задайце кірунак гнуткіх элементаў у гнуткім кантэйнеры з дапамогай утыліт напрамкі. У большасці выпадкаў вы можаце апусціць тут гарызантальны клас, бо браўзер па змаўчанні row. Аднак вы можаце сутыкнуцца з сітуацыямі, калі вам трэба было яўна задаць гэта значэнне (напрыклад, адаптыўныя макеты).

Выкарыстоўвайце .flex-row, каб задаць гарызантальны кірунак (браўзер па змаўчанні) або .flex-row-reverseпачаць гарызантальны кірунак з супрацьлеглага боку.

Flex элемент 1
Flex элемент 2
Flex пункт 3
Flex элемент 1
Flex элемент 2
Flex пункт 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-column, каб задаць вертыкальны кірунак або .flex-column-reverseпачаць вертыкальны кірунак з супрацьлеглага боку.

Flex элемент 1
Flex элемент 2
Flex пункт 3
Flex элемент 1
Flex элемент 2
Flex пункт 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>

Адаптыўныя варыянты таксама існуюць для 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

Абгрунтаваць змест

Выкарыстоўвайце justify-contentўтыліты на кантэйнерах flexbox, каб змяніць выраўноўванне flex-элементаў на галоўнай восі (вось X для пачатку, вось Y, калі flex-direction: column). Абярыце з start(браўзер па змаўчанні), end, center, between, aroundабо evenly.

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<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>

Адаптыўныя варыянты таксама існуюць для 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

Выраўнаваць элементы

Выкарыстоўвайце align-itemsўтыліты на кантэйнерах flexbox, каб змяніць выраўноўванне flex-элементаў па папярочнай восі (вось Y для пачатку, вось X, калі flex-direction: column). Выберыце з start, end, center, baselineабо stretch(браўзер па змаўчанні).

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<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>

Адаптыўныя варыянты таксама існуюць для 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-selfўтыліты для элементаў flexbox, каб індывідуальна змяніць іх выраўноўванне па папярочнай восі (вось y для пачатку, вось х, калі flex-direction: column). Выберыце з тых жа параметраў, што і align-items: start, end, center, baseline, або stretch(браўзер па змаўчанні).

Flex пункт
Выраўнаваны гнуткі элемент
Flex пункт
Flex пункт
Выраўнаваны гнуткі элемент
Flex пункт
Flex пункт
Выраўнаваны гнуткі элемент
Flex пункт
Flex пункт
Выраўнаваны гнуткі элемент
Flex пункт
Flex пункт
Выраўнаваны гнуткі элемент
Flex пункт
<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>

Адаптыўныя варыянты таксама існуюць для 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

Запоўніць

Выкарыстоўвайце .flex-fillклас на шэрагу аднатыпных элементаў, каб прымусіць іх мець шырыню, роўную іх зместу (або роўную шырыню, калі іх змест не перавышае межы), займаючы пры гэтым усю даступную гарызантальную прастору.

Прадмет Flex з вялікай колькасцю кантэнту
Flex пункт
Flex пункт
<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>

Адаптыўныя варыянты таксама існуюць для flex-fill.

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

Расці і змяншацца

Выкарыстоўвайце .flex-grow-*ўтыліты, каб пераключыць здольнасць гнуткага элемента павялічвацца, каб запоўніць даступную прастору. У прыведзеным ніжэй прыкладзе .flex-grow-1элементы выкарыстоўваюць усю даступную прастору, дазваляючы астатнім двум элементам змяняць неабходную прастору.

Flex пункт
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>

Выкарыстоўвайце .flex-shrink-*ўтыліты, каб пераключыць здольнасць гнуткага элемента памяншацца пры неабходнасці. У прыведзеным ніжэй прыкладзе другі flex-элемент з дапамогай .flex-shrink-1вымушаны перанесці сваё змесціва ў новы радок, «сціскаючыся», каб даць больш месца для папярэдняга flex-элемента з .w-100.

Flex пункт
Flex пункт
<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>

Адаптыўныя варыянты таксама існуюць для flex-growі 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

Аўтаматычныя маржы

Flexbox можа рабіць даволі дзіўныя рэчы, калі вы змешваеце гнуткае выраўноўванне з аўтаматычнымі палямі. Ніжэй паказаны тры прыклады кіравання гнуткімі элементамі праз аўтаматычныя палі: па змаўчанні (без аўтаматычнага поля), ссоўванне двух элементаў направа ( .me-auto) і ссоўванне двух элементаў налева ( .ms-auto).

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<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>

З дапамогай align-items

Вертыкальна перамясціце адзін гнуткі элемент уверх або ўніз кантэйнера, змяшаўшы align-items, flex-direction: columnі margin-top: autoабо margin-bottom: auto.

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<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>

Абгарнуць

Зменіце спосаб загортвання гнуткіх элементаў у гнуткі кантэйнер. Выбірайце варыянты без пераносу (па змаўчанні для браўзера) з дапамогай .flex-nowrap, перанос з дапамогай .flex-wrapабо зваротны перанос з дапамогай .flex-wrap-reverse.

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex flex-nowrap">
  ...
</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex flex-wrap">
  ...
</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Адаптыўныя варыянты таксама існуюць для 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

Парадак

Змяніце візуальны парадак пэўных гнуткіх элементаў з дапамогай некалькіх orderутыліт. Мы прапануем толькі варыянты для таго, каб зрабіць элемент першым або апошнім, а таксама скід для выкарыстання парадку DOM. Паколькі orderпрымае любое цэлае значэнне ад 0 да 5, дадайце карыстальніцкі CSS для любых дадатковых значэнняў.

Першы гнуткі элемент
Другі гнуткі элемент
Трэці гнуткі элемент
<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>

Адаптыўныя варыянты таксама існуюць для 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

Акрамя таго, ёсць спагадныя класы .order-firstі .order-last, якія змяняюць orderэлемент, ужываючы order: -1і 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

Выраўнаваць змест

Выкарыстоўвайце align-contentўтыліты на кантэйнерах flexbox, каб выраўнаваць гнуткія элементы разам на папярочнай восі. Абярыце з start(браўзер па змаўчанні), end, center, between, aroundабо stretch. Каб прадэманстраваць гэтыя ўтыліты, мы ўвялі flex-wrap: wrapі павялічылі колькасць гнуткіх элементаў.

Галаву ўверх! Гэта ўласцівасць не ўплывае на асобныя радкі гнуткіх элементаў.

Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-end flex-wrap">...</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-center flex-wrap">...</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-between flex-wrap">...</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-around flex-wrap">...</div>
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
Flex пункт
<div class="d-flex align-content-stretch flex-wrap">...</div>

Адаптыўныя варыянты таксама існуюць для 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

Медыяаб'ект

Жадаеце паўтарыць кампанент мультымедыйнага аб'екта з Bootstrap 4? Аднавіце яго ў самыя кароткія тэрміны з дапамогай некалькіх утыліт flex, якія забяспечваюць яшчэ больш гнуткасці і наладкі, чым раней.

Placeholder Image
Гэта частка кантэнту з медыякампанента. Вы можаце замяніць гэта любым кантэнтам і наладзіць яго па меры неабходнасці.
<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>

І скажам, вы хочаце вертыкальна адцэнтраваць змесціва побач з выявай:

Placeholder Image
Гэта частка кантэнту з медыякампанента. Вы можаце замяніць гэта любым кантэнтам і наладзіць яго па меры неабходнасці.
<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>

Сас

API утыліт

Утыліты Flexbox заяўлены ў нашым API утыліт у scss/_utilities.scss. Даведайцеся, як выкарыстоўваць API утыліт.

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