CSS에서 flex-direction과 flex-wrap 속성을 동시에 지정하고 싶다면, 단축 속성인 flex-flow를 사용하세요. 이 속성 하나만으로 플렉스 항목의 배치 방향과 줄바꿈 여부를 함께 설정할 수 있어 코드가 훨씬 간결해집니다.
flex-flow 기본 문법
flex-flow: flex-direction flex-wrap;
기본값은 row nowrap입니다. 두 값 중 하나를 생략해도 되며, 생략된 값에는 각 속성의 초기값(row, nowrap)이 자동으로 적용됩니다.
flex-direction에 사용 가능한 값
- row (기본값): 플렉스 항목을 가로 방향으로 배치합니다.
- row-reverse: 가로 방향으로 배치하되 순서를 반대로 뒤집습니다.
- column: 플렉스 항목을 세로 방향으로 배치합니다.
- column-reverse: 세로 방향으로 배치하되 순서를 반대로 뒤집습니다.
flex-wrap에 사용 가능한 값
- nowrap (기본값): 모든 항목을 한 줄에 배치합니다.
- wrap: 공간이 부족하면 항목을 다음 줄로 넘깁니다.
- wrap-reverse: 여러 줄로 배치하되 줄의 순서를 반대로 배치합니다.
예제
아래 코드는 flex-flow 속성으로 플렉스 컨테이너의 방향(column)과 줄바꿈(wrap)을 설정하는 예제입니다. 직접 실행해서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
flex-flow: column wrap;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
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>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>
위 예제에서는 flex-flow: column wrap; 덕분에 Q1부터 Q9까지의 항목들이 세로 방향으로 배치되고, 컨테이너의 높이가 부족하면 자동으로 옆 열로 넘어가게 됩니다. 이처럼 flex-flow를 활용하면 반응형 레이아웃을 더욱 유연하게 구성할 수 있습니다.