몸을 풀다

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

플렉스 동작 활성화

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

나는 플렉스박스 컨테이너다!

<div class="d-flex p-2">I'm a flexbox container!</div>

나는 인라인 flexbox 컨테이너입니다!

<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

방향

방향 유틸리티를 사용하여 플렉스 컨테이너에서 플렉스 항목의 방향을 설정합니다. 대부분의 경우 브라우저 기본값이 이므로 수평 클래스를 생략할 수 있습니다 row. 그러나 이 값을 명시적으로 설정해야 하는 상황이 발생할 수 있습니다(예: 반응형 레이아웃).

.flex-row수평 방향(브라우저 기본값)을 설정하거나 .flex-row-reverse반대쪽에서 수평 방향을 시작하는 데 사용 합니다.

플렉스 아이템 1

플렉스 아이템 2

플렉스 아이템 3

플렉스 아이템 1

플렉스 아이템 2

플렉스 아이템 3

<div class="d-flex flex-row">
  <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

<div class="d-flex flex-column">
  <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

콘텐츠 정당화

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

플렉스 아이템

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

에 대한 반응 변형도 존재합니다 justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

항목 정렬

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

자기 정렬

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

자동 여백

Flexbox는 플렉스 정렬과 자동 여백을 혼합할 때 꽤 멋진 일을 할 수 있습니다. 다음은 자동 여백을 통해 플렉스 항목을 제어하는 세 가지 예입니다. 기본값(자동 여백 없음), 두 항목을 오른쪽으로 .mr-auto푸시( ), 두 항목을 왼쪽으로 푸시( .ml-auto).

불행히도 IE10 및 IE11은 부모가 기본값이 아닌 justify-content값을 갖는 플렉스 항목에서 자동 여백을 제대로 지원하지 않습니다. 자세한 내용은 이 StackOverflow 답변 을 참조하세요.

플렉스 아이템

<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

정렬 항목으로

align-items, flex-direction: column및 margin-top: auto또는 를 혼합하여 하나의 플렉스 항목을 컨테이너의 상단 또는 하단으로 수직으로 이동합니다 margin-bottom: auto.

플렉스 아이템

<div class="d-flex align-items-start flex-column" 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" 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.

플렉스 아이템

<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

주문하다

몇 가지 유틸리티 를 사용하여 특정 플렉스 항목 의 시각적 순서를 변경합니다 . order항목을 처음 또는 마지막으로 만드는 옵션과 DOM 순서를 사용하도록 재설정하는 옵션만 제공합니다. order정수 값(예: ) 5을 사용하므로 필요한 추가 값에 대해 사용자 정의 CSS를 추가하십시오.

첫 번째 플렉스 항목

두 번째 플렉스 항목

세 번째 플렉스 아이템

<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-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

콘텐츠 정렬

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