Bootstrap 4 플렉스

플렉스 클래스를 사용하여 Bootstrap 4 구성 요소의 레이아웃을 제어한다.

플렉스박스

Bootstrap 3과 Bootstrap 4의 가장 큰 차이점은 Bootstrap 4가 이제 레이아웃을 처리하기 위해 float 대신 flexbox를 사용한다는 것이다.

유연한 상자 레이아웃 모듈을 사용하면 부동 또는 위치 지정을 사용하지 않고도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있다.

예제 1

Flexbox 컨테이너를 만들고 직계 자식 항목을 Flex 항목으로 변환하려면 다음 d-flex클래스를 사용한다.

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

예제 2

인라인 Flexbox 컨테이너를 만들려면 다음 d-inline-flex클래스를 사용한다.

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

수평 방향

.flex-row는 Flex 항목을 가로(나란히)로 표시하는 데 사용된다. 기본값.

⭐ 수평 방향을 오른쪽 정렬하려면 .flex-row-reverse를 사용한다.

예제

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

수직 방향

.flex-column으로 Flex 항목을 수직으로(서로의 위에) 표시하거나 .flex-column-reverse로 수직 방향을 반대로 표시하는 데 사용된다.

예제

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

콘텐츠 정당화

.justify-content-* 클래스를 사용하여 Flex 항목의 정렬을 변경한다.
유효한 클래스는 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>

채우기/동일 너비

플렉스 항목에 .flex-fill을 사용하여 동일한 너비로 강제 지정한다.

예제

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

차지하다

나머지 공간을 차지하려면 플렉스 아이템에 .flex-grow-1를 사용한다.

예제

처음 두 개의 플렉스 항목은 필요한 공간을 차지하고 마지막 항목은 사용 가능한 나머지 공간을 차지한다.

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

순서

.order 클래스를 사용하여 특정 플렉스 항목의 시각적 순서를 변경한다.
유효한 클래스는 0부터 12까지이며, order-1이 order-2보다 먼저 표시되는 등 가장 낮은 숫자가 가장 높은 우선순위를 갖는다.

예제

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

자동 여백

.mr-auto(항목을 오른쪽으로 푸시) 또는 .ml-auto(항목을 왼쪽으로 푸시)을 사용하여 플렉스 항목에 자동 여백을 쉽게 추가할 수 있다.

예제

<div class="d-flex bg-secondary">
  <div class="p-2 mr-auto bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>

예제

래핑

.flex-nowrap(기본값) .flex-wrap 또는 .flex-wrap-reverse 를 사용하여 Flex 항목이 Flex 컨테이너에서 래핑되는 방식을 제어한다.

예제

<div class="d-flex flex-wrap">..</div>

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

<div class="d-flex flex-nowrap">..</div>

콘텐츠 정렬

수집된 플렉스 항목 의 수직 정렬을 .align-content-* 클래스와 함께 제어한다.
유효한 클래스는 .align-content-start(기본값), .align-content-end, .align-content-center, .align-content-between, .align-content-around 및 .align-content-stretch 다.

예제

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>

아이템 정렬

클래스를 사용하여 Flex 항목의 단일 행 수직 정렬을 제어한다.
유효한 클래스는 .align-items-start, .align-items-end, .align-items-center, .align-items-baseline 및 .align-items-center(기본값) 이다.

예제

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

셀프 정렬

클래스 를 사용하여 지정된 Flex 항목 의 수직 정렬을 제어합니다 .align-self-start, .align-self-end, .align-self-center, .align-self-baseline 및 .align-self-center(기본값)이다.

예제

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>