📦 การจัด Layout ด้วย Flexbox

Flexbox (ย่อมาจาก Flexible Box) เป็นเทคนิคใน CSS ที่ช่วยให้เราจัดเรียง Layout ได้ง่ายและยืดหยุ่นมากขึ้น โดยเฉพาะเมื่อต้องจัดเรียงองค์ประกอบแนวนอนหรือแนวตั้ง

🔧 ขั้นพื้นฐานของ Flexbox

<div style="display: flex; gap: 10px;">
  <div style="background: #4CAF50; color: white; padding: 20px; flex: 1;">กล่องที่ 1</div>
  <div style="background: #4CAF50; color: white; padding: 20px; flex: 1;">กล่องที่ 2</div>
  <div style="background: #4CAF50; color: white; padding: 20px; flex: 1;">กล่องที่ 3</div>
</div>

🧭 แกนหลักของ Flexbox

Flexbox ใช้แนวแกนหลัก (Main Axis) และแนวขวาง (Cross Axis) เพื่อจัดเรียงเนื้อหา

คำสั่ง	คำอธิบาย
justify-content	จัดเรียงจากแนวหลัก
align-items	จัดเรียงตามแนวแกนขวาง
flex-wrap	พับบรรทัดเมื่อเกินความกว้าง
flex-grow	ขยายกล่องเมื่อมีพื้นที่เหลือ

✅ ตัวอย่างจัดกล่องให้อยู่กึ่งกลาง

<div style="display: flex; justify-content: center; align-items: center; height: 200px; background: #ddd;">
  <div style="background: #ff6347; color: white; padding: 30px;">อยู่ตรงกลาง</div>
</div>

📐 ตัวอย่างการจัด Flexbox อื่น ๆ

<div style="display: flex; justify-content: space-between; align-items: flex-start;">
  <div style="background: #2196f3; color: white; padding: 20px;">Box A</div>
  <div style="background: #2196f3; color: white; padding: 20px;">Box B</div>
  <div style="background: #2196f3; color: white; padding: 20px;">Box C</div>
</div>