Flexbox คืออะไร และคุณจะจัดเรียงเนื้อหาตรงกลางด้วยมันอย่างไร

Question

Accepted Answer

**Flexbox** คือระบบเลย์เอาต์ที่มีเพียงมิติเดียว — มันจัดเรียงรายการในแถวหรือคอลัมน์เดียว และกระจายพื้นที่ตามแนวนั้น มันเป็นคำตอบสมัยใหม่สำหรับปัญหาการจัดตำแหน่งและระยะห่างที่เคยต้องใช้ float และเคล็ดลับต่างๆ

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## สองแกน

Flexbox มี **แกนหลัก** (ทิศทางที่รายการไหลเข้า) และ **แกนตามขวาง** (ตั้งฉาก) คุณสมบัติจะแมปไปยังแกนเหล่านี้:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## การจัดเรียงตรงกลางที่สมบูรณ์ — กรณีการใช้งานที่โด่งดัง

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

บรรทัดทั้งสามนี้จัดเรียงลูกไปตรงกลางทั้งในแนวนอนและแนวตั้ง — งานที่ยากมากก่อน Flexbox

## รูปแบบทั่วไป

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

ตัวเลือก `justify-content` ประกอบด้วย `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`

## ทำไมมันถึงสำคัญ

Flexbox เป็นเครื่องมือในแต่ละวันสำหรับแถบนำทาง กลุ่มปุ่ม แถวการ์ด การจัดเรียงตรงกลาง และเลย์เอาต์ "แถวรายการ" ใดๆ

การทำความเข้าใจโมเดลแกนหลัก/แกนตามขวาง (และการที่ `justify-content`/`align-items` เปลี่ยนความหมายเมื่อคุณเปลี่ยน `flex-direction`) เป็นโมเดลจิตใจหลัก

ใช้ Flexbox สำหรับเลย์เอาต์ 1D และ Grid สำหรับ 2D