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

CSS로 플렉스 항목을 가로 방향으로 설정하기

CSS에서 플렉스 컨테이너 안의 항목들을 가로 방향으로 나란히 배치하려면 flex-direction 속성에 row 값을 지정하면 됩니다. row는 flex-direction의 기본값으로, 항목들이 텍스트 읽기 방향(일반적으로 왼쪽에서 오른쪽)을 따라 한 줄로 배치됩니다.

flex-direction의 주요 값

row — 항목을 가로 방향(행)으로 배치합니다. 기본값입니다.
row-reverse — 가로 방향 배치와 동일하지만 항목의 순서가 반대로 뒤집힙니다.

예제

다음 코드를 실행하면 row 값이 실제로 어떻게 동작하는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: row;
            background-color: #2C3E50;
         }
         .mycontainer > div {
            background-color: #F7F9F9;
            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: row;를 적용했습니다. 그 결과 Q1부터 Q6까지 여섯 개의 자식 요소(<div>)가 세로로 쌓이지 않고 가로 방향으로 한 줄에 나란히 배치됩니다.

각 항목에는 margin: 5px;로 여백을 주어 항목 사이에 간격이 생기도록 했으며, width: 100px;와 line-height: 40px;로 항목의 크기와 텍스트 수직 정렬을 조정했습니다. 배경색 대비(#2C3E50 vs #F7F9F9)를 활용하면 항목들이 가로로 정렬된 모습을 더욱 명확하게 확인할 수 있습니다.