[ CSS ] flex

flex

- 레이아웃 쉽게 구성가능

- 수평구조뿐만아니라 수직구성도 가능

 

justify-content : 주 축의 정렬 방법을 설정

flex-start: 컨테이너의 주축 시작 부분에 항목 그룹화

flex-end: 주축 끝에서 항목 그룹화

center: 주축의 중심에 그룹 항목

space-between: 첫 번째 항목이 시작 부분에 정렬되고 마지막 항목이 끝 부분에 정렬되도록 기본 축을 따라 항목을 균등하게 배포합니다.

space-around: 모든 항목이 주위에 동일한 공간을 갖도록 항목을 주축을 따라 균등하게 분배합니다.

 

align-content : 교차 축의 정렬 방법을 설정 ( 2줄 이상 )

 

align-items : 교차 축에서 Items의 정렬 방법을 설정 ( 1줄 )

flex-start: 컨테이너의 교차 축 시작 부분을 따라 항목 정렬

flex-end: 교차 축 끝을 따라 항목 정렬

center: 교차 축의 중심을 따라 항목 정렬

 

flex-direction : Flex Items의 주 축을 설정

row: 주축을 왼쪽에서 오른쪽으로 배치

row-reverse: 주축을 오른쪽에서 왼쪽으로 배치

column: 주축을 위에서 아래로 배치

column-reverse: 주축을 아래에서 위로 배치

 

order

항목이 나타나는 플렉스 용기 모두 양 및 음의 정수 값을 전달하는 순서를 정의한다. 

 

align-self

flex-start: 컨테이너의 교차 축 시작 부분에 항목 정렬

flex-end: 교차 축의 끝에 항목 정렬

center: 가로축의 중심에 항목 정렬

 

flex-flow : flex-direction과 flex-wrap의 단축 속성

 

flex-wrap : Flex Items의 여러 줄 묶음 ( 줄바꿈 ) 설정