CSS에서 flex-direction 속성은 플렉스 컨테이너 내부의 플렉스 아이템(flex items)이 배치되는 주축(main axis)의 방향을 정의할 때 사용합니다. 기본값은 가로 방향인 row이며, 이 속성을 활용하면 아이템을 세로로 쌓거나 순서를 반대로 배치하는 등 다양한 레이아웃을 손쉽게 구현할 수 있습니다.
flex-direction의 주요 값
- row (기본값): 아이템을 가로 방향(왼쪽 → 오른쪽)으로 배치합니다.
- row-reverse: 가로 방향이지만 오른쪽 → 왼쪽 순서로 배치합니다.
- column: 아이템을 세로 방향(위 → 아래)으로 배치합니다.
- column-reverse: 세로 방향이지만 아래 → 위 순서로 배치합니다.
세로 방향(column) 적용 예제
아래 예제는 flex-direction: column;을 사용하여 플렉스 아이템들을 세로 방향으로 정렬한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: column;
background-color: orange;
}
.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>
</body>
</html>코드 설명
.mycontainer 클래스에 display: flex;를 지정하여 해당 요소를 플렉스 컨테이너로 만들고, flex-direction: column;을 추가해 자식 요소들이 위에서 아래로 수직으로 나열되도록 설정했습니다. 결과적으로 Q1부터 Q6까지의 항목이 주황색 배경 안에 세로로 쌓여 있는 형태로 화면에 표시됩니다.
만약 배치 순서를 반대로 바꾸고 싶다면 flex-direction: column-reverse;로 변경하면 되며, 가로 배치가 필요하다면 row 또는 row-reverse 값을 사용하면 됩니다. 이처럼 flex-direction 속성 하나만으로 레이아웃의 흐름을 유연하게 제어할 수 있습니다.