7.1 justify-content 속성
Flexbox는 Flex 컨테이너 안의 요소들 사이의 정렬과 공간 분배를 관리할 수 있는 멋진 도구들을 제공해. 그 중 하나는 justify-content 속성인데, 이는 메인 축에 맞춘 Flex 요소들 정렬을 관리해.
justify-content 속성은 Flex 컨테이너의 메인 축을 따라 Flex 요소들이 어떻게 배치될지를 정의해. 메인 축은 flex-direction: 속성의 값에 따라 달라져.
flex-direction값이row또는row-reverse라면, 메인 축은 수평이 되고flex-direction값이column또는column-reverse라면, 메인 축은 수직이 돼
값들:
flex-start: 요소들이 컨테이너의 시작 지점에 정렬돼 (기본값)flex-end: 요소들이 컨테이너의 끝 지점에 정렬돼center: 요소들이 컨테이너의 가운데에 정렬돼space-between: 요소들이 사이의 동일한 간격으로 균등하게 배치돼space-around: 요소들이 가장자리와 요소 사이에 동일한 간격으로 균등하게 배치돼space-evenly: 요소들이 가장자리와 사이 모두 동일한 간격으로 균등하게 배치돼
사용 예제:
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
<div class="container flex-start">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
7.2 justify-content 값들
1. flex-start
flex-start 값을 사용할 때 요소들은 Flex 컨테이너의 시작 지점, 즉 메인 축이 수평이라면 왼쪽에, 메인 축이 수직이라면 위쪽에 정렬돼.
사용 예제:
.container {
display: flex;
justify-content: flex-start;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
2. flex-end
flex-end 값을 사용할 때 요소들은 Flex 컨테이너의 끝 지점, 즉 메인 축이 수평이라면 오른쪽에, 메인 축이 수직이라면 아래쪽에 정렬돼.
사용 예제:
.container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
3. center
center 값을 사용할 때 요소들은 Flex 컨테이너의 가운데에 정렬돼. 이 값은 중앙 정렬 레이아웃을 만들 때 유용해.
사용 예제:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
4. space-between
space-between 값을 사용할 때 요소들은 메인 축을 따라 동일한 간격으로 균등하게 배치돼. 첫 번째 요소는 컨테이너의 시작에 정렬되고, 마지막 요소는 컨테이너의 끝에 정렬돼.
사용 예제:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
5. space-around
space-around 값을 사용할 때 요소들은 요소와 가장자리 사이에 동일한 간격으로 균등하게 배치돼. 요소들 사이의 간격은 컨테이너 가장자리의 간격의 두 배가 돼.
사용 예제:
.container {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
6. space-evenly
space-evenly 값을 사용할 때 요소들이 가장자리와 사이 모두 동일한 간격으로 균등하게 배치돼. 이 값은 모든 컨테이너에 균등한 간격을 보장해.
사용 예제:
.container {
display: flex;
justify-content: space-evenly;
}
<div class="container">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
7.3 메뉴 중앙 정렬
실제 프로젝트 사용 예제 — 네비게이션 메뉴 중앙 정렬:
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
<nav class="nav">
<a href="#" class="nav-item">홈</a>
<a href="#" class="nav-item">소개</a>
<a href="#" class="nav-item">서비스</a>
<a href="#" class="nav-item">연락처</a>
</nav>
코드 설명:
.nav: 네비게이션 메뉴용 Flex 컨테이너로, 요소들이 가운데 정렬돼.nav-item: 기본 스타일이 적용된 Flex 요소(링크)들
GO TO FULL VERSION