CSS flex-direction 속성의 column-reverse 값 완벽 정리

CSS의 flex-direction 속성에 column-reverse 값을 사용하면 플렉스 아이템(flex items)이 세로 방향으로 배치되며, 일반적인 순서와 반대로, 즉 아래에서 위로 쌓이는 역순으로 정렬됩니다.

column-reverse 값의 특징

기본적으로 flex-direction: column;은 아이템을 위에서 아래로 배치하지만, column-reverse를 적용하면 첫 번째 아이템이 가장 아래에 위치하고 마지막 아이템이 가장 위에 표시됩니다. 이는 주축(main axis)의 시작점과 끝점이 뒤바뀌기 때문입니다.

예제 코드

아래 코드를 실행하면 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>

실행 결과 설명

위 예제에서 Q1부터 Q6까지 여섯 개의 자식 요소가 있는 컨테이너에 flex-direction: column-reverse;가 적용되어 있습니다. 화면에는 Q6이 맨 위에, Q1이 맨 아래에 표시되어 HTML 작성 순서의 반대로 세로 정렬된 것을 확인할 수 있습니다.

flex-direction 속성의 다른 값들

row: 기본값으로, 아이템을 가로 방향(왼쪽→오른쪽)으로 배치합니다.
row-reverse: 아이템을 가로 방향으로 배치하되 오른쪽→왼쪽 순서로 정렬합니다.
column: 아이템을 세로 방향(위→아래)으로 배치합니다.
column-reverse: 아이템을 세로 방향으로 배치하되 아래→위 순서로 정렬합니다.