1. 플렉스 컨테이너 (부모 박스)

부모 박스를 플렉스 컨테이너로 작동하게 하는 속성 (display: )

• flex : 플렉스 항목을 블록 레벨 요소로 배치
• inline-flex : 플렉스 항목을 인라인 레벨 요소로 배치

주축의 방향을 지정하는 속성 (flex-direction: )

• row : 주축은 가로, 왼쪽에서 오른쪽으로 배치
• row-reverse : 주축은 가로, 오른쪽에서 왼쪽으로 배치
• column : 주축은 세로, 위에서 아래로 배치
• column-reverse : 주축은 세로, 아래에서 위로 배치

플렉스 항목의 줄을 바꾸는 속성 (flex-wrap: )

• nowrap : 플렉스 항목을 한 줄에 표시
• wrap : 여러 줄에 표시
• wrap-reverse : 아래에서 위로 여러줄에 표시

플렉스 항목(자식 박스)를 배치하는 속성

• justify-content : 주축 방향의 정렬 방법
• align-items : 교차축 방향의 정렬 방법
• align-self : 교차축에 있는 개별 항목의 정렬 방법 (개별 플렉스 항목에서 사용)
• align-content : 교차축에서 여러 줄로 표시된 항목의 정렬 방법

주축 정렬 방식 (justify-content: )

• flex-start : 주축의 시작점에 맞춰 배치
• flex-end : 주축의 끝점에 맞춰 배치
• center : 주축의 중앙에 맞춰 배치
• space-between : 주축의 시작점과 끝점에 시작항목과 끝항목이 위치하고 나머지는 동일 간격으로 배치
• space-around : 모든 항목을 같은 간격으로 배치

교차축 정렬 방식 (align-items: )

• flex-start : 교차축의 시작점에 맞춰 배치
• flex-end : 교차축의 끝점에 맞춰 배치
• center : 교차축의 중앙에 맞춰 배치
• baseline : 교차축의 문자 기준선에 맞춰 배치
• stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치

여러 줄일 때 플렉스 항목간의 교차축 간격 지정 방식 (align-content: )

• flex-start : 교차축의 시작점에 맞춰 배치
• flex-end : 교차축의 끝점에 맞춰 배치
• center : 교차축의 중앙에 맞춰 배치
• space-between : 교차의 시작점과 끝점에 시작항목과 끝항목이 위치하고 나머지는 동일 간격으로 배치
• space-around : 모든 항목을 같은 간격으로 배치
• stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치

2. 플렉스 항목 (자식 박스)

플렉스 항목의 순서

각 항목에 (order: number)를 지정하여 순서를 지정한다. 숫자가 작을 수록 시작점에 가까이 위치한다.

플렉스 항목의 증가 너비 비율 (flex-grow: )

기본값은 0, 플렉스 컨테이너가 증가 할 때 각 플렉스 항목이 가질 수 있는 증가율을 나타낸다.

.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
.item:nth-child(4) { flex-grow: 2; }

플렉스 항목의 감소 너비 비율 (flex-shrink: )

기본값은 1, 플렉스 컨테이너가 감소하여 플렉스 항목의 너비에 영향을 주는 경우, 영향을 주기 시작한 지점부터 플렉스 컨테이너가 줄어든 길이만큼을 flex-shrink 값에 따라 비율에 맞춰 나눈 다음에 각 플렉스 항목을 수축시킨다.

.item:nth-child(1) { flex-shrink: 0; }
.item:nth-child(2) { flex-shrink: 2; }
.item:nth-child(3) { flex-shrink: 1; }
.item:nth-child(4) { flex-shrink: 0; }

플렉스 항목의 기본 너비 (flex-basis: )

기본값은 auto, grow 하거나 shrink 하기 전 플렉스 항목의 기본 너비를 설정한다. auto인 경우 width, height 속성으로 크기를 설정한다.

.item:nth-child(1) { flex-basis: 100px; }
.item:nth-child(2) { flex-basis: 100px; }
.item:nth-child(3) { flex-basis: 120px; }
.item:nth-child(4) { flex-basis: 120px; }