flex 레이아웃을 정복해보자~! 총정리 !! flex-direction/flex-wrap/justify-content/align-items/align-content

flex-direction

 

/* flat:left, 기본값: flex-direction: row*/

display: flex;

/* 왼쪽에서 오른쪽 배치 */

flex-direction: row;

/* 오른쪽에서 왼쪽으로 배치 */

flex-direction: row-reverse;

/* 아래에서 위로 배치 */

flex-direction: column-reverse;

• row: 왼쪽에서 오른쪽으로 주축을 따라 배치. (기본값)
• row-reverse: 오른쪽에서 왼쪽으로 주축을 따라 배치.
• column: 위에서 아래로 주축을 따라 배치.
• column-reverse: 아래에서 위로 주축을 따라 배치.

 

flex-wrap

 

/* 기본값 flex-direction:row, flex-wrap: nowrap */

display: flex;

/* 한줄에 표시 default, box사이즈 변화있음 */

flex-wrap: wrap;

/* 여러줄로 표시, box원래사이즈 유지함*/

flex-wrap: wrap;

/* 여러줄로 표시, 시작점과 끝점이 바꿔서 */

flex-wrap: wrap-reverse;

• nowrap: 항목들이 한 줄에 모두 배치되어 줄바꿈이 되지 않는다. (기본값)
• wrap: 항목들이 여러 줄로 나뉘어 배치.
• wrap-reverse: 항목들이 여러 줄로 나뉘어 배치되되, 역순으로 배치.

 

justify-content

 

/* 주축기준(왼->오)) 정렬 */

display: flex;

 

/* 주축 시작점 기준으로 배치 */

justify-content: flex-start;

/* 주축 끝기준으로 배치 */

justify-content: flex-end;

/* 추축 중앙 기준으로 배치 */

justify-content: center;

/* 시작점과 끝점 배치 후 중간을 같은 간격으로 배치 */

justify-content: space-between;

/* 전체항목을 같은 간격으로 배치 */

justify-content: space-around;

• flex-start: 항목들을 컨테이너의 시작 부분에 정렬. (기본값)
• flex-end: 항목들을 컨테이너의 끝 부분에 정렬.
• center: 항목들을 컨테이너의 가운데에 정렬.
• space-between: 첫 번째 항목은 컨테이너의 시작 부분에, 마지막 항목은 컨테이너의 끝 부분에 정렬하고, 나머지 항목들을 동일한 간격으로 배치.
• space-around: 항목들을 동일한 간격으로 배치하고 양쪽에 여백을 동일하게 분배.
• space-evenly: 항목들을 동일한 간격으로 배치하고 여백을 동일하게 분배합니다. 첫 번째와 마지막 항목은 컨테이너의 시작과 끝에 정렬.

 

align-items

 

/* 교차축 정렬 */

/* 시작점 기준으로 배치 */

align-items: flex-start;

/* 끝점 기준 */

align-items: flex-end;

/* 중앙기준 */

align-items: center;

/* 문자선 기준 */

align-items: baseline;

/* 항목을 늘려서 */

align-items: stretch;

• flex-start: 항목들을 컨테이너의 시작 부분에 정렬. (기본값)
• flex-end: 항목들을 컨테이너의 끝 부분에 정렬.
• center: 항목들을 컨테이너의 세로 중앙에 정렬.
• baseline: 항목들을 컨테이너의 베이스라인에 정렬. (텍스트에 맞춰서)
• stretch: 항목들을 컨테이너의 높이에 맞게 늘림.

 

align-content

 

/* 교차축 기준 */

/* 시작점 */

align-content: flex-start;

/* 끝점 */

align-content: flex-end;

/* 중간 */

align-content: center;

/* 시작점과 끝점 배치 후 중간 같은간격 */

align-content: space-between;

/*전체항목 같은간격*/

align-content: space-around;

 

/* 항목을 늘려서 교차축에 가득차게 */

align-content: stretch;

• flex-start: 항목들을 컨테이너의 시작 부분에 정렬.
• flex-end: 항목들을 컨테이너의 끝 부분에 정렬.
• center: 항목들을 컨테이너의 세로 중앙에 정렬.
• space-between: 항목들 사이에 동일한 간격을 만들어 정렬.
• space-around: 항목들 주위에 동일한 간격을 만들어 정렬.
• stretch: 항목들을 컨테이너의 높이에 맞게 늘림. (기본값)