จัดเรียง Column DIVs แบบ Left-Center-Right ด้วย CSS Flexbox

CSS Flexbox Property justify-content จัดเรียง Flex Items ตาม Main Axis ค่า space-between วาง Item แรกซ้ายสุด Item สุดท้ายขวาสุด และกระจาย Item กลางเท่าๆ กัน สร้าง Layout Left-Center-Right ได้อย่างง่ายดาย

Syntax

selector {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Justify-content Values

ตัวอย่างที่ 1: Left-Center-Right (3 Items)

<!DOCTYPE html>
<html>
<head>
  <style>
    #root {
      margin: 5%;
      display: flex;
      justify-content: space-between;
    }
    #one { box-shadow: inset 0 0 34px #b798e1; }
    #two { box-shadow: inset 0 0 34px #236fa0; }
    #three { box-shadow: inset 0 0 34px #43946a; }
    .element {
      padding: 7%;
      border-radius: 15%;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="element" id="one">1</div>
    <div class="element" id="two">2</div>
    <div class="element" id="three">3</div>
  </div>
</body>
</html>

ตัวอย่างที่ 2: Space-evenly (6 Items)

<!DOCTYPE html>
<html>
<head>
  <style>
    #root {
      margin: 5%;
      padding: 2%;
      display: flex;
      justify-content: space-evenly;
      box-shadow: inset 0 10px 40px magenta;
      font-weight: bold;
    }
    div > div {
      padding: 2%;
      border-radius: 15%;
    }
    div:nth-of-type(even) { box-shadow: inset 2px 2px 20px orange; }
    div > div:nth-of-type(odd) { box-shadow: inset 2px 2px 20px lightblue; }
  </style>
</head>
<body>
  <div id="root">
    <div>1</div> <div>2</div> <div>3</div>
    <div>4</div> <div>5</div> <div>6</div>
  </div>
</body>
</html>

Complete Layout Patterns

1. Header: Logo Left, Nav Center, Actions Right

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
.nav { display: flex; gap: 2rem; }
.actions { display: flex; gap: 1rem; }

2. Card: Avatar Left, Content Center, Action Right

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}
.card-content { flex: 1; }

3. Footer: Copyright Left, Social Center, Legal Right

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem;
}

Alignment Axis: Main vs Cross

Gap Property (Modern Spacing)

.container {
  display: flex;
  justify-content: space-between;
  gap: 2rem; /* ระหว่าง Items เท่านั้น ไม่รวม Edge */
}

/* แทน Margin Hack */
.item + .item { margin-left: 2rem; } /* เก่า */
gap: 2rem; /* ใหม่ - Cleaner */

Responsive Justify-content

.container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: stretch; /* หรือ center */
  }
  /* บน Mobile: space-between ไม่มีผล (Cross Axis) */
  /* ใช้ align-items แทน */
}

Debugging Tips

• DevTools: Elements > Styles > Layout > Flex Container (Badge)
• Outline Container: outline: 2px dashed red
• Visualize Gap: gap: 1rem; background: red บน Container
• Flexbox Froggy / Flexbox Defense - เกมฝึก

Common Mistakes

• ลืม display: flex บน Parent
• ใช้ justify-content บน Child (ต้องอยู่บน Parent)
• คาดหวัง space-between ทำงานกับ 1 Item (ต้องมี ≥ 2 Items)
• ไม่ตั้ง min-width: 0 ให้ Flexible Item ที่มี Text ยาว