CSS Flexbox 레이아웃에서 justify-content 속성은 플렉스 컨테이너 내부의 아이템들을 주축(main axis) 방향으로 정렬하는 역할을 합니다. 이 속성에 flex-end 값을 지정하면 플렉스 아이템들이 컨테이너의 끝부분(오른쪽)으로 밀려나 정렬됩니다.
flex-end 값의 동작 방식
기본값인 flex-start가 아이템들을 시작점(왼쪽)에 배치하는 것과 달리, flex-end는 모든 아이템을 주축의 끝 지점으로 이동시킵니다. 아이템들 사이의 간격은 유지되며, 남는 공간은 모두 컨테이너의 시작 쪽에 배치됩니다.
예제 코드
아래 코드를 실행하면 flex-end 값이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: flex-end;
}
.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>코드 설명
- .mycontainer:
display: flex;로 플렉스 컨테이너를 선언하고, 붉은색 배경과 함께justify-content: flex-end;를 적용했습니다. - .mycontainer > div: 컨테이너 안의 네 개 자식 요소(Q1~Q4)에 주황색 배경, 가운데 정렬 텍스트, 100px 고정 폭 등의 스타일을 지정했습니다.
결과적으로 Q1부터 Q4까지의 아이템들이 붉은색 컨테이너의 오른쪽 끝에 나란히 정렬되어 표시됩니다. 만약 flex-end 대신 flex-start를 사용하면 아이템들이 왼쪽 끝에 정렬되는 것을 비교해 볼 수 있습니다.