CSS Flexbox 플렉스 박스 / display / flex-direction / flex-wrap / align-content > 웹 무료강의

CSS CSS Flexbox 플렉스 박스 / display / flex-direction / flex-wrap / align-cont…

작성자 모던DS
조회 68회

CSS Flexbox 플렉스 박스

display / flex-direction / flex-wrap / align-content

모든 Flex 레이아웃은 부모 요소에 이 한 줄을 적는 것부터 시작합니다.

display: flex

배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정합니다.

종류	설명
flex	컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다.
inline-flex	컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치합니다.

방향 정하기 (flex-direction)

아이템을 어느 방향으로 세울지 결정합니다. flex-direction: row flex-direction: column flex-direction: row-reverse flex-direction: column-reverse

플렉스 항목의 배치를 위해 주축과 방향을 지정합니다.

종류	설명
row	주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치합니다. 기본값입니다.
row-reverse	주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치합니다.
column	주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치합니다.
column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치합니다.

박스가 넘칠 때 다음 줄로 넘길지 결정합니다. flex-wrap: nowrap flex-wrap: wrap flex-wrap: wrap-reverse

종류	설명
nowrap	플렉스 항목을 한 줄에 표시합니다. 기본값입니다.
wrap	플렉스 항목을 여러 줄에 표시합니다.
wrap-reverse	플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀝니다.

flex-wrap: wrap 설정으로 인해 플렉스 항목이 두 줄 이상 되었을 때, 줄 사이의 간격과 정렬을 결정합니다.

종류	설명
stretch	모든 줄을 교차축에 가득 차게 늘립니다. 기본값입니다.
flex-start	모든 줄을 교차축의 시작점에 맞춰 배치합니다.
flex-end	모든 줄을 교차축의 끝점에 맞춰 배치합니다.
center	모든 줄을 교차축의 중앙에 배치합니다.
space-between	첫 번째 줄은 시작점에, 마지막 줄은 끝점에 배치하고 나머지는 동일 간격으로 벌립니다.
space-around	모든 줄을 동일한 간격으로 벌리되, 양 끝은 간격의 절반만 차지합니다.