[CSS 개념잡기] Flexbox 정복하기

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 : default
• row-reverse : row와 동일하지만 시작점, 끝점이 반대
• column : 주축이 블록 축과 동일
• column-reverse : column과 동일하지만 시작점, 끝점이 반대

✔ container - flex-wrap, flex-flow (shorthand)

1. flex-wrap
   • flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 영역 내에서 여러행으로 나눌 것인지 결정
   • 영역 내에서 벗어나지 못하게 설정 시 동시에 요소의 방향 축 결정 가능
   • nowrap : default, 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치함
   • wrap : 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치됨. 위에서 아래로 쌓임
2. 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를 덮고 적용함
• 한 가지 요소에 따로 적용하고 싶을 때 사용