display : flex
로 flexible 하게 만들기
justify-content
가로선 정렬
- start
- end
- center
- space-between: 요소들 사이에 동일한 간격 주기
- space-around : 요소들 주의에 동일한 간격 주기
align-items
세로선 정렬
- start
- end
- center
- baseline : 컨테이너의 시작 위치에 정렬
flex-direction
정렬할 방향 지정하기 ( column 으로 하면 가로 세로 바뀜)
- row (기본값)
- row-reverse
- column : 세로 방향
- column-reverse
order
순서를 지정할 수 있다.
align-self
지정된 align-items의 속성을 무시하고 개별 속성을 갖게 할 수 있다.
- start
- end
- center
- baseline : 컨테이너의 시작 위치에 정렬
flex-wrap
flex 요소들을 한줄 또는 여러줄에 거쳐서 배치한다.
- nowrap (기본값) : 한줄에 배치한다.
- wrap : 여러 줄에 걸쳐 정렬한다.
- wrap-reverse : 여러줄에 걸쳐 반대로 정렬한다.
flex-flow
flex-direction과 flex-wrap을 한번에 사용하기
ex) flex-flow : column wrap
flex-flow : row nowrap
align-content
여러 줄 사이의 간격 지정 가능
- start
- end
- center
- space-between
- space-around
- space-evenly