home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

คุณสมบัติ Flex Container ใน CSS

Flex Container Properties คืออะไร?

คุณสมบัติของ Flex Container (Parent) คือคุณสมบัติที่ใช้กับองค์ประกอบที่มี display: flex หรือ inline-flex คุณสมบัติเหล่านี้ควบคุมการจัดวางและพฤติกรรมของ Flex Items (ลูก) ทั้งหมด

รายการคุณสมบัติ Flex Container ทั้ง 6 คุณสมบัติ

คุณสมบัติ คำอธิบาย ค่าเริ่มต้น
flex-direction ทิศทางการเรียง items (row, column, row-reverse, column-reverse) row
flex-wrap ควบคุมการขึ้นบรรทัดใหม่ (nowrap, wrap, wrap-reverse) nowrap
flex-flow Shorthand ของ flex-direction + flex-wrap row nowrap
justify-content จัดเรียงบน Main Axis (flex-start, center, space-between, space-around, space-evenly) flex-start
align-items จัดเรียงบน Cross Axis ของ items ในบรรทัดเดียว (stretch, center, flex-start, flex-end, baseline) stretch
align-content จัดเรียงบรรทัดทั้งหมด (flex lines) บน Cross Axis (ต้องมี flex-wrap) stretch

การจัดกลุ่มตามฟังก์ชัน

1. ทิศทางและการWrap (Direction & Wrapping)

.container {
  display: flex;
  flex-direction: row;      /* หรือ column, row-reverse, column-reverse */
  flex-wrap: wrap;          /* หรือ nowrap, wrap-reverse */
  /* หรือใช้ shorthand */
  flex-flow: row wrap;
}

2. การจัดเรียง Main Axis (Justify Content)

.container {
  display: flex;
  justify-content: flex-start;    /* default */
  justify-content: center;
  justify-content: flex-end;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;  /* modern browsers */
}

3. การจัดเรียง Cross Axis - Items (Align Items)

.container {
  display: flex;
  align-items: stretch;      /* default - ยืดเต็ม cross axis */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;     /* จัดตาม baseline ของข้อความ */
}

4. การจัดเรียง Cross Axis - Lines (Align Content)

.container {
  display: flex;
  flex-wrap: wrap;           /* ต้องมี wrap */
  height: 400px;             /* ต้องมีความสูงจำกัด */
  
  align-content: stretch;    /* default - ยืดบรรทัดเต็ม */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

แผนผังสรุป (Mental Model)

Flex Container
├── Main Axis (flex-direction)
│   ├── justify-content → จัด items บนแกนนี้
│   └── flex-wrap → items ขึ้นบรรทัดใหม่ไหม?
└── Cross Axis (ตั้งฉาก Main Axis)
    ├── align-items → จัด items "ในบรรทัด" บนแกนนี้
    └── align-content → จัด "บรรทัดทั้งหมด" บนแกนนี้ (ต้อง multi-line)

ตัวอย่างรวม: Card Grid Responsive

.card-grid {
  display: flex;
  flex-flow: row wrap;           /* direction + wrap */
  justify-content: space-between; /* main axis */
  align-content: space-around;    /* cross axis (multi-line) */
  gap: 24px;                     /* modern gap property */
  padding: 24px;
}

.card {
  flex: 1 1 300px;               /* grow, shrink, basis */
  max-width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

คำแนะนำ

  • เริ่มต้นด้วย display: flex แล้วค่อยเพิ่มคุณสมบัติอื่นๆ ทีละอย่าง
  • ใช้ gap แทน margin สำหรับระยะห่างระหว่าง items (รองรับในทุกเบราวเซอร์ใหม่)
  • จำกัดความกว้าง/สูงของ container เพื่อให้ align-content ทำงานได้ชัดเจน
  • ทดสอบบนขนาดหน้าจอต่างๆ เพื่อดูพฤติกรรม wrap