Giá trị row của flex-direction trong CSS

Giá trị row (mặc định) của flex-direction xếp các flex items theo hàng ngang từ trái sang phải (theo direction: ltr).

Ví dụ: flex-direction: row

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

Đặc điểm flex-direction: row

• Main axis: Ngang (x-axis), từ trái sang phải
• Cross axis: Dọc (y-axis), từ trên xuống dưới
• justify-content: Căn ngang (left/center/right/space-between...)
• align-items: Căn dọc (top/center/bottom/stretch...)
• flex-wrap: wrap: Items xuống dòng dưới nhau

So sánh row vs column

RTL (Right-to-Left) support

[dir="rtl"] .container {
  flex-direction: row; /* Vẫn là row nhưng xếp từ phải sang trái */
}
/* Hoặc dùng */
.container {
  flex-direction: row-reverse; /* Ép buộc xếp ngược */
}

Responsive Pattern

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