[CSS] flex 용어 정리

정의 : 1차원 레이아웃

기본값은 세로정렬인데 flex를 사용하게 되면 가로 정렬이 기본으로 된다.

플렉스는 기본적으로 크기를 설정해도 한 화면 안에 다 나오려고 하다보니 크기가 조금 변형이 된다. 이것이 싫다면

flex-wrap : wrap ;으로 설정해주면 된다. (기본값은 no-wrap)

그렇게 하면 item이 화면 크기가 변함에 따라 아래로 배치된다.

flex-direction

column : 세로 정렬
column-reverse : 세로로 밑에서 부터 정렬
row,initial : (기본값) 가로 정렬
row-reverse : 가로로 오른쪽에서 부터 정렬된다.
inherit : 부모요소의 설정값을 사용한다.

justify-content

flex-start : 요소들을 시작(왼쪽) 정렬한다.
flex-end : 요소들을 끝(오른쪽) 정렬한다.
center : 요소들을 가운데 정렬한다.
space-between :요소들 사이에 동일한 간격을 둔다.
space-around :요소들 주위에 동일한 간격을 둔다.

flex-wrap : 종류

wrap : 부모 넓이 보다 요소들의 총 넓이가 크다면 나머지 요소들을 다음줄로 줄바꿈

no-wrap , inherit : (기본값) 부모넓이에 맞게 요소들의 넓이를 강제로  축소시킨다. 

wrap-reverse : 줄바꿈 하는 요소들을 역순으로 배열

inherit :부모요소의 설정값을 사용한다

flex-flow

flex-direction 과 flex-wrap은 자주 같이 사용되므로 
flex-flow 로 한꺼번에 선언이 가능하다.

ex) flex-direction:row
	flex-wrap:wrap
-> flex-flow : row wrap 

align-content

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

align-items

flex-start:요소들을 시작점(컨테이너의 윗쪽)정렬한다.
flex-end:요소들을 끝부분(컨테이너의 바닥)정렬한다.
center:요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.
baseline : 요소들을 컨테이너의 시작위치에 정렬한다.
stretch:요소들을 컨테이너에 맞도록 늘린다.

align-self

특정아이템의 정렬을 따로 정하고 싶다면 해당 item으로 가서 align-self를 사용한다.
사용법은 align-items와 동일

order

플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정함.
1 또는 -1