CSS의 flex-flow 속성을 사용하면 flex-direction과 flex-wrap 두 가지 속성을 하나의 선언으로 동시에 설정할 수 있습니다. 플렉스 레이아웃을 다룰 때 코드를 더 간결하게 유지할 수 있어 유용한 약식(shorthand) 속성입니다.
flex-flow 속성의 기본 문법
flex-flow 속성은 아래와 같이 두 개의 값을 공백으로 구분하여 작성합니다.
flex-flow: <flex-direction> <flex-wrap>;
- flex-direction: row(기본값), row-reverse, column, column-reverse 중 선택하며, 플렉스 항목이 배치되는 주축의 방향을 결정합니다.
- flex-wrap: nowrap(기본값), wrap, wrap-reverse 중 선택하며, 항목이 컨테이너를 벗어날 때 줄바꿈 여부를 결정합니다.
값을 하나만 지정하면 나머지는 기본값(row, nowrap)이 적용됩니다.
실전 예제
아래 예제에서는 flex-flow: column wrap;을 적용하여 퀴즈 항목들이 세로 방향(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 속성은 flex-direction과 flex-wrap을 각각 따로 선언하지 않고 한 줄로 처리할 수 있어 스타일시트를 깔끔하게 관리할 수 있습니다. 반응형 레이아웃을 구현할 때 특히 유용하니, 다양한 값 조합을 직접 실험해 보며 익혀두는 것을 추천합니다.