flex
헷갈리는 부분 다시 정리
- 교차 축 정렬
- align-items 내부 아이템들이 한줄
- align-content 내부 아이템들이 2줄이상
- align-self 내부 아이템들을 개별적으로 정렬
- flex-flow
- flex-flow: flex-direction flex-wrap
- flex-direction: row column (-reverse)
- flex-wrap: nowrap wrap(-reverse)
- flex-flow: flex-direction flex-wrap
- display
- flex => 본인은 block 내부 아이템들은 수평
- inline-flex => 본인 inline 내부 아이템들은 수평
-
order: -1 0 1 2 3 아이템의 순서 부여
- flex: flex-grow(0), flex-shrink(1), flex-basis(auto)
- flex: 1 => 1 1 0 을 의미 basis는 생략시 0
- flex-grow
- 0 이면 부모의 크기가 늘어나도 자신의 크기를 지킴
- 0,1 이 있으면 100px 늘어날때 1만 100px 늘어남
- 1,2,3 1은 1/6 2는 2/6 3은 3/6 의 영역을 차지
- flex-shrink
- 사용빈도가 높지 않은 까다로운 계산방식을 사용
- 요소의 너비 비율이 2:1 이고 shrink 2,1을 줄때
2x2 1x1 이되어 줄어드는 비율이 4/5, 1/5 가 된다
- flex-basis
- 공간 배분 전 기본 너비를 설정
- 0 일때
- 아이템의 자체 너비를 기준으로 한다
- auto 일때
- 아이템 내부의 콘텐츠(글자)너비를 제한 부분이 계산됨
- 특정 너비 일때
- 특정 너비를 아이템에서 제한 부분이 계산됨