CSS3 Flexbox 정의 및 속성

⏰ 2024.11.25 (D+33)

1. Flexbox란?

• Flexbox(Flexible Box)는 CSS3에서 추가된 레이아웃 방식
• HTML 요소를 유연하게 정렬, 크기 조정 및 배치 가능
• 기존의 레이아웃 방식(float, inline-block 등)의 한계를 극복
• 주축(Main Axis)과 교차축(Cross Axis)을 기반으로 작동

2. Flexbox의 구성

1) Flex Container

• Flex 아이템을 포함하는 부모 요소
• Flexbox 관련 속성을 정의하는 공간

2) Flex Items

• Flex 컨테이너 안에 포함된 자식 요소들
• 개별적으로 크기, 순서, 정렬 등이 조정 가능

3. Flexbox의 두 축

1) 주축(Main Axis)

• flex-direction 속성에 의해 설정, 아이템이 배치되는 기본 축
• 기본값은 row로 가로 방향

2) 교차축(Cross Axis)

• 주축에 수직인 축, align-items와 align-content 속성에 영향

4. Flex Container 속성

(1) display

• Flex 컨테이너를 정의하는 속성
• 주요 값
  - flex: 블록 컨테이너
  - inline-flex: 인라인 컨테이너 (요소가 인라인 흐름 유지)

(2) flex-direction

주축의 방향을 설정 ⚙️

• 값:
  - row (기본값): 주축을 가로 방향으로 설정 (왼쪽 → 오른쪽)
  - row-reverse: 주축을 가로 역방향으로 설정 (오른쪽 → 왼쪽)
  - column: 주축을 세로 방향으로 설정 (위 → 아래)
  - column-reverse: 주축을 세로 역방향으로 설정 (아래 → 위)

(3) flex-wrap

Flex 아이템의 줄바꿈 여부를 설정 ⚙️

• 값:
  - nowrap (기본값): 한 줄에 모든 아이템을 배치
  - wrap: 줄바꿈 허용, 초과 아이템은 다음 줄로 배치
  - wrap-reverse: 줄바꿈 허용, 다음 줄은 역방향으로 배치

(4) flex-flow

• flex-direction과 flex-wrap의 축약형
• 예: flex-flow: row wrap;

(5) justify-content

주축(Main Axis) 방향으로 아이템 정렬 방식을 설정 ⚙️

• 값:
  - flex-start (기본값): 시작점에 정렬
  - flex-end: 끝점에 정렬
  - center: 중앙 정렬
  - space-between: 양 끝에 배치, 중간 공간 균등 분배
  - space-around: 양쪽에 균등 간격 배분, 중간 공간은 두 배
  - space-evenly: 모든 간격 균등 배분 (IE 미지원)

(6) align-items

교차축(Cross Axis) 방향으로 아이템 정렬 방식을 설정 ⚙️

• 값:
  - stretch (기본값): 교차축 방향으로 늘림
  - flex-start: 교차축 시작점에 정렬
  - flex-end: 교차축 끝점에 정렬
  - center: 중앙 정렬
  - baseline: 텍스트 기준선(baseline)으로 정렬

(7) align-content

• 여러 줄일 때 교차축 방향으로 줄을 정렬
• flex-wrap: wrap;이 적용되어야 의미가 있다
• 값:
  - stretch (기본값): 교차축 전체에 걸쳐 줄을 늘림
  - flex-start: 교차축 시작점에 줄을 정렬
  - flex-end: 교차축 끝점에 줄을 정렬
  - center: 중앙 정렬
  - space-between: 첫 줄은 시작점, 마지막 줄은 끝점에 배치, 줄 사이 공간 균등 분배
  - space-around: 줄 사이와 교차축 여백 간 간격 균등 배분
  - space-evenly: 모든 간격 균등 배분

5. Flex Item 속성

(1) order

• 아이템의 배치 순서를 설정
• 기본값은 0, 숫자가 낮을수록 먼저 배치(음수 가능)

(2) flex

아이템 크기 조정을 위한 축약 속성🔧

• 구성: flex: flex-grow flex-shrink flex-basis
• 예:
  - flex: 1 → flex-grow: 1; flex-shrink: 1; flex-basis: 0;
  - flex: none → flex: 0 0 auto;
  - flex: auto → flex: 1 1 auto;

(3) flex-grow

• 남는 공간에서 아이템이 차지하는 비율을 설정
• 기본값: 0 (남는 공간 사용 안 함)
• 값이 높을수록 더 많은 공간을 차지

(4) flex-shrink

• 부족한 공간에서 아이템이 줄어드는 비율을 설정
• 기본값: 1 (공간 부족 시 줄어듦)
• 값이 높을수록 더 빠르게 줄어듦

(5) flex-basis

• 아이템의 기본 크기를 설정
• 기본값: auto
• 예: flex-basis: 100px;

(6) align-self

• 개별 아이템의 교차축 정렬을 설정 (기본값: auto)
• align-items를 덮어쓴다
• 값:
  - auto: align-items 값 상속
  - flex-start, flex-end, center, baseline, stretch

6. Flexbox 기본 동작 요약

1. 아이템 배치

: flex-direction과 flex-wrap을 기준으로 주축과 교차축에서 배치

2. 공간 분배

: 남는 공간 → flex-grow, 부족한 공간 → flex-shrink로 조정

3. 정렬

: justify-content(주축), align-items(교차축), align-content(줄)

7. 주요 예제 코드

1) 기본 Flexbox 컨테이너

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

2) 줄바꿈 포함

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

3) 개별 아이템 크기

.item {
  flex: 1; /* 동일한 공간 분배 */
}

.item.large {
  flex: 2; /* 더 많은 공간 차지 */
}