[CSS] Flexbox 한 방에 정리하기!

가변적인 레이아웃을 손쉽게 만들고 정렬하기 위해 꼭 알아야 할 개념이 바로 플렉스박스(Flex Box)입니다. 이번 장에서는 플렉스박스에서 사용하는 기초 용어와 사용법을 쉽고 간단하게 정리해 보았습니다.

플랙스박스는 CSS의 레이아웃 기술 중 하나로, 공식명칙은 Flexible Box Layout이며, 일반적으로는 FlexBox라고 줄여서 부릅니다😊

 

📌1. 기초 용어

1) 플렉스 컨테이너(flex container) , 플랙스 아이템(flex items)

플렉스 컨테이너는 부모 요소를, 플렉스 아이템은 그 안에 포함된 자식 요소들를 의미합니다. 부모 요소를 플렉스 컨테이너로 설정하면, 내부의 자식 요소들은 자동으로 플렉스 아이템이 되어 유연하게 크기와 위치가 조정되는 구조로 작동합니다.

2) 주축(Main Axis)과 교차축(Cross Axis)

주축은 중심이 되는 축으로, 이 축을 따라 플렉스 아이템이 배치됩니다. 주축이 가로방향이면 플렉스아이템들이 왼쪽에서 오른쪽으로 배치되고, 반대로 주축이 세로방향이면 박스들을 위에서 아래로 배치됩니다. 교차축은 주축에 교차하는 축을 의미합니다.

📌2. 플랙스 박스(Flex Box) 사용하기

1) 플랙스 컨테이너(Flex Container) 설정

속성명	속성값	설명
display	flex, inline-flex	박스를 플랙서블 박스로 작동하도록 설정 블록수준의 플랙서블 박스, 인라인 수준의 플랙서블 박스
flex-direction	row(기본값), row-reverse, column, column-reverse	플랙스 아이템 배치 왼쪽에서 오른쪽으로 배치, 왼쪽에서 오른쪽으로 배치하되 역방향, 위에서 아래로 배치, 위에서 아래로 배치하되 역방향
flex-wrap	nowrap(기본값), wrap, wrap-reverse	플랙스 아이템을 여러줄로 배치 한줄로 배치, 여러줄로 배치, 여러줄로 배치하되 역방향
flex-flow	row nowrap(기본값)	플랙스 아이템 배치방향 & 여러줄 배치를 한 번에 설정 [flex-direction] [flex-wrap]
align-items	stretch(기본값) flex-start, flex-end, center, baseline	교차축 방향으로 플랙스 아이템 배치하기 박스를 확장하여 배치, 박스를 교차축의 시작점에 배치, 박스를 교차축의 끝점에 배치, 박스를 교차축의 중앙에 배치, 박스를 글자 베이스라인에 맞춰 배치
align-content	stretch(기본값) flex-start, flex-end, center, space-between, space-around space-evenly	교차축이 여러줄일때 플랙스 아이템 배치하기 박스를 확장하여 배치, 박스를 교차축의 시작점에 배치, 박스를 교차축의 끝점에 배치, 첫 박스와 마지막 박스는 양 끝에 배치하고 나머지 박스들을 균등한 간격으로 배치 모든 박스 위아래로 같은 여백으로 배치 모든 박스의 간격을 균등하게 배치

 

2) 플랙스 아이템(Flex Items) 설정

속성명	속성값	설명
align-slef	auto, stretchm flex-start, flex-end, center, baseline	교차축 방향의 플랙스 아이템 개별 배치하기 블록수준의 플랙서블 박스, 인라인 수준의 플랙서블 박스
order	0(기본값) 정수값	플랙스 아이템 배치 순서 변경 입력된 정숫값에 따라 플랙스 아이템의 순서가 결정
flex-grow	0(기본값) 정수값	남는 공간을 얼마나 비율적으로 늘려 가질지 설정 .item1 { flex-grow: 1; } .item2 { flex-grow: 2; } 전체 남는 공간을 3등분해서, item1은 1, item2는 2 비율만큼 차지
flex-shrink	1(기본값) 정수값	부모 공간이 부족할 때 얼마나 비율적으로 줄일지 설정 .item1 { flex-shrink: 1; } .item2 { flex-shrink: 2; } 공간 부족 시, item2가 item1보다 2배 더 많이 줄어듦
flex-basis	auto(width) 정수값	아이템의 기본 크기(시작점) 설정 .item { flex-basis: 200px; }
flex	[grow] [shrink] [basis]	flex-grow , flex-shrink , flex-basis 한번에 작성 .item {  flex: 1 1 0; }