Flexbox (Flexible Box Layout): โมดเลย์เอาต์ทรงพลังของ CSS3
Flexbox จัดการ layout แบบ 1 มิติ (Row หรือ Column) จัดการ alignment, distribution, ordering, sizing ได้อัตโนมัติ เหมาะกับ UI components, navigation, card grids, form layouts
Container Properties (บน Flex Container)
| Property | คำอธิบาย |
|---|
| flex-direction | row | row-reverse | column | column-reverse |
| flex-wrap | nowrap | wrap | wrap-reverse |
| flex-flow | shorthand: direction + wrap |
| justify-content | จัดแนว main axis: flex-start/end/center/space-between/around/evenly |
| align-items | จัดแนว cross axis (single line): stretch/center/flex-start/end/baseline |
| align-content | จัดแนว cross axis (multi-line): stretch/center/flex-start/end/space-between/around |
Item Properties (บน Flex Items)
| Property | คำอธิบาย |
|---|
| order | ลำดับแสดงผล (default 0) |
| flex-grow | ขยายสัดส่วนพื้นที่ว่าง |
| flex-shrink | หดสัดส่วนเมื่อแคบ |
| flex-basis | ขนาดเริ่มต้นก่อน grow/shrink |
| flex | shorthand: grow shrink basis |
| align-self | override align-items ต่อ item |
โค้ดตัวอย่างสาธิตหลาย Container
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; }
.container1 > div, .container2 > div, .container3 > div, .container4 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; }
.container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; }
.container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; }
.container4 { background-color: rgb(26, 10, 168); width: 200px; margin: 20px; }
</style>
</head>
<body>
<h1>Flex Layout Example</h1>
<div class="container">
<div class="container1"><div>1</div><div>2</div><div>3</div></div>
<div class="container2"><div>1</div><div>2</div><div>3</div></div>
<div class="container3"><div>1</div><div>2</div><div>3</div></div>
<div class="container4"><div>1</div><div>2</div><div>3</div></div>
</div>
</body>
</html>
เมื่อไหร่ควรใช้ Flexbox vs Grid
- Flexbox: 1D layout (Row/Column), Content-first, Component-level
- Grid: 2D layout (Rows + Columns), Layout-first, Page-level
- ใช้ร่วมกันได้: Grid สำหรับ page layout, Flexbox สำหรับ components ภายใน
