CSS 페이지 레이아웃 3부 - flexbox 정렬 속성

CSS 페이지 레이아웃 속성은 사용자가 원하는 대로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Display Flexbox 정렬 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 3부를 작성했다.

주의사항
1. 모든 예시는 크롬 브라우저 기준이다.
2. 모든 속성을 다루지는 않는다. 예를 들어 justify-content: start처럼 많은 수의 브라우저가 지원하지 않거나 justify-content: safe처럼 특정 브라우저만 지원하는 속성은 다루지 않는다.
3. 플렉스 컨테이너의 시작선과 끝선을 설명할 때 아랍어 방향은 고려하지 않는다.
4. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

Flexbox 정렬 속성 요약

○ 플렉스 컨테이너 기본 동작

– 플렉스 항목은 주축의 시작선의 가장자리에서부터 나열된다.
– flex-direction: row(기본값)가 적용되어 주축의 방향이 inline으로 설정된다.
– flex-wrap: nowrap(기본값)이 적용되어 플렉스 항목이 줄바꿈을 하지 않는다.
– flex: 0, 1, auto(기본값)이 적용되어 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 작으면 각 플렉스 항목의 크기가 플렉스 컨테이너의 크기를 넘어서지 않도록 수축하기 시작하고 최대 각 플렉스 항목의 콘텐츠 크기까지 수축한다. 플렉스 항목의 전체 크기가 각 플렉스 항목의 콘텐츠 크기까지 수축했음에도 플렉스 컨테이너의 크기보다 크다면 플렉스 컨테이너를 넘친다. 다만 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 크더라도 각 플렉스 항목의 크기가 각 플렉스 항목의 콘텐츠 크기를 초과해서 성장하지는 않는다.
– 플렉스 항목이 교차축을 채우기 위해서 교차축의 방향으로 늘어난다.

○ 플렉스 항목이 행으로 나열될 때 예시

flex-direction: row(기본값), flex-wrap: wrap가 적용되어 플렉스 항목이 주축의 왼쪽 시작선부터 오른쪽 끝선까지 행으로 나열되고 줄바꿈을 한다.

○ 플렉스 항목이 열로 나열될 때 예시

flex-direction: column, flex-wrap: wrap가 적용되어 플렉스 항목이 주축의 위쪽 시작선부터 아래쪽 끝선까지 열로 나열되고 줄바꿈을 한다.

Flexbox 정렬 속성

○ place-content

1. 정의

플렉스 컨테이너의 교차축과 주축을 기준으로 플렉스 항목을 정렬하고 플렉스 항목이 나열된 줄 사이의 간격을 제어하는 방법을 설정한다. align-content, justify-content 속성의 단축 구문이다.

2. 코드 사용

place-content: <align-content> <justify-content>
place-content: center flex-end;
place-content: center center;
place-content: flex-end;

값을 하나만 작성했을 때 align-content와 justify-content가 공통적으로 지원하는 값이면 정상적으로 작동하고, 둘 중 하나라도 지원하지 않으면 작동하지 않는다.

3. 호환성

– 인터넷 익스플로러를 지원하지 않는다.
– iOS 사파리 9 버전 이상에서 지원한다.

○ align-content

1. 정의

플렉스 컨테이너의 교차축을 기준으로 플렉스 항목의 줄을 정렬하고 플렉스 항목의 줄 사이의 간격을 제어하는 방법을 설정한다. flex-wrap: wrap에 의해 플렉스 항목이 여러 줄로 나열된 경우에만 정상적으로 작동한다.

2. 코드 사용

align-content: normal;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– iOS 사파리 7 버전에서 align-content를 사용하려면 접두사 -webkit-를 붙여야 한다.
– 인터넷 익스플로러는 align-content: space-evenly, align-content: baseline, align-content: stretch를 지원하지 않는다.
– 속성에 따라 브라우저 지원 사항이 다르기 때문에 사용하기 전에 반드시 모질라 문서를 참고해야 한다.

-webkit-align-content: normal;
align-content: normal;

4. 속성

(1) align-content: normal
기본값이다. align-content: stretch와 동일하게 작동한다.
(2) align-content: stretch
교차축이 block 방향이면 플렉스 항목으로 구성된 각 줄이 플렉스 컨테이너의 전체 높이를 같은 비율로 가득 채우고, 교차축이 inline 방향이면 플렉스 항목으로 구성된 각 줄이 플렉스 컨테이너의 전체 너비를 같은 비율로 가득 채운다.
(3) align-content: flex-start
플렉스 항목의 줄이 교차축의 시작선으로 정렬된다.
(4) align-content: flex-end
플렉스 항목의 줄이 교차축의 끝선으로 정렬된다.
(5) align-content: center
플렉스 항목의 줄이 교차축의 시작선과 끝선의 가운데로 정렬된다.
(6) align-content: space-between
플렉스 항목의 첫 번째 줄이 교차축의 시작선으로 정렬되고 마지막 줄이 교차축의 끝선에 정렬된다. 나머지 줄은 첫 번째 줄과 마지막 줄 사이에 같은 간격으로 정렬된다.
(7) align-content: space-around
플렉스 항목의 줄이 교차축의 시작선과 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다.
(8) align-content: space-evenly
플렉스 항목의 줄이 교차축의 시작선과 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다.
(9) 다루지 않는 속성
baseline, first baseline, last baseline, left, right, sfae, unsafe, start, end

5. 코드 예시

(1) align-content: stretch

– align-content: stretch, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 높이를 같은 비율로 가득 채운다.

– align-content: stretch, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 너비를 같은 비율로 가득 채운다.

(2) align-content: flex-start

– align-content: flex-start, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: flex-start에 의해 플렉스 항목의 줄이 교차축의 위쪽 시작선으로 정렬된다.

– align-content: flex-start, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: flex-start에 의해 플렉스 항목의 줄이 교차축의 왼쪽 시작선으로 정렬된다.

(3) align-content: flex-end

– align-content: flex-end, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: flex-end에 의해 플렉스 항목의 줄이 교차축의 아래쪽 끝선으로 정렬된다.

– align-content: flex-end, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: flex-end에 의해 플렉스 항목의 줄이 교차축의 오른쪽 끝선으로 정렬된다.

(4) align-content: center

– align-content: center, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: center에 의해 플렉스 항목의 줄이 교차축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬된다.

– align-content: center, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: center에 의해 플렉스 항목의 줄이 교차축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬된다.

(5) align-content: space-between

– align-content: space-between, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-between에 의해 플렉스 항목의 첫 번째 행이 교차축의 위쪽 시작선으로 정렬되고, 마지막 행이 교차축의 아래쪽 끝선으로 정렬된다. 나머지 행은 첫 번째 행과 마지막 행 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

– align-content: space-between, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-between에 의해 플렉스 항목의 첫 번째 열이 교차축의 왼쪽 시작선으로 정렬되고, 마지막 열이 교차축의 오른쪽 끝선으로 정렬된다. 나머지 열은 첫 번째 열과 마지막 열 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

(6) align-content: space-around

– align-content: space-around, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-around에 의해 플렉스 항목의 줄이 교차축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

– align-content: space-around, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-around에 의해 플렉스 항목의 줄이 교차축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

(7) align-content: space-evenly

– align-content: space-evenly, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-evenly에 의해 플렉스 항목의 줄이 교차축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

– align-content: space-evenly, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈된다. 그리고 align-content: space-evenly에 의해 플렉스 항목의 줄이 교차축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

○ justify-content

1. 정의

플렉스 컨테이너의 주축을 기준으로 플렉스 항목의 줄을 정렬하고 플렉스 항목의 줄 사이의 간격을 제어하는 방법을 설정한다. 그리고 align-content: stretch(기본값)이 적용된 상태이기 때문에 플렉스 항목으로 구성된 각 줄이 플렉스 컨테이너의 교차축 방향의 크기를 같은 비율로 가득 채우고, align-items: stretch(기본값)이 적용된 상태이기 때문에 플렉스 항목이 각 줄의 교차축 방향의 크기를 가득 채운다.

2. 코드 사용

justify-content: normal;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– iOS 사파리 6.1 버전에서 justify-content를 사용하려면 접두사 -webkit-를 붙여야 한다.
– 인터넷 익스플로러는 justify-items: space-evenly, justify-items: stretch를 지원하지 않는다.
– Flexbox는 justify-content: stretch를 지원하지 않는다.
– 속성에 따라 브라우저 지원 사항이 다르기 때문에 사용하기 전에 반드시 모질라 문서를 참고해야 한다.

-webkit-justify-content: normal;
justify-content: normal;

4. 속성

(1) justify-content: normal
기본값이다. justify-content: flex-start와 동일하게 작동한다.
(2) justify-content: flex-start
플렉스 항목의 줄이 주축의 시작선으로 정렬된다.
(3) justify-content: flex-end
플렉스 항목의 줄이 주축의 끝선으로 정렬된다.
(4) justify-content: center
플렉스 항목의 줄이 주축의 시작선과 끝선의 가운데로 정렬된다.
(5) justify-content: space-between
플렉스 항목의 첫 번째 줄이 주축의 시작선으로 정렬되고 마지막 줄이 주축의 끝선에 정렬된다. 나머지 줄은 첫 번째 줄과 마지막 줄 사이에 같은 간격으로 정렬된다.
(6) justify-content: space-around
플렉스 항목의 줄이 주축의 시작선과 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다.
(7) justify-content: space-evenly
플렉스 항목의 줄이 주축의 시작선과 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다.
(8) 다루지 않는 속성
baseline, first baseline, last baseline, left, right, sfae, unsafe, start, end

5. 코드 예시

(1) justify-content: flex-start

– justify-content: flex-start, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-start, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-start, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-start, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(2) justify-content: flex-end

– justify-content: flex-end, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-end, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-end, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: flex-end, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(3) justify-content: center

– justify-content: center, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: center, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: center, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– justify-content: center, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(4) justify-content: space-between

– justify-content: space-between, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 높이를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 높이를 가득 채운다. 그리고 justify-content: space-between에 의해 플렉스 항목의 첫 번째 열이 주축의 왼쪽 시작선으로 정렬되고, 마지막 열이 주축의 오른쪽 끝선으로 정렬된다. 나머지 열은 첫 번째 열과 마지막 열 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 너비 값의 총 합이 플렉스 컨테이너의 너비 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: flex-start가 적용된 것처럼 플렉스 항목의 줄이 주축의 왼쪽 시작선으로 정렬된 것으로 보인다.

– justify-content: space-between, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 높이를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 높이를 가득 채운다. 그리고 justify-content: space-between에 의해 플렉스 항목의 첫 번째 열이 주축의 왼쪽 시작선으로 정렬되고, 마지막 행이 주축의 오른쪽 끝선으로 정렬된다. 나머지 열은 첫 번째 열과 마지막 열 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

– justify-content: space-between, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 너비를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 너비를 가득 채운다. 그리고 justify-content: space-between에 의해 플렉스 항목의 첫 번째 행이 주축의 위쪽 시작선으로 정렬되고, 마지막 행이 주축의 아래쪽 끝선으로 정렬된다. 나머지 행은 첫 번째 행과 마지막 행 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 높이 값의 총 합이 플렉스 컨테이너의 높이 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: flex-start가 적용된 것처럼 플렉스 항목의 줄이 주축의 위쪽 시작선으로 정렬된 것으로 보인다.

– justify-content: space-between, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 너비를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 너비를 가득 채운다. 그리고 justify-content: space-between에 의해 플렉스 항목의 첫 번째 행이 주축의 위쪽 시작선으로 정렬되고, 마지막 행이 주축의 아래쪽 끝선으로 정렬된다. 나머지 행은 첫 번째 행과 마지막 행 사이에 같은 간격으로 정렬된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

(5) justify-content: space-around

– justify-content: space-around, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 높이를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 높이를 가득 채운다. 그리고 justify-content: space-around에 의해 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 너비 값의 총 합이 플렉스 컨테이너의 너비 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: center가 적용된 것처럼 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬된 것으로 보인다.

– justify-content: space-around, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 높이를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 높이를 가득 채운다. 그리고 justify-content: space-around에 의해 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

– justify-content: space-around, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 너비를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 너비를 가득 채운다. 그리고 justify-content: space-around에 의해 플렉스 항목의 줄이 주축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 높이 값의 총 합이 플렉스 컨테이너의 높이 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: center가 적용된 것처럼 플렉스 항목의 줄이 주축의 위쪽 시작선과 아래쪽쪽 끝선의 가운데로 정렬된 것으로 보인다.

– justify-content: space-around, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 너비를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 너비를 가득 채운다. 그리고 justify-content: space-around에 의해 플렉스 항목의 줄이 주축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 양 옆의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

(6) justify-content: space-evenly

– justify-content: space-evenly, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 높이를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 높이를 가득 채운다. 그리고 justify-content: space-evenly에 의해 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 너비 값의 총 합이 플렉스 컨테이너의 너비 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: center가 적용된 것처럼 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬된 것으로 보인다.

– justify-content: space-evenly, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: row에 의해 주축의 방향이 inline으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 높이를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 높이를 가득 채운다. 그리고 justify-content: space-evenly에 의해 플렉스 항목의 줄이 주축의 왼쪽 시작선과 오른쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 열 사이의 간격이 1px만큼 차이날수 있다.

– justify-content: space-evenly, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: nowrap에 의해 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 배치되고, align-content: stretch에 의해 줄이 플렉스 컨테이너의 전체 너비를 가득 채우고, align-items: stretch에 의해 플렉스 항목이 줄의 너비를 가득 채운다. 그리고 justify-content: space-evenly에 의해 플렉스 항목의 줄이 주축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다. 그리고 플렉스 항목의 높이 값의 총 합이 플렉스 컨테이너의 높이 값보다 크다면 각 플렉스 항목 사이의 간격이 없어지고 justify-content: center가 적용된 것처럼 플렉스 항목이 주축의 위쪽 시작선과 아래쪽쪽 끝선의 가운데로 정렬된 것으로 보인다.

– justify-content: space-evenly, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

display: flex에 의해 플렉스 항목이 주축의 시작선에서부터 나열되고, flex-direction: column에 의해 주축의 방향이 block으로 설정되고, flex-wrap: wrap에 의해 플렉스 항목이 줄바꿈되고, align-content: stretch에 의해 각 줄이 플렉스 컨테이너의 전체 너비를 같은 비율로 가득 채우고, align-items: stretch에 의해 각 줄의 플렉스 항목이 각 줄의 너비를 가득 채운다. 그리고 justify-content: space-evenly에 의해 플렉스 항목의 줄이 주축의 위쪽 시작선과 아래쪽 끝선의 가운데로 정렬되고 각 줄 사이의 간격이 같게 분배된다. 단 브라우저는 픽셀 단위로 정보를 표현하기 때문에 각 행 사이의 간격이 1px만큼 차이날수 있다.

○ place-items

1. 정의

플렉스 컨테이너의 교차축과 주축을 기준으로 모든 직계 자식 플렉스 항목의 align-self 속성과 justify-self 속성을 각각 그룹으로 묶어서 정렬하는 방법을 설정한다. align-items, justify-items 속성의 단축 구문이다.

2. 코드 사용

place-items: <align-items> <justify-items>
place-items: auto center;
place-items: flex-start noraml;

3. 호환성

– 인터넷 익스플로러를 지원하지 않는다.
– iOS 사파리 11 버전 이상에서 지원한다.

○ align-items

1. 정의

플렉스 컨테이너의 교차축을 기준으로 모든 직계 자식 플렉스 항목의 align-self 속성을 그룹으로 묶어서 정렬하는 방법을 설정한다. 그리고 align-content: stretch(기본값)이 적용된 상태이기 때문에 flex-wrap: nowrap(기본값)인 경우 플렉스 항목으로 구성된 줄이 플렉스 컨테이너의 교차축 방향의 크기를 가득 채우고, flex-wrap: wrap인 경우 플렉스 항목으로 구성된 각 줄이 플렉스 컨테이너의 교차축 방향의 크기를 같은 비율로 가득 채운다. 참고로 align-items 속성은 align-content 속성보다 우선되지 않기 때문에 align-content 속성이 기본값 외의 다른 속성으로 변경되면 align-items 속성이 무시된다.

2. 코드 사용

align-items: normal;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– iOS 사파리 7 버전에서 align-items를 사용하려면 접두사 -webkit-를 붙여야 한다.
– 인터넷 익스플로러 10 버전과 11 버전에서 flex-direction: column이 적용된 플렉스 항목에 align-items: center을 적용했을 때 콘텐츠의 크기가 플렉스 컨테이너 보다 클 경우 콘텐츠가 넘치는 버그가 있다.
– 속성에 따라 브라우저 지원 사항이 다르기 때문에 사용하기 전에 반드시 모질라 문서를 참고해야 한다.

-webkit-align-items: normal;
align-items: normal;

4. 속성

(1) align-items: normal
기본값이다. align-items: stretch와 동일하게 작동한다.
(2) align-items: stretch
교차축이 block 방향이고 flex-wrap: nowrap(기본값)이면 플렉스 항목이 줄의 높이를 가득 채우고, flex-wrap이면 각 줄의 플렉스 항목이 각 줄의 높이를 가득 채운다. 교차축이 inline 방향이고 flex-wrap: nowrap(기본값)이면 플렉스 항목이 줄의 너비를 가득 채우고, flex-wrap이면 각 줄의 플렉스 항목이 각 줄의 너비를 가득 채운다.
(3) align-items: flex-start
– 교차축이 block 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 교차축의 위쪽 시작선 방향으로 정렬된다. 그리고 교차축이 block 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 교차축의 위쪽 시작선 방향으로 정렬된다.
– 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 교차축의 왼쪽 시작선 방향으로 정렬된다. 그리고 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 교차축의 왼쪽 시작선 방향으로 정렬된다.
(4) align-items: flex-end
– 교차축이 block 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 교차축의 아래쪽 끝선 방향으로 정렬된다. 그리고 교차축이 block 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 교차축의 아래쪽 끝선 방향으로 정렬된다.
– 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 교차축의 오른쪽 끝선 방향으로 정렬된다. 그리고 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 교차축의 오른쪽 끝선 방향으로 정렬된다.
(5) align-items: center
– 교차축이 block 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 상하 가운데로 정렬된다. 그리고 교차축이 block 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 상하 가운데로 정렬된다.
– 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되지 않으면 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 한 줄에 할당된 공간 내에서 좌우 가운데로 정렬된다. 그리고 교차축이 inline 방향이고 플렉스 항목이 줄바꿈되면 각 줄의 플렉스 항목 그룹이 플렉스 컨테이너의 교차축 방향에 맞춰 각 줄에 할당된 공간 내에서 좌우 가운데로 정렬된다.
(6) 다루지 않는 속성
self-start, self-end, baseline, first baseline, last baseline, left, right, safe, unsafe, start, end

5. 코드 예시

(1) align-items: stretch

– align-items: stretch, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: stretch, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: stretch, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: stretch, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(2) align-items: flex-start

– align-items: flex-start, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-start, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-start, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-start, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(3) align-items: flex-end

– align-items: flex-end, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-end, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-end, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: flex-end, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

(4) align-items: center

– align-items: center, flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: center, flex-direction: row(기본값), flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: center, flex-direction: column, flex-wrap: nowrap(기본값)일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

– align-items: center, flex-direction: column, flex-wrap: wrap일 때

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

○ align-self

1. 정의

플렉스 컨테이너의 교차축을 기준으로 플렉스 항목을 정렬하는 방법을 설정한다. 각 플렉스 항목을 개별적으로 정렬할 수 있다. align-self 속성은 align-items 속성보다 우선되기 때문에 align-self 속성이 사용된 경우 align-items 속성은 무시된다.

2. 코드 사용

align-self: normal;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– iOS 사파리 6.1 버전에서 align-items를 사용하려면 접두사 -webkit-를 붙여야 한다.
– 속성에 따라 브라우저 지원 사항이 다르기 때문에 사용하기 전에 반드시 모질라 문서를 참고해야 한다.

-webkit-align-self: normal;
align-self: normal;

4. 속성

auto는 플렉스 컨테이너에 적용된 align-items 값을 상속받고, normal, stretch, flex-start, flex-end, center는 align-items의 값과 동일하게 작동한다. self-start, self-end, baseline, first baseline, last baseline, safe, unsafe는 다루지 않는다.

5. 코드 예시

– align-items: flex-end, flex-direction: column, flex-wrap: wrap일 때 두 번째 박스에 align-self: flex-start를 적용함.

aaa

bbbb

cccccc

ddd

eeeee

ffffff

ggggg

hhhh

○ 다루지 않는 속성

– justify-items와 jusftify-self는 justify-content와 margin: auto가 있기 때문에 사용할 필요가 없다.
– gap: 행과 열 사이의 간격을 설정한다. 플렉스 레이아웃의 경우 파이어폭스를 제외한 모든 브라우저에서 지원하지 않는다.
– row-gap: 행 사이의 간격을 설정한다. 플렉스 레이아웃의 경우 파이어폭스를 제외한 모든 브라우저에서 지원하지 않는다.
– column-gap: 열 사이의 간격을 설정한다. 플렉스 레이아웃의 경우 파이어폭스와 사파리를 제외한 모든 브라우저에서 지원하지 않는다.

목차

Flexbox 정렬 속성 요약

○ 플렉스 컨테이너 기본 동작

○ 플렉스 항목이 행으로 나열될 때 예시

○ 플렉스 항목이 열로 나열될 때 예시

Flexbox 정렬 속성

○ place-content

1. 정의

2. 코드 사용

3. 호환성

○ align-content

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) align-content: stretch

(2) align-content: flex-start

(3) align-content: flex-end

(4) align-content: center

(5) align-content: space-between

(6) align-content: space-around

(7) align-content: space-evenly

○ justify-content

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) justify-content: flex-start

(2) justify-content: flex-end

(3) justify-content: center

(4) justify-content: space-between

(5) justify-content: space-around

(6) justify-content: space-evenly

○ place-items

1. 정의

2. 코드 사용

3. 호환성

○ align-items

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) align-items: stretch

(2) align-items: flex-start

(3) align-items: flex-end

(4) align-items: center

○ align-self

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

○ 다루지 않는 속성

출처

관련 글

댓글쓰기 응답 취소