Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS flex-direction 속성으로 플렉스 항목 세로 배치하는 방법

CSS에서 플렉스(Flex) 컨테이너의 항목들을 세로 방향으로 배치하려면 flex-direction 속성에 column 값을 지정하면 됩니다. 기본값인 row는 항목을 가로(행) 방향으로 나열하지만, column으로 설정하면 항목이 위에서 아래로 순서대로 쌓이게 됩니다.

아래 예제 코드를 실행하면 여섯 개의 퀴즈 항목(Q1~Q6)이 세로로 정렬되어 표시되는 것을 확인할 수 있습니다.

예제

<!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>

flex-direction의 주요 값

  • row(기본값): 항목을 왼쪽에서 오른쪽으로 가로 배치합니다.
  • row-reverse: 항목을 오른쪽에서 왼쪽으로 가로 배치합니다.
  • column: 항목을 위에서 아래로 세로 배치합니다.
  • column-reverse: 항목을 아래에서 위로 세로 배치합니다.

만약 세로 배치된 항목의 순서를 뒤집고 싶다면 flex-direction: column-reverse;를 사용하면 됩니다. 이처럼 flex-direction 속성 하나만으로 플렉스 레이아웃의 흐름 방향을 손쉽게 제어할 수 있습니다.