1) Flex
- 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성을 말한다.
flex 속성 종류
1) display
- Flex Container의 화면 출력 특성을 말한다.
flex : 블록 요소와 같이 Flex Container 정의
inline-flex : 인라인 요소와 같이 Flex Container 정의
2) flex-direction
- flex의 주 축을 설정하는 특성을 말한다
row : 행축(좌 -> 우)
row-reverse : 행축(우 -> 좌)
column : 열축(위 -> 아래)
column-reverse : 열축(아래 -> 위)
Tip)
- row : 수평
- column : 수직
- (row, coulmn) reverse : 정 반대
3) flex-wrap
- Flex Items 묶음(줄 바꿈) 여부
nowrap : 묶음(줄 바꿈) 없음
wrap : 여러 줄로 묶음
wrap-reverse : wrap의 반대 방향으로 묶음
4) justify-content
- flex의 주 축을 정렬을 설정하는 특성을 말한다
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데로 정렬
space-between : 각 Flex Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
5) align-content
- flex의 교차 축(수직)을 여러 줄로 정렬을 설정하는 특성을 말한다
stretch : Flex Items를 시작점으로 정렬(기본 값)
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데로 정렬
space-between : 각 Flex Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
6) align-items
- flex의 교차 축(수직)을 한 줄로 정렬을 설정하는 특성을 말한다
stretch : Flex Items를 시작점으로 정렬(기본 값)
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데로 정렬
baseline : Flex Items를 각 줄의 문자 기준선에 정렬
7) order
- Flex Item의 순서를 말한다
0 : 순서 없음
숫자 : 숫자가 작을수록 앞에 먼저 정렬 됨
8) flex-glow
- Flex Item의 증가 너비 비율을 말한다
0 : 증가 비율 없음 (기본값)
숫자 : 증가 비율
9) flex-shrink
- Flex Item의 감소 너비 비율을 말한다
1 : Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율
10) flex-basis
- Flex item의 공간 배분전 기본 너비를 말한다
auto : 요소의 Content 너비
단위 : px, em, rem 등 단위로 지정
