display
display:flex
선언해줌
flex-direction
기본값은 row. 왼쪽에서 오른쪽으로 가는 열 방향.
row-reverse : 오른쪽에서 왼쪽으로 가는 열 방향.
cloumn : 위에서 아래로 가는 행 방향
column-rever : 아래에서 위로 가는 행 방향
(즉, row / column이 중심축 결정)
flex-wrap
기본값은 nowrap.
한줄에 가득 차면 다음줄로 넘길것인지, 빼곡하게 한줄로 채울것인지 결정
flex-flow
flex direction, wrap을 동시에 기술할 수 있음
justify-content
중심축을 기준으로 아이템을 어떻게 배치할건지.
flex-start : 앞에서부터 배치
flex-end: 뒤에서부터 배치
center: 가운데 정렬
space-around : 박스를 둘러싸는 space
space-evenly
space-between
align-items
반대축을 기준으로 아이템을 어떻게 배치할건지
기본값 baseline : 컨테이너 시작 위치에 정렬
flex-start : 컨테이너의 꼭대기에 정렬
flex-end
center
stretch
align-content
center
order
item의 순서 지정
flex-grow
컨테이너의 크기가 커짐에 따라 아이템의 크기가 얼마나, 어떻게 커질지?
기본값은 0
flex-shrink
컨테이너의 크기가 작아지메 따라 아이템의 크기가 얼마나, 어떻게 작아질지?
flex-basis
아이템이 얼마나 공간을 차지할지, 더 세부적으로 지정
(%로 지정)
align-self
개별요소에 적용할 수 있는 속성.
align-items가 사용하는 모든 값 사용 가능하며, 지정한 요소에만 적용됨.
height : 100%;
와 height : 100vh;
의 차이
100%는, 해당 태그의 부모태그 기준 100%임.
따라서 뷰포트 전체에 100%를 적용시키려면
body, html의 height을 100%으로 적용시켜야 함.
vh는 view height.