Flexbox 기초 실습 시작하기

안녕하세요 여러분! 이번 포스팅에서는 Flexbox를 실습하며 기본 개념을 익히는 방법을 알아보겠습니다. 이미 강의에서 여러 차례 언급했던 Flexbox를 드디어 코드에 적용해볼 차례인데요, 복잡한 프로젝트 환경이 아니라 간단한 형태로 따로 떼어놓고 실습해볼 거예요.

---

Flex 컨테이너와 아이템 이해하기

1. Flexbox 적용

• 컨테이너 설정이 한 줄만으로도 자식 요소들이 가로로 나란히 배치됩니다.

.container {
  display: flex;
}

• 용어 정리
  • Flex Container: display: flex를 준 부모 요소
  • Flex Items: 컨테이너 내부의 자식 요소들

2. 기본 레이아웃

• 각 아이템은 자신의 콘텐츠 크기만큼 너비를 차지
• 높이는 기본적으로 컨테이너 내 가장 큰 아이템 기준(Stretch)
• 컨테이너 배경(빈 공간)은 설정한 배경색으로 표시

---

주요 속성으로 정교하게 정렬하기

Flexbox의 진가를 발휘하는 핵심 속성 두 가지를 배워봅시다.

3. 수직 정렬: align-items

• align-items: stretch (기본값)
  모든 아이템의 높이가 컨테이너에 맞춰 늘어남
• align-items: center
  컨테이너 높이 기준 중앙 정렬
• align-items: flex-start, flex-end
  각각 상단, 하단 정렬

.container {
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
}

4. 수평 정렬: justify-content

• justify-content: center
  남은 여백을 양쪽에 동일하게 분배해 중앙에 위치
• justify-content: space-between
  아이템 사이사이 여백을 균등하게 분배
• 그 외 옵션: flex-start, flex-end, space-around 등

.container {
  display: flex;
  justify-content: space-between; /* 아이템 사이 균등 분배 */
}

---

마치며 & 다음 강의 예고

지금까지 Flexbox를 적용하고, 컨테이너 설정과 **정렬 속성(align-items / justify-content)**을 사용해보았습니다.
물론 Flexbox에는 이 외에도 flex-wrap, flex-direction, gap 등 수많은 속성이 있지만, 우선은 이 기본 개념만으로도 훨씬 간단하고 강력한 레이아웃 구성이 가능하다는 점을 느껴보셨기를 바랍니다.

다음 강의에서는
Flexbox 사양 전체를 훑으며 flex 단축 속성, 아이템별 크기 조정(flex-grow, flex-shrink 등), 복합 레이아웃에 대한 실습을 진행합니다. 기대해주세요!

즐거운 코딩 되세요 🙂