공부 이유
1. 잘~ 정리된 블로그글들에서 내가 필요한 layout을 찾아 복붙하는 일들이 많았다. 😓(반성중)
2. 이전에 일할 때 하위 브라우저를 맞춘다는 이유로 잘 안써봄..
3. flexbox에서 overflow:scroll
을 작업하는데 많은 삽질과 많은 시간을 소비하여 문서를 보고 선 파악을 먼저 하였다.
MDN flexbox의 기본 개념
이 문서를 보는게 최고다 👍 문서내 예시에서 직접 값들을 수정하여 확인해보쟈
보면서 정리한 TIL
flexbox 인터페이스 내의 아이템 간 공간 분배
와 정렬
기능 제공한다.
1차원이라고 하는 이유는 한번에 하나의 행 / 혹은 열만 다루기때문이다.
주축
과 교차축
개념을 이해해야함.
flex-direction을 이용하여 주축을 정한다. 이에 수직축을 결정 -> 이는 교차축
1차원이라 설명한 이유와 동일하다. 한가지밖에 설정할 수 없음
현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다.
생성방법 -> display: flex
or display: inline-flex
flex 컨네이터의 direct children들이 바로 flex 항목이 된다.
default 설정
여러행이 나열 될 수 있기 도와준다.
각 행이 새로운 flex 컨테이너, 공간 배분은 해당 행에서만 이루어지고 다른 행은 영향을 받지 않는다.
flex-direction 속성과 flex-wrap 속성을 flex-flow에 합쳐서 쓸 수 있다.
item의 크기를 결정한다.
default flex-basis: auto
지정되어 있지 않다면 item의 내용물 크기가 flex-basis 값으로 사용된다.
flex item별로 주축 방향 크기를 설정 할 수 있다. 남는 공간을 항목들에게 분배하는 방법
을 결정한다.
3개의 item이 있고 flex-grow: 2
, flex-grow: 1
, flex-grow: 1
로 지정한다면 2:1:1의 비율이 된다.
공간이 부족할 때 각 항목의 사이즈를 줄이는 방법
을 정의한다.
flex-basis에 지정된 크기보다 작아진다.
flex-basis, flex-grow, flex-shrink를 한꺼번에 쓰는 축약형
순서는
flex-grow, flex-shrink, flex-basis
순이다.
미리 정의된 축약 값들
initial -> 0(grow) 1(shrink) auto(basis)
grow가 0, flex-basis 값보다 커지지 않고,
shrink 1, 공간이 부족하면 크기가 줄어든다.
basis가 auto이기 때문에 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지
auto -> 1(grow) 1(shrink) auto(basis)
여유 공간이 있을 때 채운다.
none -> 0(grow) 0(shrink) auto(basis)
컨테이너의 크기변화에도 flex의 item의 크기가 변하지 않는다.
2, 더 축약한 값
flex 컨테이너에 지정하는 속성, item들의 열을 정렬하는 방식
행을 정렬하는 방식
default값