CSS 플렉스박스(Flexbox)에서 여러 개의 플렉스 라인(flex line)이 있을 때, 각 라인의 주변에 균등한 공백을 배치하려면 align-content 속성에 space-around 값을 사용합니다.
space-around 값은 첫 번째 라인 앞과 마지막 라인 뒤에도 절반 크기의 여백을 두고, 라인 사이에는 동일한 간격을 배치합니다. 이를 통해 플렉스 컨테이너 안에서 라인들이 시각적으로 고르게 분산된 모습을 만들 수 있습니다.
참고로 align-content 속성은 플렉스 항목이 여러 줄로 나뉘어 있을 때만 효과가 있으므로, 반드시 flex-wrap: wrap; 속성과 함께 사용해야 합니다.
예제 코드
아래 예제는 align-content: space-around 값을 적용해 플렉스 라인 주변에 공백을 배치하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: #884EA0;
align-content: space-around;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: #00FF00;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>위 코드를 실행하면 보라색 컨테이너 안에서 초록색 항목들이 두 줄로 나뉘며, 각 플렉스 라인의 위아래로 동일한 공백이 분배되어 정렬되는 것을 확인할 수 있습니다.