main axis 왼 -> 오
flex-direction: row; 기본
flex-direction: row-reverse 수평거꾸로
felx-direction: column 수직
flex-direction: column-reverse 수직거꾸로
justify-content: center 가운데모음
justify-content: space-between 요소와 컨테이너 빈공간 x
justify-content: space-around 빈공간 x 여백 o
justify-content: space-evenly 빈공간 x 여백 o 컨테이너와 요소 여백 o
flex-wrap 주축이 수평일때 새로운 행을 만들어 요소를 정렬하고, 주축이 수직일때는 새로운 열을 만들어 요소를 정렬
align-items 교차축(cross axis)에 따라 아이템을 배열
align-content 행이나 열이 여러개일때 교차축을 기준으로 배열
flex-basis 요소가 배치되기 전 요소의 최초 크기 결정
flex-grow 공간이 있을때 요소가 그 공간을 얼마나 차지할 것인지 결정
flex-shrink 요소들이 줄어드는 비율을 통제
flex : basis, grow, shrink의 세가지 요소를 모두 사용 가능