ควบคุมมิติ Flex Items ใน CSS (Flex Property)

Flex Shorthand: flex-grow, flex-shrink, flex-basis ในบรรทัดเดียว

Property flex คือ shorthand ของ 3 ค่า: flex-grow (ขยาย), flex-shrink (หด), flex-basis (ขนาดฐาน) ควบคุมการแบ่งพื้นที่ใน flex container

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .container { display: flex; width: 100%; }
    div { width: 200px; height: 200px; color: white; text-align: center; font-size: 30px; }
    .first { background-color: rgb(55, 0, 255); flex: 2 1 auto; } /* grow 2, shrink 1, basis auto */
    .second { background-color: red; }
    .third { background-color: rgb(140, 0, 255); }
  </style>
</head>
<body>
  <h1>ควบคุมมิติ Flex Items</h1>
  <div class="container">
    <div class="first">First Div</div>
    <div class="second">Second Div</div>
    <div class="third">Third Div</div>
  </div>
</body>
</html>

Flex Values แบบละเอียด

• flex: 1 = flex: 1 1 0% (grow 1, shrink 1, basis 0) – แบ่งพื้นที่เท่าๆ กัน
• flex: auto = flex: 1 1 auto – ใช้ content size เป็น basis แล้วขยาย/หดได้
• flex: none = flex: 0 0 auto – ไม่ขยายไม่หด ใช้ content size
• flex: 2 1 300px – grow 2, shrink 1, basis 300px

Flex-grow / Flex-shrink / Flex-basis แยกกัน

.item {
  flex-grow: 1;    /* ส่วนแบ่งพื้นที่ว่าง */
  flex-shrink: 1;  /* ส่วนแบ่งการหดเมื่อแคบ */
  flex-basis: 200px; /* ขนาดเริ่มต้นก่อน grow/shrink */
}

ตัวอย่างใช้งาน: Sidebar + Content

.sidebar { flex: 0 0 280px; } /* คงที่ 280px ไม่ขยายไม่หด */
.main { flex: 1 1 auto; } /* เติมพื้นที่เหลือ */

Flex property เป็นหัวใจของ Flexbox layout – เรียนรู้ให้เก่ง จะสร้าง layout ได้ยืดหยุ่นทุกแบบ