Flexbox
🪄 가로/세로 정렬의 마법, Flexbox
현대 웹 레이아웃에서 가장 많이 쓰이는 Flexbox입니다. 부모 요소에 display: flex를 선언하면 자식들을 한 방향(가로 또는 세로)으로 쉽게 정렬할 수 있습니다.
Flexbox 주축과 교차축 (정렬 방향)
justify-content는 주축(Main Axis)을 따라 아이템들을 정렬하며,
align-items는 교차축(Cross Axis)을 따라 아이템들을 정렬합니다.
(※ flex-direction: column으로 설정하면 두 축의 방향이 서로 바뀝니다!)
justify-content (주축 정렬)
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items (교차축 정렬)
stretch (기본값)
flex-start
center
flex-end
baseline
A
B
C
💡 요소들을 화면 정중앙에 배치하고 싶다면 flex와 justify-content, align-items를 활용하세요!
심화 학습
Flexbox 심화 (자식 속성: 크기 분배)
Flexbox에서 자식 요소들은 마치 고무줄처럼 화면 넓이에 따라 유연하게 줄어들거나 늘어납니다.
flex-grow (여백 나눠 갖기) 다이어그램
기본 상태 (남는 공간 발생)
A (80px)
B (80px)
남는 공간 (빈 여백)
A가 1, B가 2의 비율로 남는 공간을 나눠 가질 때
A (flex-grow: 1)
B (flex-grow: 2)
A와 B의 flex-grow 비율이 1 : 2라면,
전체 공간에서 1:2로 나누는 것이 아니라, 남는 빈 공간을 3등분하여 A가 1만큼, B가 2만큼 추가로 가져가며 커집니다!