CSS flex-direction 속성의 row 값 – 플렉스 아이템 가로 배치하기

CSS flex-direction 속성과 row 값의 역할

flex-direction 속성은 플렉스 컨테이너 내부에서 플렉스 아이템이 배치되는 주축(main axis)의 방향을 결정합니다. 이 속성에 row 값을 지정하면 플렉스 아이템들이 텍스트가 읽히는 방향과 동일하게, 즉 왼쪽에서 오른쪽으로 가로 방향으로 나란히 배치됩니다.

참고로 row는 flex-direction 속성의 기본값(default)입니다. 따라서 별도로 지정하지 않더라도 플렉스 아이템은 기본적으로 가로 방향으로 정렬됩니다.

row 값의 주요 특징

플렉스 아이템을 가로 방향(왼쪽 → 오른쪽)으로 배치합니다.
flex-direction 속성의 기본값입니다.
반대 방향(오른쪽 → 왼쪽)으로 배치하려면 row-reverse 값을 사용합니다.
세로 방향 배치가 필요하면 column 또는 column-reverse 값을 사용합니다.

예제 코드

다음 예제는 flex-direction 속성에 row 값을 적용하여 여섯 개의 퀴즈 항목(Q1~Q6)을 가로 방향으로 배치하는 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: row;
            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까지의 아이템이 한 줄로 가로 배치되어 있는 것을 확인할 수 있습니다. 이처럼 row 값은 수평 레이아웃을 구성할 때 가장 많이 사용되는 기본적인 설정입니다.