주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

몸을 풀다

반응형 flexbox 유틸리티의 전체 제품군을 사용하여 그리드 열, 탐색, 구성 요소 등의 레이아웃, 정렬 및 크기 조정을 신속하게 관리합니다. 더 복잡한 구현의 경우 사용자 정의 CSS가 필요할 수 있습니다.

플렉스 동작 활성화

유틸리티를 적용 display하여 flexbox 컨테이너를 만들고 직접 자식 요소 를 플렉스 항목으로 변환합니다. Flex 컨테이너 및 항목은 추가 flex 속성으로 추가로 수정할 수 있습니다.

나는 플렉스박스 컨테이너다!
<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반대쪽에서 수평 방향을 시작하는 데 사용 합니다.

플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 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반대쪽에서 수직 방향을 시작할 때 사용 합니다.

플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 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

콘텐츠 정당화

flexbox 컨테이너의 유틸리티를 사용 justify-content하여 기본 축(시작할 x축, 인 경우 y축 flex-direction: column)에서 플렉스 항목의 정렬을 변경합니다. start(브라우저 기본값), end, center, between, around또는 에서 선택합니다 evenly.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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

항목 정렬

flexbox 컨테이너의 유틸리티를 사용 align-items하여 교차 축(시작할 y축, 이면 x축 flex-direction: column)에서 플렉스 항목의 정렬을 변경합니다. start, end, center, baseline또는 stretch(브라우저 기본값) 중에서 선택 합니다.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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

자기 정렬

flexbox 항목의 유틸리티를 사용 align-self하여 교차 축(시작할 y축, 이면 x축 flex-direction: column)의 정렬을 개별적으로 변경합니다. , , , 또는 (브라우저 기본값) 과 동일한 옵션에서 선택합니다 align-items.startendcenterbaselinestretch

플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
<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가능한 모든 수평 공간을 차지하는 동안 콘텐츠와 동일한 너비(또는 콘텐츠가 테두리 상자를 초과하지 않는 경우 동일한 너비)로 강제 적용합니다.

컨텐츠가 많은 플렉스 아이템
플렉스 아이템
플렉스 아이템
<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요소는 사용 가능한 모든 공간을 사용하고 나머지 두 개의 플렉스 항목에 필요한 공간을 허용합니다.

플렉스 아이템
플렉스 아이템
세 번째 플렉스 아이템
<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-shrink-1은 내용을 새 줄로 감싼 다음 "축소"하여 로 이전 플렉스 항목에 더 많은 공간을 허용합니다 .w-100.

플렉스 아이템
플렉스 아이템
<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).

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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, flex-direction: columnmargin-top: auto또는 를 혼합하여 하나의 플렉스 항목을 컨테이너의 상단 또는 하단으로 수직으로 이동합니다 margin-bottom: auto.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex flex-nowrap">
  ...
</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex flex-wrap">
  ...
</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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 순서를 사용하도록 재설정하는 옵션만 제공합니다. 0 에서 order5 사이의 정수 값을 취하므로 필요한 추가 값에 대해 사용자 정의 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클래스 도 있습니다.orderorder: -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-contentflexbox 컨테이너의 유틸리티를 사용 하여 플렉스 항목 을 교차 축에서 함께 정렬합니다. start(브라우저 기본값), end, center, between, around또는 에서 선택합니다 stretch. 이러한 유틸리티를 보여주기 위해 flex-wrap: wrap플렉스 항목의 수를 늘리고 시행했습니다.

머리! 이 속성은 플렉스 항목의 단일 행에 영향을 주지 않습니다.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-content-end flex-wrap">...</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-content-center flex-wrap">...</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-content-between flex-wrap">...</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-content-around flex-wrap">...</div>
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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에서 미디어 개체 구성 요소 를 복제하고 싶으십니까? 이전보다 훨씬 더 유연하고 사용자 정의할 수 있는 몇 가지 플렉스 유틸리티를 사용하여 즉시 다시 만드십시오.

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