CSS에서 flex-direction 속성에 column-reverse 값을 적용하면 플렉스 항목(flex items)을 세로 방향으로 배치하면서도, 일반적인 column 값과 반대로 아래에서 위로 쌓이도록 설정할 수 있습니다.
column-reverse는 주축(main axis)의 방향을 뒤집는 속성값입니다. 따라서 HTML 마크업에서 Q1부터 Q6까지 순서대로 작성했더라도, 화면에는 Q6이 맨 위에, Q1이 맨 아래에 오는 역순으로 표시됩니다. 최신 소식이나 댓글 목록처럼 최신 항목을 상단에 보여주고 싶은 UI를 만들 때 특히 유용합니다.
예제
다음 코드를 실행하여 column-reverse 값이 실제로 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: column-reverse;
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>
위 코드를 실행하면 주황색 배경의 컨테이너 안에 흰색 항목들이 아래에서 위로, 즉 Q6 → Q5 → Q4 → Q3 → Q2 → Q1 순서로 역방향 배치되는 것을 확인할 수 있습니다. 만약 위에서 아래로 정상 순서로 배치하고 싶다면 flex-direction 값을 column으로 변경하기만 하면 됩니다.