CSS Flexbox는 요소를 유연하게 배치할 수 있는 강력한 레이아웃 도구입니다. 이 글에서는 display: flex와 justify-content 속성을 조합하여 컨테이너 안의 요소를 왼쪽과 오른쪽 끝에 정렬하는 방법을 소개합니다.
기본 구문(Syntax)
CSS flex 속성의 기본 구문은 다음과 같습니다.
Selector {
flex: /*value*/
}
아래 예제들을 통해 실제 적용 사례를 살펴보겠습니다.
예제 1: space-between으로 좌우 정렬하기
justify-content: space-between은 첫 번째 자식 요소를 컨테이너의 시작점(왼쪽)에, 마지막 자식 요소를 끝점(오른쪽)에 배치하고 나머지 공간을 균등하게 분배합니다. 두 개의 요소만 있으면 각각 왼쪽과 오른쪽에 정확히 붙게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 2%;
padding: 15%;
align-self: center;
background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb 1.2.1&auto=format&fit=stretch&w=600&q=80");
color: white;
}
div > div {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<div>Left</div>
<div>Right</div>
</div>
</body>
</html>
위 코드를 실행하면 'Left' 박스는 컨테이너의 왼쪽 끝에, 'Right' 박스는 오른쪽 끝에 배치된 결과를 확인할 수 있습니다.
예제 2: column wrap으로 세로 방향 배치하기
Flexbox는 가로뿐 아니라 세로 방향 배치도 지원합니다. flex-flow: column wrap을 사용하면 요소들이 위에서 아래로 배치되다가 컨테이너 높이를 초과하면 자동으로 새로운 열로 넘어갑니다.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
height: 250px;
display: flex;
flex-flow: column wrap;
padding: 2%;
background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0;
}
img {
margin: 2%;
width: 60px;
border-radius: 25%;
}
</style>
</head>
<body>
<div id="container">
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
</div>
</body>
</html>
실행 결과, 이미지들이 컨테이너 높이에 맞춰 세로로 쌓이다가 공간이 부족해지면 다음 열로 자동 줄바꿈되어 배치됩니다.
정리
컨테이너에 display: flex를 선언하고 justify-content: space-between만 추가하면 별도의 float나 position 없이도 깔끔한 좌우 정렬 레이아웃을 만들 수 있습니다. 여기에 flex-direction, flex-flow 등의 속성을 조합하면 가로·세로 등 다양한 배치 형태를 손쉽게 구현할 수 있습니다.