justify-content 완전정복 – 주축 정렬을 다루는 가장 중요한 속성

 

 

Flexbox를 쓰다 보면 "가운데 정렬은 어떻게 하지?", "아이템을 양쪽에 나눠서 정렬하고 싶어!" 이런 상황 자주 생기죠.
그럴 때 꼭 써야 하는 속성이 바로 **justify-content**입니다.

이 속성은 아이템을 주축(main axis) 방향으로 어떻게 정렬할지 결정하는 속성이에요.
이번 포스팅에서는 justify-content의 다양한 값과 시각적인 차이를 비교하면서
어떤 상황에서 어떤 정렬이 적합한지도 함께 정리해볼게요!

---

✅ 기본 문법

.container {
  display: flex;
  justify-content: center;
}

 

justify-content는 아이템들이 놓일 방향의 중심 정렬 방식을 설정합니다.
주축이 가로(row)일 수도 있고, 세로(column)일 수도 있어요!

---

 

📦 사용 가능한 속성값 정리

값	설명	정렬 방향
flex-start	주축의 시작 지점에 정렬	왼쪽 또는 위쪽
flex-end	주축의 끝 지점에 정렬	오른쪽 또는 아래쪽
center	중앙 정렬	가운데
space-between	첫 요소는 시작, 마지막 요소는 끝 + 나머지는 균등 간격	시작↔끝 정렬
space-around	요소 앞뒤로 동일한 간격	양쪽에 여백 포함
space-evenly	모든 요소 사이 간격을 완전히 균등하게 배분	간격이 완전 동일

 

---

 

🧪 실습 예시

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: #eee;
  padding: 20px;
}
.item {
  background: #ffa07a;
  padding: 10px 20px;
}
</style>

 

space-between은 첫 요소는 왼쪽 끝, 마지막 요소는 오른쪽 끝,
그리고 그 사이 요소는 균등하게 간격이 배치됩니다.

---

 

🔄 flex-direction에 따라 방향이 바뀝니다

• 기본 주축은 row → 수평 정렬
• flex-direction: column을 설정하면 주축이 세로로 바뀌고,
  justify-content는 위↕아래 정렬을 담당하게 됩니다.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 수직 가운데 정렬 */
}

 

---

 

📌 언제 쓰면 좋을까?

• 버튼이나 네비게이션 바 가운데 정렬
• 카드 목록을 양끝으로 펼쳐 정렬
• 비대칭 여백이 거슬릴 때 요소 간 간격 균등 배치