반응형
7. Flexbox
1) flexbox
✔ flexbox의 개요
- 1차원 직선의 형태로 요소를 정리하기 위함
- 부모 자식 관계가 성립 되어야 적용할 수 있음
✔ 용어 - flex container, flex item, main axis, cross axis
- flex container : 아이템을 감싸는 부모 영역
- flex item : 내부 정렬을 위한 요소들
- main axis : 주축, 가로로 흐름
- cross axis : 교차축, 세로로 흐름
✔ container - display
블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
- 바깥쪽 : block, inline...외부 요소와의 관계 정의
- 안쪽 : flex, grid...내부 아이템 레이아웃 정의
- inline-flex도 가능
✔ container - flex-direction
flex container 내 아이템을 배치할 때 사용할 주축 및 방향을 지정한다.
- 주축의 위치 (H, V), 주축의 방향 (정, 역) 설정 가능
row: defaultrow-reverse: row와 동일하지만 시작점, 끝점이 반대column: 주축이 블록 축과 동일column-reverse: column과 동일하지만 시작점, 끝점이 반대
✔ container - flex-wrap, flex-flow (shorthand)
- flex-wrap
- flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 영역 내에서 여러행으로 나눌 것인지 결정
- 영역 내에서 벗어나지 못하게 설정 시 동시에 요소의 방향 축 결정 가능
nowrap: default, 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치함wrap: 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치됨. 위에서 아래로 쌓임
- flex-flow
- flex-direction, flex-wrap의 단축 속성
✔ item - order
flex 또는 frid container 안에서 현재 요소의 배치 순서를 지정한다.
- container item의 정렬 순서는 오름차순 order 값
- 같은 값일 경우 소스 코드의 순서대로 정렬
- z-index와 반대로 음수가 앞으로 감
✔ item - flex-grow
flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.
- 형제 요소로 item 요소들이 동일한 grow 값을 가질 때, 내부에서도 동일한 공간을 할당
- 남은 영역만큼 요소가 나누어 커짐
- number 사용 가능. 음수값은 허용되지 않음
- 대게 shrink, basis 와 함께 사용함
✔ item - flex-shrink
item 요소의 크기가 container 요소의 크기보다 클 때 flex-shrink 속성을 사용한다.
- 설정된 숫자 값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됨
- 줄어든 영역만큼 요소가 나누어 줄어듦
- grow와 반대로 더이상 줄어들지 않게 함
✔ item - flex-basis
flex item의 초기 크기를 지정한다.
- box-sizing을 따로 지저하지 않으면 콘텐츠 박스의 크기를 변경함
- 요소에 설정한 basis를 제외한 영역만큼 grow, shrink가 차지
✔ item - flex (shorthand)
하나의 flex item이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정한다.
- grow, shrink, basis의 shorthand임
- 값이 한 개일 때
- number를 지정하면 grow임
- length 또는 percetage를 지정하면 basis임
- none, auto, initail 중 하나 지정 가능
- 값이 두 개일 때
- 첫 번째 값은 number여야 함
- 두 번째 number를 지정하면 shrink임
- length, percentage 또는 auto를 지정하면 basis임
- 값이 세 개일 때
- flex-grow(num) > flex-shrink(num) > flex-basis(length, percentage or auto)
- initial
- 아이템 크기가 각각의 width, height 속성에 따라 정해짐
- 최소 크기로 줄어들 수는 있지만 남은 공간을 채우려 늘어나지는 않음 = flex: 0 1 auto
- auto
- 크기는 initial과 동일함
- 최소 크기로 줄어들 수 있고 남은 공간을 위해 늘어날 수도 있음 = flex: 1 1 auto
- none
- 크기는 initial과 동일하며 컨테이너 크기에 관계 없이 변하지 않음 = flex: 0 0 auto
✔ container - justify-content
main-axis에 따라 item 정렬을 할 수 있다.
- row, column 방향에 따라 item을 정렬함
- 여러 줄에 대한 정렬
✔ container - align-items
cross-axis(교차축)에 따라 item 정렬을 할 수 있다.
- 한 줄에 대한 정렬
- space-between, space-around 없음
✔ container - align-content
콘텐츠 사이와 콘텐츠 주위 빈 공간을 배치하는 방식을 결정한다.
- flex-box의 교차축, grid의 블록 축을 기준으로 함
- space-between, space-around 사용 가능
- 여러 줄에 대한 정렬
✔ item - align-self
- 별도로 작성 시 align-item를 덮고 적용함
- 한 가지 요소에 따로 적용하고 싶을 때 사용
반응형
