Flex

Flex

Flexbox 유틸리티 클래스는 Flexbox 레이아웃을 쉽게 적용하고 조정할 수 있도록 도와줍니다.

Flex

Flex Layout 은 Flexible Box Layout 을 말하며, 말 그대로 유연한 박스 레이아웃입니다.

박스(Container) 안에서 요소(item)들을 1차원으로 유연하게 배치하는 것을 쉽게 해줍니다.

FLEX 레이아웃

Bootstrap은 Flexbox의 다양한 기능을 간단한 클래스 형태로 제공합니다.

Flex 컨테이너 설정

클래스	설명
d-flex	요소를 Flex 컨테이너로 설정
d-inline-flex	요소를 인라인 Flex 컨테이너로 설정

Flex 방향 설정

클래스	설명
flex-row	자식 요소들을 행 방향으로 배치 (기본값)
flex-row-reverse	자식 요소들을 행 방향으로 역순 배치
flex-column	자식 요소들을 열 방향으로 배치
flex-column-reverse	자식 요소들을 열 방향으로 역순 배치

Flex 정렬 설정 (주 축)

클래스	설명
justify-content-start	주 축(가로축) 왼쪽 정렬 (기본값)
justify-content-end	주 축(가로축) 오른쪽 정렬
justify-content-center	주 축(가로축) 중앙 정렬
justify-content-between	주 축(가로축) 양 끝 정렬
justify-content-around	주 축(가로축) 요소들 사이 동일 간격
justify-content-evenly	주 축(가로축) 요소들 사이 및 양 끝 동일 간격

Flex 정렬 설정 (교차 축)

클래스	설명
align-items-start	교차 축(세로축) 위쪽 정렬
align-items-end	교차 축(세로축) 아래쪽 정렬
align-items-center	교차 축(세로축) 중앙 정렬
align-items-baseline	교차 축(세로축) 텍스트 기준선 정렬
align-items-stretch	교차 축(세로축) 요소를 컨테이너 높이에 맞춰 늘림

Flex 자체 정렬 설정

클래스	설명
align-self-start	개별 요소를 교차 축(세로축) 위쪽 정렬
align-self-end	개별 요소를 교차 축(세로축) 아래쪽 정렬
align-self-center	개별 요소를 교차 축(세로축) 중앙 정렬
align-self-baseline	개별 요소를 교차 축(세로축) 텍스트 기준선 정렬
align-self-stretch	개별 요소를 교차 축(세로축) 컨테이너 높이에 맞춰 늘림

Flex 랩 설정

클래스	설명
flex-wrap	자식 요소들을 여러 줄로 배치
flex-nowrap	자식 요소들을 한 줄로 배치 (기본값)
flex-wrap-reverse	자식 요소들을 여러 줄로 역순 배치

Flex 성장 및 축소 설정

클래스	설명
flex-grow-0	요소가 성장하지 않음
flex-grow-1	요소가 성장함
flex-shrink-0	요소가 축소하지 않음
flex-shrink-1	요소가 축소함

Flex 기본 크기 설정

클래스	설명
flex-fill	요소가 남은 공간을 채움
flex-sm-fill	작은 화면에서 요소가 남은 공간을 채움
flex-md-fill	중간 화면에서 요소가 남은 공간을 채움
flex-lg-fill	큰 화면에서 요소가 남은 공간을 채움
flex-xl-fill	매우 큰 화면에서 요소가 남은 공간을 채움

Flex 순서 설정

클래스	설명
order-0	요소의 순서를 0으로 설정 (기본값)
order-1	요소의 순서를 1로 설정
order-2	요소의 순서를 2로 설정
order-3	요소의 순서를 3로 설정
order-4	요소의 순서를 4로 설정
order-5	요소의 순서를 5로 설정
order-first	요소의 순서를 첫 번째로 설정
order-last	요소의 순서를 마지막으로 설정