TIL 31.

✅ 학습 목표

• Flexbox의 개념과 주요 속성 학습
• 메인축/교차축, item 정렬 방식 이해
• 실습을 통해 Flexbox 기반 레이아웃 구현 능력 향상

---

1. Flexbox 기본 개념 정리

✅ 구성 요소

• flex-container: Flexbox가 적용되는 부모 요소
• flex-item: Flexbox로 정렬되는 자식 요소들

✅ 축 개념

• 메인축(Main Axis): flex-direction 기준 정렬 방향
• 교차축(Cross Axis): 메인축에 수직인 방향

---

2. 주요 Flexbox 속성 정리

✅ 부모 요소용 속성

• display: flex;: Flexbox 레이아웃 시작
• flex-direction: 메인축 방향 설정 (row, column 등)
• flex-wrap: item 줄바꿈 설정 (nowrap, wrap, wrap-reverse)
• justify-content: 메인축 정렬 방식
• align-items: 교차축 정렬 방식

✅ 자식 요소용 속성

• flex-basis: 초기 크기 설정 (width 유사)
• flex-grow: 여유 공간 비율 분배
• flex-shrink: 공간 부족 시 축소 비율
• flex: grow, shrink, basis 통합 지정
• order: 출력 순서 변경

---

3. Flexbox 정가운데 배치 실습

#con {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="con">
  <div id="item-center"></div>
</div>

---

4. 축약형 속성 flex

• flex: 1: grow 1, shrink 1, basis 0
• flex: 1 0 auto: grow 1, shrink 0, basis auto
• flex: 1 1 50%: grow 1, shrink 1, basis 50%

---

5. 실전 Flexbox 레이아웃 구현 (문제 1~5)

✅ 실습 요약

• flex-direction과 flex-basis 조합으로 상하좌우 영역 분리
• 중첩 flex 구조를 활용한 복잡한 레이아웃 구현
• justify-content, align-items 활용해 위치 정렬
• order 속성으로 렌더링 순서 조정

---

📘 느낀점

• Flexbox는 구조가 단순하면서도 강력한 레이아웃 도구임을 체감
• 실습을 통해 flex-grow, flex-shrink, flex-basis의 실전 적용 감각 향상
• 중첩 Flexbox 구조 구현은 실제 UI 제작에도 활용 가능성이 높아 흥미로웠음
• 다양한 방향의 레이아웃을 유연하게 만들 수 있어 반응형 웹에 필수적인 기술임을 느낌