CSS Flexbox 레이아웃에서 justify-content 속성은 플렉스 컨테이너 내부의 아이템들을 주 축(main axis) 방향으로 정렬하는 역할을 합니다. 그중 flex-start 값을 사용하면 플렉스 아이템들이 컨테이너의 시작 지점에 정렬됩니다.
flex-start 값이란?
justify-content: flex-start;는 기본값(default)으로, 플렉스 아이템들을 컨테이너의 시작 부분부터 차례대로 배치합니다. 가로 방향 레이아웃에서는 왼쪽 끝에, 세로 방향(column) 레이아웃에서는 위쪽 끝에 아이템들이 붙게 됩니다.
예제 코드
아래 코드는 flex-start 값을 적용하여 네 개의 퀴즈 항목(Q1~Q4)을 컨테이너 왼쪽에 정렬하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: flex-start;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
코드 설명
- display: flex; — 컨테이너를 플렉스 박스로 설정합니다.
- justify-content: flex-start; — 자식 요소들을 컨테이너의 시작 위치(왼쪽)에 정렬합니다.
- .mycontainer > div — 각 아이템에 배경색, 크기, 여백 등의 스타일을 지정합니다.
위 코드를 실행하면 빨간색 컨테이너 안에 주황색 아이템들이 왼쪽부터 순서대로 나열되는 것을 확인할 수 있습니다.
참고: justify-content의 다른 값들
flex-start 외에도 다양한 정렬 옵션이 있습니다.
- flex-end — 아이템을 컨테이너 끝 부분에 정렬
- center — 아이템을 가운데 정렬
- space-between — 첫 번째와 마지막 아이템은 양 끝에, 나머지는 균등하게 배치
- space-around — 모든 아이템 주변에 동일한 간격을 두고 배치
- space-evenly — 아이템 사이와 양 끝의 간격을 모두 동일하게 배치
상황에 맞는 값을 선택하면 반응형 웹 디자인에서 유연하고 깔끔한 레이아웃을 쉽게 구현할 수 있습니다.