여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 플렉스
Bootstrap – Bootstrap 4 플렉스
5개월전 작성
5개월전 수정



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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그