Bootstrap 5 플렉스
플렉시블 블록
Bootstrap 3과 Bootstrap 4 & 5의 가장 큰 차이점은 Bootstrap 5가 레이아웃을 처리하는 데 플로팅 대신 flexbox를 사용한다는 점입니다.
플렉시블 상자 레이아웃 모듈은 플로팅이나 정위치를 사용하지 않고 플렉시블 반응형 레이아웃 구조를 더 쉽게 설계할 수 있습니다.
flex에 익숙하지 않다면, 우리의 CSS Flexbox 교본 중에서 배우십시오.
주석：IE9 및 이전 버전은 Flexbox를 지원하지 않습니다.
주석：IE8-9 지원이 필요하시다면 Bootstrap 3을 사용하십시오. 이는 가장 안정적인 Bootstrap 버전으로, 팀은 여전히 중요한 버그 수정과 문서 변경을 지원하지만, 새로운 기능을 추가하지 않습니다.
예제
flexbox 컨테이너를 생성하고 직접 자식 요소를 flex 요소로 변환하려면 사용하십시오 d-flex 클래스：
<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div>
예제
내부 줄기 flexbox 컨테이너를 생성하려면 사용하십시오 d-inline-flex 클래스：
<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div>
수평 방향
이를 사용하십시오 .flex-row 활성 항목을 수평 방향으로(쌓여서) 표시합니다. 이는 기본 설정입니다。
건의:자동 여유 공간을 사용하면 .flex-row-reverse 수평 방향으로 오른쪽 정렬할 수 있습니다：
예제
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div>
수직 방향
이를 사용하십시오 .flex-column flex 항목을 수직 방향으로 표시하거나 사용할 수 있습니다 .flex-column-reverse 수직 방향을 반전합니다：
예제
<div class="d-flex flex-column"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div>
내용을 정렬합니다
자동 여유 공간을 사용하면 .justify-content-* 클래스는 확장 항목의 정렬 방식을 변경할 수 있습니다. 유효한 클래스는：：
start（기본 설정）endcenterbetweenaround
예제
<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 항목에서 사용하면 .flex-fill 그들을 동일한 너비로 강제할 수 있습니다：
예제
<div class="d-flex"> <div class="p-2 bg-info flex-fill">활성 항목 1</div> <div class="p-2 bg-warning flex-fill">활성 항목 2</div> <div class="p-2 bg-primary flex-fill">활성 항목 3</div> </div>
확장
flex 항목에서 사용하면 .flex-grow-1 여분의 공간을 사용할 수 있습니다. 다음 예제에서는 첫 두 flex 항목이 필요한 공간을 차지했으며 마지막 항목이 남은 사용 가능한 공간을 차지했습니다：
예제
<div class="d-flex"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary flex-grow-1">활성 항목 3</div> </div>
건의:flex 항목에서 사용하면 .flex-shrink-1 필요 시 축소할 수 있습니다.
순서
자동 여유 공간을 사용하면 .order 클래스는 특정 flex 항목의 시각적 순서를 변경할 수 있습니다. 유효한 클래스는 0에서 5까지며, 가장 낮은 숫자가 가장 높은 우선순위를 가집니다（order-1은 order-2보다 앞에 표시됩니다. 이와 같이 계속됩니다）:
예제
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">활성 항목 1</div> <div class="p-2 bg-warning order-2">활성 항목 2</div> <div class="p-2 bg-primary order-1">활성 항목 3</div> </div>
자동 외부 여유 공간
자동 여유 공간을 사용하면 .ms-auto또는 .me-auto（항목을 왼쪽으로 밀어서）자동 여유 공간을 쉽게 추가할 수 있습니다:
예제
<div class="d-flex bg-secondary"> <div class="p-2 ms-auto bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 bg-primary">활성 항목 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">활성 항목 1</div> <div class="p-2 bg-warning">활성 항목 2</div> <div class="p-2 me-auto bg-primary">활성 항목 3</div> </div>
줄바꿈
또는 .flex-nowrap（기본값）.flex-wrap 또는 .flex-wrap-reverseflex 항목이 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-* 항목을 flex 컨테이너 내에 어떻게 배치할지 정하는 방향 조정 방식입니다. 유효한 클래스는:
.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>
아이템을 정렬합니다
이를 사용하십시오 .align-items-* 클래스 제어단一行유연한 요소의 수직 정렬 방식입니다. 유효한 클래스는 다음과 같습니다：
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-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-self-* 클래스 제어유연한 요소 지정의 수직 정렬 방식입니다. 유효한 클래스는 다음과 같습니다：
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch（기본 설정）
아래의 버튼을 클릭하여 다섯 개 클래스의 차이를 확인하세요：
예제
<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">유연 아이템 1</div> <div class="p-2 border align-self-start">유연 아이템 2</div> <div class="p-2 border">유연 아이템 3</div> </div>
응답형 유연한 클래스
모든 유연한 클래스는 추가적인 응답 클래스를 가지고 있으며, 이는 특정 화면 크기에서 특정 유연한 클래스를 설정하는 데 용이합니다。
* 기호는 sm, md, lg, xl 또는 xxl로 대체할 수 있으며, 각각 소, 중, 대, 매우 큰, 매우 매우 큰 화면을 의미합니다。
특정 유연한 클래스를 검색합니다 ..
| 클래스 | 설명 | 예제 |
|---|---|---|
| 유연한 컨테이너 | ||
.d-*-flex |
다른 화면에서 유연한 컨테이너를 생성합니다。 | 시도해보세요 |
.d-*-inline-flex |
다른 화면에서 행 내 유연한 컨테이너를 생성합니다。 | 시도해보세요 |
| 방향 | ||
.flex-*-row |
다른 화면에서 수평으로 유연한 아이템을 표시합니다。 | 시도해보세요 |
.flex-*-row-reverse |
다른 화면에서 수평으로 오른쪽 정렬로 유연한 아이템을 표시합니다。 | 시도해보세요 |
.flex-*-column |
다른 화면에서 직립적으로 유연한 아이템을 표시합니다。 | 시도해보세요 |
.flex-*-column-reverse |
다른 화면에서 상대적으로 역순서로 직립적으로 유연한 아이템을 표시합니다。 | 시도해보세요 |
| 행에 맞춘 내용 | ||
.justify-content-*-start |
다른 화면에서 처음(왼쪽 정렬)에 유연한 아이템을 표시합니다。 | 시도해보세요 |
.justify-content-*-end |
다른 화면의 끝(오른쪽 정렬)에 유연한 아이템을 표시합니다。 | 시도해보세요 |
.justify-content-*-center |
다른 화면의 유연한 컨테이너 중앙에 유연한 아이템을 표시합니다。 | 시도해보세요 |
.justify-content-*-between |
다른 화면에서 유연한 아이템을 균등하게 표시합니다。 | 시도해보세요 |
.justify-content-*-around |
다른 화면에서 유연한 아이템을 "둘러" 표시합니다。 | 시도해보세요 |
| Fill / 같은 너비 | ||
.flex-*-fill |
강제로 유연한 아이템이 다른 화면에서의 너비가 같도록 합니다。 | 시도해보세요 |
| 확장 | ||
.flex-*-grow-0 |
아이템이 다른 화면에서 확장되지 않도록 합니다。 | |
.flex-*-grow-1 |
다른 화면에서 아이템이 확장되지 않도록 합니다。 | |
| 축소 | ||
.flex-*-shrink-0 |
아이템이 다른 화면에서 축소되지 않도록 합니다. | |
.flex-*-shrink-1 |
아이템이 다른 화면에서 축소되도록 합니다. | |
| 순서 | ||
.order-*-0-12 |
작은 화면에서 0에서 12까지 순서를 변경합니다. | 시도해보세요 |
| 줄바꿈 | ||
.flex-*-nowrap |
다른 화면에서 아이템을 줄바꿈하지 마세요. | 시도해보세요 |
.flex-*-wrap |
다른 화면에서 아이템을 줄바꿈합니다. | 시도해보세요 |
.flex-*-wrap-reverse |
다른 화면에서 아이템의 줄바꿈을 반전합니다. | 시도해보세요 |
| 내용을 정렬합니다 | ||
.align-content-*-start |
다른 화면에서 시작 부분에서 아이템을 정렬합니다. | 시도해보세요 |
.align-content-*-end |
다른 화면의 끝에서 아이템을 정렬합니다. | 시도해보세요 |
.align-content-*-center |
다른 화면의 중심에서 아이템을 정렬합니다. | 시도해보세요 |
.align-content-*-around |
다른 화면의 주변에서 아이템을 정렬합니다. | 시도해보세요 |
.align-content-*-stretch |
다른 화면에서 아이템을 끌어당깁니다. | 시도해보세요 |
| 아이템을 정렬합니다 | ||
.align-items-*-start |
다른 화면에서 시작 부분에서 단일 행 아이템을 정렬합니다. | 시도해보세요 |
.align-items-*-end |
다른 화면의 끝에서 단일 행 아이템을 정렬합니다. | 시도해보세요 |
.align-items-*-center |
다른 화면의 중심에서 단일 행 아이템을 정렬합니다. | 시도해보세요 |
.align-items-*-baseline |
다른 화면의 기본선에서 단일 행 아이템을 정렬합니다. | 시도해보세요 |
.align-items-*-stretch |
다른 화면에서 단일 행 아이템을 끌어당깁니다. | 시도해보세요 |
| 자신을 정렬합니다 | ||
.align-self-*-start |
다른 화면에서 시작 부분에서 플렉스 아이템을 정렬합니다. | 시도해보세요 |
.align-self-*-end |
다른 화면의 끝에서 플렉스 아이템을 정렬합니다. | 시도해보세요 |
.align-self-*-center |
다른 화면의 중심에서 플렉스 아이템을 정렬합니다. | 시도해보세요 |
.align-self-*-baseline |
다른 화면의 기본선에서 플렉스 아이템을 정렬합니다. | 시도해보세요 |
.align-self-*-stretch |
다른 화면에서 플렉스 아이템을 끌어당깁니다. | 시도해보세요 |
