flex-direction : row (기본)
main axis(가로) : justify-content (horizontal)
cross axis(세로) : aligin-items (vertical)
flex-direction : column
main axis(가로) : align-items (vertical)
cross axis(세로) : justify-content (horizontal)
flex-wrap : nowrap (기본값)
element 즉 자식들이 무얼 해도 한줄에(같은줄) 있어야한다는 뜻
flex-wrap : wrap
element 즉 자식들의 크기를 유지하라는 것
reverse
-
flex-direction: row-reverse; (오른쪽에서부터 1이 시작)
4321 785
-
column-reverse; (세로로 오른쪽부터 1시작)
4 7 3 6 2 5 1
- flex-wrap: wrap-reverse; (한 줄이 되지 않아도 아래에서 위로 정렬되게)
567
1234 => 이런식으로!
- wrap으로 정렬 시 (여러 줄으로, 각 item의 width를 유지하면서)
각 줄(기본: row) 간의 간격이 생기는데, 이것을 'align-content'라는 property로 조절 가능
align-content (line을 변경, line은 cross-axis에 있는 상태)
- justify-content와 비슷하지만 'line'에 관한 것 (각 block이 여러 행에 걸쳐 나올 때, 행간 공백을 얼마나 둘 건지?)
- align-content: flex-start; - align-content: space-around;
flex-shrink, flex-grow => flexbox의 children 요소에 추가할 수 있는 property 이다.
flexbox의 flex-wrap이 default 값(no-wrap)인 상태일 때는 일정한 비율로 children 요소들이 너비가 줄어들지만 flex-shrink는 말 그대로 shrink이며 원래 크기의 n배만큼 줄어든다. flexbox 안의 children 요소들의 flex-shrink 값은 1이 default이며 flex-shrink 값을 매긴다면 각 요소는 축소 시
==> (원래 요소의 너비) * (해당 요소의 flex-shrink 값 / 전체 요소들의 flex-shrink 값의 총합) 정도 축소가 되겠다.
flex-grow는 flexbox의 children 요소들이 원래 너비 상태를 기준으로 너비를 키우게 되면 남는 여백들을 가지고 flex-grow 값을 가진 요소들에게 너비를 추가시킨다. 모든 요소들의 flex-grow 값은 0이 default이며 flex-grow 값을 매긴다면
==> (원래 너비) + (남는 공백 * (해당 요소의 flex-grow 값 / 전체 요소의 flex-grow 값의 총합)) 정도 너비를 얻게 될 것이다.
flex-basis ==> flexbox의 children 요소에 적용되는 property
flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다.
flex-basis는 main axis(주축) 쪽 크기를 정해준다. 즉, flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다.
