[CSS] Flex 완벽 정리

 

후후 이제 확실하게 알았다!!!!

 

flex

 

- 적용하고자 하는 자식 element의 부모 element에 적용할 것

justify-content :  (가로)	flex-start	요소들을 컨테이너의 왼쪽으로 정렬	default
	flex-end	요소들을 컨테이너의 오른쪽으로 정렬
	center	요소들을 컨테이너의 가운데로 정렬
	space-between	요소들 사이에 동일한 간격을 둠
	space-around	요소들 주위에 동일한 간격을 둠

 

 

aglin-items :  (세로)	flex-start	요소들을 컨테이너의 꼭대기로 정렬
	flex-end	요소들을 컨테이너의 바닥으로 정렬
	center	요소들을 컨테이너의 세로선 상의 가운데로 정렬
	baseline	요소들을 컨테이너의 시작 위치에 정렬
	stretch	요소들을 컨테이너에 맞도록 늘림	default

 

 

★ flex-direction의 방향이 column일 경우 justify-content 방향이 세로 / aglin-items방향이 가로가 됨

flex-direction :  (방향)	row	요소들을 텍스트의 방향과 동일하게 정렬	default
	row-reverse	요소들을 텍스트의 반대 방향으로 정렬
	column	요소들을 위에서 아래로 정렬
	column-reverse	요소들을 아래에서 위로 정렬

 

flex-wrap :  (정렬)	nowarp	모든 요소들을 한 줄에 정렬	default
	wrap	요소들을 여러 줄에 걸쳐 정렬
	wrap-reverse	요소들을 여러 줄에 걸쳐 반대로 정렬

 

flex-flow : (flex-direction과 flex-wrap 동시 적용)	flex-direction	flex-wrap
	row	nowarp
	row-reverse	wrap
	column	wrap-reverse
	column-reverse

 

 

align-content :	flex-start	여러 줄들을 컨테이너의 꼭대기에 정렬
	flex-end	여러 줄들을 컨테이너의 바닥에 정렬
	center	여러 줄들을 세로선 상의 가운데에 정렬
	space-between	여러 줄들 사이에 동일한 간격을 둠
	space-around	여러 줄들 주위에 동일한 간격을 둠
	stretch	여러 줄들을 컨테이너에 맞도록 늘림	default

 

 

 

 

flex items

- 적용하고자 하는 자식 element에 직접 적용

order :	음수 0 정수	- 0이 default
		- 적용된 element의 순서 결정
		- 숫자가 클 수 록 순서가 뒤로 밀림
		- HTML 구조와 상관없이 변경 가능

 

 

align-self :	flex-start	요소를 컨테이너의 꼭대기로 정렬	- aglin-items와 같음
	flex-end	요소를 컨테이너의 바닥으로 정렬	- 개별 요소 적용 가능
	center	요소를 컨테이너의 세로선 상의 가운데로 정렬
	baseline	요소를 컨테이너의 시작 위치에 정렬
	stretch	요소를 컨테이너에 맞도록 늘림	default