Flexbox 실습: 정렬과 간격 다루기

안녕하세요! 이번 포스팅에서는 Flexbox를 실습하며 아이템 정렬과 간격 주는 방법을 좀 더 깊이 배워보겠습니다. 

---

1. 기본 정렬 복습

• justify-content: 주 축(main axis, 기본 가로) 방향 정렬
  • center → 가로 중앙
  • flex-start → 왼쪽 정렬 (기본값)
  • space-between 등 다양한 옵션 존재
• align-items: 교차 축(cross axis, 기본 세로) 방향 정렬
  • center → 세로 중앙
  • flex-start → 위쪽 정렬
  • stretch → 컨테이너 높이에 맞춰 늘이기 (기본값)

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

---

2. 개별 아이템 정렬: align-self

컨테이너에 설정한 align-items를 한 개의 아이템만 다르게 적용하고 싶다면:

.item-1 {
  align-self: flex-start;  /* 이 요소만 위쪽 정렬 */
}
.item-5 {
  align-self: stretch;     /* 이 요소만 컨테이너 높이에 맞춰 늘리기 */
}

• 가능한 값: auto(기본), flex-start, flex-end, center, stretch

---

3. 순서 바꾸기: order

반응형 레이아웃에서 HTML 순서를 바꾸지 않고 화면 상 표시 순서만 변경할 때 유용합니다.

• 기본값은 0
• 작은 값일수록 앞쪽, 큰 값일수록 뒤쪽에 렌더링

.item-6 {
  order: -1;  /* 맨 앞에 표시 */
}
.item-3 {
  order: 2;   /* 맨 뒤에 표시 */
}

---

4. 간격 다루기: Margin vs Gap

4-1. 예전 방식: Margin 이용하기

.container > * {
  margin-right: 30px;
}
/* 마지막 요소에서 margin 제거해야 함 */

• 번거롭게 마지막 요소만 따로 처리해야 함

4-2. 최신 방식: gap 속성

.container {
  display: flex;
  gap: 30px;  /* Flex 아이템 간격을 한 번에 설정 */
}

• 컨테이너에만 선언하면 끝
• 마지막 요소 처리 불필요

---

마치며

지금까지 Flexbox에서 컨테이너 정렬(justify-content, align-items), 아이템별 정렬(align-self), 순서(order), 그리고 간격(gap) 주는 방법을 실습해보았습니다.
다음에 Flexbox의 핵심인 flex 단축 속성(flex-grow, flex-shrink, flex-basis)을 직접 코드로 다뤄보며 더 복잡한 레이아웃을 구현해볼 예정이니, 기대해 주세요!

즐거운 코딩 되세요~ 🚀