การกำหนดความกว้างคงที่ (Fixed Width) ให้ Item ใน CSS Flexbox

CSS Flexbox Property flex ควบคุมการขยาย/หดตัวของ Flex Items การตั้งค่า Fixed Width ให้ Item บางตัว ขณะที่อีกตัวเติมพื้นที่ว่าง ใช้ flex: 0 0 width (ไม่ Grow, ไม่ Shrink, Basis = Width)

Syntax

selector {
  flex:   ;
  /* shorthand */
  flex: none | auto | initial |  | ;
}

Flex Values

ตัวอย่างที่ 1: Fixed Width Item + Flexible Items

<!DOCTYPE html>
<html>
<head>
  <style>
    div { display: flex; padding: 4%; }
    .d1 { background: hotpink; flex: 0 0 20px; } /* Fixed 20px */
    .d2 { background: greenyellow; flex: 1; }     /* Flexible */
    .d3 { background: tomato; flex: 1; }          /* Flexible */
  </style>
</head>
<body>
  <div class="demo">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </div>
</body>
</html>

ผลลัพธ์: .d1 กว้าง 20px คงที่ .d2 และ .d3 แบ่งพื้นที่เหลือเท่าๆ กัน

ตัวอย่างที่ 2: ผสมผสานหลายแบบ

<!DOCTYPE html>
<html>
<style>
  div { display: flex; border-radius: 2%; background-color: linen; height: 50px; }
  #d1 { border: 5px solid orangered; padding: 2%; flex: auto; }      /* Flexible, content-based */
  #d2 { border: 5px groove greenyellow; width: 66px; }               /* Fixed width (no flex) */
  #d3 { padding: 5%; border: 5px ridge hotpink; }                    /* Default (flex: initial) */
  #d4 { height: 100px; border: 5px solid magenta; }                  /* ไม่ได้อยู่ใน Flex Container นี้ */
</style>
<body>
  <div>
    <div id="d1">Auto Resize</div>
    <div id="d2">66px fixed width</div>
    <div id="d3"></div>
  </div>
  <div id="d4">Last Div</div>
</body>
</html>

สรุปการใช้งาน Flex Values

Fixed Width (ไม่ยอมขยาย/หด)

.fixed-item {
  flex: 0 0 200px; /* หรือ flex: none; width: 200px; */
}

Flexible (แบ่งพื้นที่ว่าง)

.flexible-item {
  flex: 1; /* flex: 1 1 0% */
}
/* ทุกตัวที่ flex: 1 จะแบ่งพื้นที่เท่าๆ กัน */

Content-based (ขยาย/หดตามเนื้อหา)

.content-item {
  flex: auto; /* flex: 1 1 auto */
}
/* เริ่มจากขนาดเนื้อหา แล้วขยาย/หดร่วมกับ Flexible Items */

Min/Max Width Constraints

.constrained-item {
  flex: 1;
  min-width: 150px;  /* ไม่เล็กกว่านี้ */
  max-width: 400px;  /* ไม่ใหญ่กว่านี้ */
}

Pattern ที่นิยม: Sidebar + Main Content

.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  flex: 0 0 280px;        /* Fixed 280px */
  background: #f5f5f5;
  border-right: 1px solid #ddd;
}
.main {
  flex: 1;                /* เติมพื้นที่เหลือ */
  min-width: 0;           /* สำคัญ! ป้องกัน Overflow */
  padding: 2rem;
}

คำเตือนสำคัญ: min-width: 0

Flex Item ที่มี flex: 1 และมีเนื้อหาที่ Overflow (เช่น Text ยาว, Table, Image ใหญ่) จะทำให้ Layout พัง ต้องเพิ่ม min-width: 0 (หรือ overflow: hidden) เพื่อให้ Flexbox หด Item ได้

.main {
  flex: 1;
  min-width: 0; /* Critical for text truncation */
  overflow: hidden;
}
.main p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Debugging Flexbox

• DevTools: ตรวจสอบ Computed > Flex properties
• Outline Flex Container: outline: 2px dashed red
• ใช้ gap แทน Margin ระหว่าง Items
• Flexbox Froggy / Flexbox Defense - เกมฝึก Flexbox