Гузаштан ба мундариҷаи асосӣ Ба паймоиши ҳуҷҷатҳо гузаред
Check

Тарҳ, ҳамоҳангсозӣ ва андозаи сутунҳои шабакавӣ, паймоиш, ҷузъҳо ва ғайраро бо маҷмӯи пурраи утилитаҳои flexbox ҷавобгӯ зуд идора кунед. Барои татбиқи мураккабтар, CSS фармоишӣ метавонад лозим бошад.

Рафтори чандирро фаъол созед

Утилитаҳоро displayбарои сохтани контейнери флексбокс истифода баред ва унсурҳои бевоситаи кӯдаконаро ба ҷузъҳои флекс табдил диҳед. Контейнерҳо ва ашёҳои Flex метавонанд бо хосиятҳои иловагии чандир тағйир дода шаванд.

Ман як контейнери flexbox ҳастам!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ман як контейнери флексбокс ҳастам!
html
<div class="d-inline-flex p-2">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барои оғози самти уфуқӣ аз тарафи муқобил истифода баред .

Элементи 1
Элементи 2
Элементи 3
Элементи 1
Элементи 2
Элементи 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnБарои таъин кардани самти амудӣ ё .flex-column-reverseоғоз кардани самти амудӣ аз тарафи муқобил истифода баред .

Элементи 1
Элементи 2
Элементи 3
Элементи 1
Элементи 2
Элементи 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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 барои тағир додани ҳамоҳангии ҷузъҳои флекс дар меҳвари асосӣ истифода баред (меҳвари 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 барои тағир додани ҳамоҳангии ҷузъҳои чандир дар меҳвари салиб истифода баред (меҳвари 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 барои оғоз, x-меҳвари агар 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
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
Элементи сеюм
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Утилитаҳоро .flex-shrink-*барои иваз кардани қобилияти кам кардани ашё дар ҳолати зарурӣ истифода баред. Дар мисоли дар поён овардашуда, ҷузъи дуюми флеш бо .flex-shrink-1маҷбур аст, ки мундариҷаи худро ба хати нав печонад ва "кӯтоҳ" шавад, то барои ҷузъи қаблии флеш бо .w-100.

Элементи Flex
Элементи Flex
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Бо адад мувофиқ

align-itemsБо омехта кардани , flex-direction: column, ва margin-top: autoё як ашёи тағйирпазирро амудӣ ба боло ё поёни контейнер интиқол диҳед margin-bottom: auto.

Элементи Flex
Элементи Flex
Элементи Flex
Элементи Flex
Элементи Flex
Элементи Flex
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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-и фармоиширо барои ҳама арзишҳои иловагӣ илова кунед.

Ҷузъи аввалини фасеҳ
Элементи дуюм
Элементи сеюм
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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: -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

Мундариҷаро ҳамоҳанг кунед

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-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Объекти ВАО

Оё шумо мехоҳед ҷузъи объекти медиаро аз Bootstrap 4 такрор кунед? Онро дар муддати кӯтоҳ бо чанд утилитаҳои фасеҳ аз нав созед, ки имкон медиҳад, ки нисбат ба пештара чандирӣ ва мутобиқсозии бештарро фароҳам оранд.

Placeholder Image
Ин баъзе мундариҷаи ҷузъи медиа аст. Шумо метавонед онро бо ҳама гуна мундариҷа иваз кунед ва дар ҳолати зарурӣ онро танзим кунед.
html
<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
Ин баъзе мундариҷаи ҷузъи медиа аст. Шумо метавонед онро бо ҳама гуна мундариҷа иваз кунед ва дар ҳолати зарурӣ онро танзим кунед.
html
<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 Utilities

Утилитҳои 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
    ),
    "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,
      ),
    ),