Day 20 CSS 속성 (5) 플렉스

2022-04-18

display:flex 가 부여된 요소는 Flex Container가 되고, Flex Container의 자식 요소는 Flex Items가 된다.
이때 Flex Items는 수평으로 쌓이게 된다.

display

Flex Container의 화면 출력(보여짐) 특성

flex 블록 요소와 같이 Flex Container 정의
inline-flex 인라인 요소와 같이 Flex Container 정의

flex-direction

주 축을 설정

기본값 row 행 축 (좌 => 우)
row-reverse 행 축 (우 => 좌)
column 열 축 (위 => 아래)
column-reverse 열 축 (아래 => 위)

flex-wrap

Flex Items 묶음 (줄 바꿈) 여부

기본값 nowrap 묶음(줄 바꿈) 없음
wrap 여러 줄로 묶음
wrap-reverse wrap의 반대 방향으로 묶음

justify-content

주 축의 정렬 방법

기본값 flex-start Flex Items를 시작점으로 정렬
flex-end Flex Items를 끝점으로 정렬
center Flex Items를 가운데 정렬
space-between 각 Flex Item 사이를 균등하게 정렬
space-around 각 Flex Item의 외부 여백을 균등하게 정렬

align-content

교차 측의 여러 줄 정렬 방법

기본값 stretch Flex Items를 시작점으로 정렬
flex-start Flex Items를 시작점으로 정렬
flex-end Flex Items를 끝점으로 정렬
center Flex Items를 가운데 정렬
space-between 각 Flex Item 사이를 균등하게 정렬
space-around 각 Flex Item의 외부 여백을 균등하게 정렬

align-items

주 축의 정렬 방법

기본값 stretch Flex Items를 교차 축으로 늘림
flex-start Flex Items를 각 줄의 시작점으로 정렬
flex-end Flex Items를 각 줄의 끝점으로 정렬
center Flex Items를 각 줄의 가운데 정렬

order

Flex Item의 순서

기본값 0 순서 없음
숫자 숫자가 작을 수록 먼저

flex-grow

Flex Item의 증가 너비 비율

기본값 0 증가 비율 없음
숫자 증가 비율

flex-shrink

Flex Item의 감소 너비 비율

기본값 1 Flex Container 너비에 따라 감소 비율 적용
숫자 감소 비율

flex-basis

Flex Item의 공간 배분 전 기본 너비

기본값 auto 요소의 Content 너비
단위 px, em, rem