[CSS] Flexbox (1) - 컨테이너 속성 정복하기

이번 포스팅에서는 [최신 레이아웃] 파트의 세부 주제인 Flexbox의 부모(Container) 속성에 대하여 상세히 알아보겠습니다.

1. 주축(Main Axis)과 교차축(Cross Axis)의 이해

Flexbox를 마스터하려면 축의 방향을 이해해야 합니다. flex-direction: row(기본값)일 때 주축은 가로, 교차축은 세로입니다. column일 때는 이것이 서로 바뀝니다.

• justify-content: 메인 축(주축) 방향의 아이템 간격을 정렬합니다. (center, space-between, space-around 등)
• align-items: 교차 축 방향의 아이템들을 정렬합니다. (center, flex-start, flex-end, stretch 등)

2. 실무 꿀팁: Flex Wrap과 Gap의 조화

화면이 좁아질 때 컨텐츠가 삐져나가는 것을 막고 자연스럽게 줄바꿈을 유도하는 필수 속성입니다. 최근 브라우저에서는 gap 속성을 지원하여 margin 노가다를 없애주었습니다.

.product-list {
  display: flex;
  flex-wrap: wrap; /* 공간이 부족하면 밑으로 줄바꿈 */
  gap: 20px; /* 아이템 사이의 상하좌우 간격을 일정하게 20px 부여 */
}

---

지금까지 Flexbox 부모 컨테이너의 핵심 정렬 속성들에 대해 살펴보았습니다. 다음 포스팅에서는 개별 자식 아이템들을 세밀하게 제어하는 Flex item 속성들을 파헤쳐 보겠습니다.