Flex Container
- display : Flex Container를 정의
- flex : Block 특성의 Flex Container를 정의
- inline-flex : Inline 특성의 Flex Container를 정의
- flex-flow: flex-direction flex-wrap;
- flex-direction : Flex Items의 주 축(main-axis)을 설정
- row : Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 (기본값)
- row-reverse : Items를 row의 반대 축으로 표시
- column : Items를 수직축(위에서 아래로)으로 표시
- column-reverse : Items를 column의 반대 축으로 표시
- flex-wrap : Flex Items의 여러 줄 묶음(줄 바꿈) 설정
- nowrap : 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) (기본값)
- wrap : Items를 여러 줄로 묶음
- wrap-reverse : Items를 wrap의 역 방향으로 여러 줄로 묶음
- justify-content : 주 축(main-axis)의 정렬 방법을 설정
- flex-start : Items를 시작점(flex-start)으로 정렬 (기본값)
- flex-end : Items를 끝점(flex-end)으로 정렬
- center : Items를 가운데 정렬
- space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
- space-around : Items를 균등한 여백을 포함하여 정렬
- align-content : 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
- stretch : Container의 교차 축을 채우기 위해 Items를 늘림 (기본값)
- flex-start : Items를 시작점(flex-start)으로 정렬
- flex-end : Items를 끝점(flex-end)으로 정렬
- center : Items를 가운데 정렬
- space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
- space-around : Items를 균등한 여백을 포함하여 정렬
- align-items : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)
- stretch : Container의 교차 축을 채우기 위해 Items를 늘림 (기본값)
- flex-start : Items를 각 줄의 시작점(flex-start)으로 정렬
- flex-end : Items를 각 줄의 끝점(flex-end)으로 정렬
- center : Items를 가운데 정렬
- baseline : Items를 문자 기준선에 정렬
Flex Items
- order Flex Item의 순서를 설정
- 숫자 : Item의 순서를 설정 (기본값:0)
- flex: flex-grow, flex-shrink, flex-basis;
- flex-grow Flex Item의 증가 너비 비율을 설정
- 숫자 : Item의 증가 너비 비율을 설정 (기본값:0)
- flex-shrink Flex Item의 감소 너비 비율을 설정
- 숫자 : Item의 감소 너비 비율을 설정 (기본값:1)
- flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
- auto : 가변 Item과 같은 너비 (기본값)
- 단위 : px, em, cm 등 단위로 지정
- align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정
- auto : Container의 align-items 속성을 상속받음 (기본값)
- stretch : Container의 교차 축을 채우기 위해 Item을 늘림
- flex-start : Item을 각 줄의 시작점(flex-start)으로 정렬
- flex-end : Item을 각 줄의 끝점(flex-end)으로 정렬
- center : Item을 가운데 정렬
- baseline : Item을 문자 기준선에 정렬
https://css-tricks.com/snippets/css/a-guide-to-flexbox/