คุณสมบัติ flex-direction: column ใน CSS Flexbox

flex-direction: column คืออะไร?

ค่า column ของ flex-direction ทำให้ flex items เรียงตัว แนวตั้ง (Vertical) จาก บนลงล่าง Main Axis จะเป็นแนวตั้ง Cross Axis จะเป็นแนวนอน

ลักษณะการทำงาน

• Main Axis: แนวตั้ง (Vertical) - บน → ล่าง
• Cross Axis: แนวนอน (Horizontal) - ซ้าย → ขวา
• justify-content: ควบคุมแนวตั้ง (บน/ล่าง/กึ่งกลาง/กระจาย)
• align-items: ควบคุมแนวนอน (ซ้าย/ขวา/กึ่งกลาง/ยืด)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      flex-direction: column;   /* เรียงจากบนลงล่าง */
      background-color: #fff3e0;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      width: 100%;
      max-width: 300px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง flex-direction: column</h1>
  <p>Items เรียงจากบนลงล่าง: Q1, Q2, Q3, Q4, Q5, Q6</p>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
    <div>Q5</div>
    <div>Q6</div>
  </div>
</body>
</html>

การใช้งานจริง: Form Layout

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 500;
  color: #333;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

การใช้งานจริง: Full Page Layout (Holy Grail)

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex: 0 0 auto;      /* คงที่ */
}

.main {
  display: flex;
  flex: 1;             /* ขยายเต็มพื้นที่กลาง */
}

.sidebar {
  flex: 0 0 250px;
}

.content {
  flex: 1;
  min-width: 0;
}

.footer {
  flex: 0 0 auto;      /* คงที่ */
}

Responsive: Column บน Mobile, Row บน Desktop

.responsive-container {
  display: flex;
  flex-direction: column;   /* Mobile: stack แนวตั้ง */
  gap: 16px;
}

@media (min-width: 768px) {
  .responsive-container {
    flex-direction: row;    /* Desktop: จัดติดกันแนวนอน */
  }
}

/* หรือใช้ container queries (modern) */
@container (min-width: 600px) {
  .responsive-container {
    flex-direction: row;
  }
}

justify-content กับ column direction

.column-center {
  display: flex;
  flex-direction: column;
  height: 400px;           /* ต้องมีความสูงจำกัด */
  justify-content: center; /* จัดกึ่งกลาง "แนวตั้ง" */
}

.column-space-between {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;  /* item แรกชิดบน ตัวสุดท้ายชิดล่าง */
}

align-items กับ column direction

.column-stretch {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* default - items ยืดกว้างเต็ม container */
}

.column-center {
  display: flex;
  flex-direction: column;
  align-items: center;    /* items อยู่กึ่งกลางแนวนอน */
}

คำแนะนำ

• ใช้ column สำหรับ Form, Sidebar, Page layout, Mobile-first stacking
• จำไว้: justify-content ↔ align-items สลับบทบาทเมื่อเปลี่ยน direction
• ใช้ gap สำหรับระยะห่างระหว่าง items (แทน margin)
• ร่วมกับ flex-wrap: wrap ได้ แต่ column-wrap จะสร้างคอลัมน์ใหม่ทางขวา (ต้องมีความสูงจำกัด)