10-2. CSS 플렉스 박스 레이아웃 (flex-direction, flex-flow, flex-wrap, justify-content, align-content, align-self, align-items)

1. 플렉스 박스 레이아웃 

그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 

이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 

 

1️⃣ 플렉스 컨테이너 (부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소이다. 

2️⃣ 플렉스 항목 (자식 박스) : 플렉스 박스 레이아웃을 적용할 대상이다. 

3️⃣ 주축 (main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. (기본적으로 왼쪽에서 오른쪽으로 수평방향으로 배치한다.)

4️⃣ 교차축 (cross axis) : 주축과 교차하는 방향을 말하며, 기본적으로 위에서 아래로 배치한다. 

 

 

2. 플렉스 박스 항목을 배치하는 속성 

justify-content : 주축 방향의 정렬 방법이다. 

align-items : 교차축 방향의 정렬 방법이다. 

align-self : 교차축에 있는 개별 항목의 정렬 방법이다. 

align-content : 교차축에서 여러 줄로 표시된 항목의 정렬 방법이다. 

 

1️⃣ display 

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어줘야 한다. 

즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다. 

flex : 컨테이너 안의 플렉스 항목을 블록 라벨 요소로 배치한다. 

inline-flex : 컨테이너 안의 플렉스 항목을 인라인 라벨 요소로 배치한다. 

2️⃣ flex-direction 

flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성이다. 

row : 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다. 

row-reverse : 주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치한다. 

column : 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다. 

column-reverse : 주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치한다. 

3️⃣ flew-wrap 

flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다. 

no-wrap : 플렉스 항목을 한 줄에 표시한다. 

wrap : 플렉스 항목을 여러 줄에 표시한다. 

wrap-reverse : 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀐다. 

4️⃣ flex-flow 

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바뀐다. 

기본값은 row no-wrap 이다. 

 

5️⃣ justify-content 

justify-content 속성은 주축에서 플렉스 항목 간의 정렬 방법을 지정한다. 

 

flex-start  : 주축의 시작점에 맞춰 배치

flex-end : 주축의 끝점에 맞춰 배치 

center : 주축의 중앙에 맞춰 배치 

space-between : 첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다. 

space-around : 모든 항목을 주축에 같은 간격으로 배치한다. 

 

6️⃣ align-items 

align-items 속성은 교차축을 기준으로 플렉스 항목을 정렬한다. 

 

flex-start : 교차축의 시작점에 맞춰 배치한다. 

flex-end : 교차축의 끝점에 맞춰 배치한다. 

center : 교차축의 중앙에 맞춰 배치한다. 

baseline : 교차축의 문자 기준선에 맞춰 배치한다. 

stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치한다. 

7️⃣ align-self 

align-self 속성은 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정하지만 그중 특정 항목만 지정하고 싶다면 align-self 속성을 사용한다. 

1,3 box만 배치됨

 

8️⃣ align-content 

align-content 는 주축에서 줄 바뀜에 생겨서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 이용하면 플렉스 항목의 간격을 지정할 수 있다. 

flex-start  : 교차축의 시작점에 맞춰 배치한다. 

flex-end  : 교차축의 끝점에 맞춰 배치한다. 

center : 교차축의 중앙에 맞춰 배치한다. 

space-between : 첫번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치한다. 

space-around: 모든 항목을 교차축에 같은 간격으로 배치한다. 

stretch : 플렉스 항목을 늘려서 교차축에 가득 차게 배치한다. 

* 항상 중앙에 표시하는 방법