Flexbox (Flexible Box Layout) เป็น CSS layout mode สำหรับจัดเรียง item ใน container แนวหนึ่ง (1D) ทำให้ responsive และจัดการพื้นที่ได้ยืดหยุ่น ไม่ต้องใช้ float/positioning ซับซ้อน
หลักการพื้นฐาน
- Flex Container - element ที่มี
display: flexหรือinline-flex - Flex Items - ลูกโดยตรงของ flex container
- แกนหลัก (Main axis) และแกนรอง (Cross axis) เปลี่ยนตาม
flex-direction
Container Properties
| Property | ค่า | คำอธิบาย |
|---|---|---|
display | flex / inline-flex | เปิดใช้ flexbox |
flex-direction | row / column / row-reverse / column-reverse | ทิศทางหลัก |
flex-wrap | nowrap / wrap / wrap-reverse | ขึ้นบรรทัดใหม่ได้ไหม |
justify-content | flex-start / center / flex-end / space-between / space-around / space-evenly | จัดบน main axis |
align-items | stretch / center / flex-start / flex-end / baseline | จัดบน cross axis |
align-content | เหมือน justify-content แต่สำหรับหลายบรรทัด | จัดกลุ่มบรรทัด |
gap | 10px / 1rem | ช่องว่างระหว่าง items |
Item Properties
| Property | คำอธิบาย |
|---|---|
flex-grow | ขยายตัวเท่าไหร่ (default 0) |
flex-shrink | หดตัวเท่าไหร่ (default 1) |
flex-basis | ขนาดเริ่มต้นก่อนกระจายพื้นที่ |
flex | shorthand: flex: 1 1 auto (grow shrink basis) |
align-self | override align-items ต่อ item |
order | ลำดับการแสดง (default 0) |
ตัวอย่าง Layout แบบคลาสสิก (Holy Grail)
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
min-height: 100vh;
}
header, footer { flex: 1 100%; background: #fafafa; padding: 1rem; }
nav { flex: 1 200px; background: #eee; padding: 1rem; }
main { flex: 5 0px; padding: 1rem; }
@media (max-width: 768px) {
nav { order: 1; flex: 1 100%; }
main { order: 2; flex: 5 0px; }
footer { order: 3; }
}
</style>
</head>
<body>
<div class="flex-container">
<header><h1>Site Title</h1></header>
<nav>Navigation</nav>
<main><h2>Main Content</h2><p>Content...</p></main>
<footer>Footer</footer>
</div>
</body>
</html>
Browser Support
รองรับทุก browser รุ่นใหม่ (Chrome 29+, Firefox 28+, Safari 9+, Edge 12+) ไม่ต้อง prefix แล้ว
