✏️ CSS 레이아웃
CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술
형제 요소들을 가지런히 정렬할 수 있게 하고 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될 지 결정
✏️ 플렉스박스(flexbox)
행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식
요소의 매치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정
- 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소
- 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소
플렉스박스 사용 방법
💡 중요 개념
플렉스박스 방식은 두 개의 축을 기반으로 동작
주축의 기본값은 가로 방향(왼쪽에서 오른쪽)
교차축의 기본값은 세로 방향(위에서 아래)
✏️ flexbox 관련 주요 속성들
1️⃣ flex-direction
플렉스 컨테이너의 주축을 결정하는 속성
-
row : 디폴트, 주축은 행이고 방향은 콘텐츠의 방향과 동일
-
row-reverse : 주축은 행이고 방향은 콘텐츠의 방향과 반대
-
column : 주축은 열이고 방향은 콘텐츠의 방향과 동일
-
column-reverse : 주축은 열이고 방향은 콘텐츠의 방향과 반대
2️⃣ flex-wrap
플렉스 아이템들이 강제로 한 줄에 배치되게 할 것인지 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성
-
nowrap : 디폴트, 공간이 부족하더라도 요소를 한 줄에 배치
-
wrap : 공간 크기에 따라 요소가 여러 행에 걸쳐 배치
-
wrap-reverse : wrap과 동일하나 요소 나열되는 시작점과 끝점이 반대
3️⃣ justify-content
플렉스아이템들이 블렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식
-
flex-start : 주축의 시작점으로부터 끝점을 향해 배치
-
flex-end : 주축의 끝점으로부터 시작점을 향해 배치
-
center : 주축의 중심부에 배치
-
space-between : 주축에서 일정한 간격을 둔 채 양 끝 정렬 배치
-
space-around : 모든 요소가 동일한 여백을 갖도록 배치
-
space-evenly : 모든 요소 사이의 간격을 동일하게 유지해 배치
4️⃣ align-items
플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬된 것인지를 결정
-
stretch : 플렉스아이템이 교차축 길이에 맞춰 늘어남
But, 너비 또는 높이가 우선
-
flex-start : 교차축의 시작점으로부터 끝점을 향해 배치
-
flex-end : 교차축의 시작점으로부터 끝점을 향해 배치
-
center : 교차축의 중심부에 배치
5️⃣ align-self
각각의 플렉스아이템이 교차축에서 어떤 식으로 정렬될 것인지를 스스로 결정
align-items는 플렉스박스인 ul요소에 적용
align-self는 플렉스아이템인 li요소에 적용
- stretch : 플렉스아이템이 교차축 길이에 맞춰 늘어남
But, 너비 또는 높이가 우선 - flex-start : 교차축의 시작점으로부터 끝점을 향해 배치
- flex-end : 교차축의 시작점으로부터 끝점을 향해 배치
- center : 교차축의 중심부에 배치
6️⃣ flex-grow, flex-shrink. flex-basis
- flex-grow : 플렉스아이템이 기본 크기보다 더 커질 수 있는지 결정
플렉스컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의
0 보다 큰 숫자 사용 시 상대적으로 공간 할당
- flex-shrink : 플렉스아이템이 기본 크기보다 더 작아질 수 있는지 결정
플렉스컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의
- flex-basis : 플렉스아이템의 초기 크기를 지정
짝수 번 째 아이템들만 초기 크기 200px로 지정
7️⃣ order
플렉스아이템의 배치 순서를 설정, 지정한 숫자(정수)에 맞춰 오름차순으로 배치
