Thuộc tính flex-direction trong CSS Flexbox

Thuộc tính flex-direction xác định hướng xếp các flex items trên trục chính (main axis). Đây là thuộc tính nền tảng của Flexbox.

4 giá trị chính

Ví dụ: flex-direction: column

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      flex-direction: column;
      background-color: #e67e22;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px auto;
      border-radius: 4px;
    }
  </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>

Ảnh hưởng đến các thuộc tính khác

/* row (mặc định) */
justify-content → căn ngang
align-items → căn dọc

/* column */
justify-content → căn dọc
align-items → căn ngang

Responsive Pattern

.container {
  display: flex;
  flex-direction: column; /* Mobile first: xếp dọc */
  gap: 1rem;
}
@media (min-width: 768px) {
  .container {
    flex-direction: row;  /* Desktop: xếp ngang */
    flex-wrap: wrap;
  }
  .container > * {
    flex: 1 1 300px;
  }
}

Shorthand: flex-flow

.container {
  flex-flow: column wrap; /* direction + wrap */
}

Lưu ý

• Mặc định là row (theo writing-mode, ltr = left-to-right)
• Thay đổi flex-direction thay đổi ý nghĩa justify-content/align-items
• Kết hợp với order để sắp xếp visual order khác DOM order