부트스트랩 4 플렉스
부트스트랩 4 플렉스
플렉스 클래스를 사용하여 Bootstrap 4 구성 요소의 레이아웃을 제어합니다.
플렉스박스
Bootstrap 3과 Bootstrap 4의 가장 큰 차이점은 Bootstrap 4가 이제 float 대신 flexbox를 사용하여 레이아웃을 처리한다는 것입니다.
Flexible Box Layout Module을 사용하면 플로트 또는 위치 지정을 사용하지 않고 유연한 반응형 레이아웃 구조를 보다 쉽게 설계할 수 있습니다. flex를 처음 접하는 경우 CSS Flexbox Tutorial 에서 이에 대해 읽을 수 있습니다 .
참고: Flexbox는 IE9 및 이전 버전에서 지원되지 않습니다.
IE8-9 지원이 필요한 경우 부트스트랩 3을 사용 하십시오. 부트스트랩 3 은 가장 안정적인 부트스트랩 버전이며 중요한 버그 수정 및 문서 변경에 대해 팀에서 계속 지원합니다. 그러나 새로운 기능은 추가되지 않습니다.
flexbox 컨테이너를 만들고 직계 자식을 플렉스 항목으로 변환하려면 다음 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>
인라인 플렉스박스 컨테이너를 생성하려면 다음 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-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-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-*플렉스 항목의 정렬을 변경합니다. 유효한 클래스는 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>
팁:.flex-shrink-1 필요한 경우 축소하려면 플렉스 항목에 사용하십시오 .
주문하다
.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.
예제 상자에서 플렉스 항목의 래핑을 변경하여 세 클래스 간의 차이점을 보려면 아래 버튼을 클릭하십시오.
예시
예시
<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>
항목 정렬
클래스 를 사용하여 플렉스 항목 의 단일 행 수직 정렬을 제어합니다 . .align-items-*유효한 클래스는 .align-items-start, .align-items-end, .align-items-center, .align-items-baseline및 .align-items-stretch
(기본값)입니다.
아래 버튼을 클릭하여 5가지 클래스의 차이점을 확인하세요.
예시
예시
<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
(기본값)입니다.
아래 버튼을 클릭하여 5가지 클래스의 차이점을 확인하세요.
예시
예시
<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>
반응형 플렉스 클래스
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |