CSS에서 플렉스 컨테이너 안에 배치된 유연한 항목(flex item)들의 방향을 지정하려면 flex-direction 속성을 사용합니다. 이 속성은 주축(main axis)을 기준으로 항목들이 정렬되는 방향을 결정합니다.
flex-direction 속성의 주요 값
- row (기본값): 항목을 가로 방향, 즉 왼쪽에서 오른쪽으로 배치합니다.
- row-reverse: 항목을 가로 방향이지만 오른쪽에서 왼쪽으로 배치합니다.
- column: 항목을 세로 방향, 즉 위에서 아래로 배치합니다.
- column-reverse: 항목을 세로 방향이지만 아래에서 위로 배치합니다.
예제 코드
다음 예제는 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;으로 자식 항목들을 위에서 아래로 세로 정렬합니다.
- .mycontainer > div: 컨테이너의 직계 자식 항목들에 흰색 배경, 가운데 정렬 텍스트, 너비 100px 등의 스타일을 적용합니다.
값을 row나 row-reverse로 변경하면 항목들이 가로 방향으로 배치되는 것도 확인할 수 있습니다. 이처럼 flex-direction 속성 하나만으로 레이아웃의 흐름을 손쉽게 제어할 수 있습니다.