CSS - 플렉스 박스 레이아웃

플렉스 박스 레이아웃

→ 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성

1차원 방식 : (가로, 세로)

 

부모 영역에 display: flex;

 

display: flex vs inline-flex

flex → 해당 요소를 블록 수준의 flex 컨테이너로 만듦, 수직으로 쌓이는 블록 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급

inline-flex → 해당 요소를 인라인 수준의 flex 컨테이너로 만듦, 수평으로 쌓이는 인라인 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급

 

→ 쉽게, display속성 블록 vs inline의 차이

 

flex-direction : flex 아이템들이 배치되는 주축의 방향 지정 (default : row) 

row, row-reverse, column, column-reverse

flex-wrap : flex 아이템들이 flex아이템들이 felx 컨테이너 안에서 여러 줄로 나뉘어 표시될지를 결정

(즉, flex 컨테이너의 크기를 넘어가는 flex 아이템을 한줄로 표시할지, 여러 줄로 나눌지를 결정)

 

→ flex-flow: row wrap;과 같이 한번에 적을 수도 있음.

 

justify-content : 주축을 따라서 flex 아이템들을 어떻게 정렬할지 지정

→ flex-start, flex-end, center, space-between(균일한 간격), space-around, space-evenly 등

 

align-items : 교차축에서 flex 아이템들을 어떻게 정렬할지 지정

align-content : 여러 줄에 걸친 flex 아이템들의 정렬을 지정  

align-self : 개별 flex 아이템에 대해 align-items 속성 적용