การจัดวางกล่องยืดหยุ่น (Flexbox) ใน CSS3

CSS3 นำเสนอโหมดการจัดวาง (Layout Mode) ใหม่ชื่อว่า Flexible Box Layout หรือที่รู้จักกันในชื่อ Flexbox โหมดนี้ช่วยให้สร้างเลย์เอาต์ที่ซับซ้อนและตอบสนอง (Responsive) ได้อย่างง่ายดาย โดยไม่ต้องพึ่งพา float หรือ positioning แบบเดิม

คุณสมบัติหลักของ Flex Container

เมื่อตั้งค่า display: flex หรือ display: inline-flex ให้กับองค์ประกอบกึ่งภาชนะ (Container) จะมีคุณสมบัติดังนี้:

• flex-direction: กำหนดทิศทางของแกนหลัก (row, row-reverse, column, column-reverse)
• flex-wrap: ควบคุมการล้อมรอบของ flex items (nowrap, wrap, wrap-reverse)
• flex-flow: เขียนย่อรวมของ flex-direction และ flex-wrap
• justify-content: จัดตำแหน่ง items ตามแกนหลัก (flex-start, center, space-between, space-around, space-evenly)
• align-items: จัดตำแหน่ง items ตามแกนรอง (stretch, flex-start, center, baseline)
• align-content: จัดตำแหน่งบรรทัดหลายบรรทัดตามแกนรอง (เมื่อมี flex-wrap: wrap)

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

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: lightblue;
    padding: 20px;
  }
  .flex-box {
    display: flex;
    width: 200px;
    margin: 20px;
    padding: 10px;
  }
  .flex-box > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    font-size: 24px;
    text-align: center;
    flex: 1;
  }
  .box1 { background-color: rgb(71, 30, 255); align-items: flex-start; }
  .box2 { background-color: rgb(14, 126, 79); justify-content: center; }
  .box3 { background-color: rgb(168, 60, 10); flex-direction: column; align-items: center; }
  .box4 { background-color: rgb(26, 10, 168); }
</style>
</head>
<body>
  <h1>ตัวอย่าง Flex Layout</h1>
  <div class="container">
    <div class="flex-box box1">
      <div>1</div> <div>2</div> <div>3</div>
    </div>
    <div class="flex-box box2">
      <div>1</div> <div>2</div> <div>3</div>
    </div>
    <div class="flex-box box3">
      <div>1</div> <div>2</div> <div>3</div>
    </div>
    <div class="flex-box box4">
      <div>1</div> <div>2</div> <div>3</div>
    </div>
  </div>
</body>
</html>

ผลลัพธ์

โค้ดด้านบนจะแสดงกล่อง 4 ชุดที่จัดวางด้วย Flexbox แบบต่างกัน:

• ชุดที่ 1 (สีน้ำเงิน): จัดชิดด้านบน (align-items: flex-start)
• ชุดที่ 2 (สีเขียว): จัดกึ่งกลางแนวนอน (justify-content: center)
• ชุดที่ 3 (สีส้ม): จัดเรียงแนวตั้ง (flex-direction: column) และกึ่งกลางแนวนอน
• ชุดที่ 4 (สีม่วง): ค่าเริ่มต้น (stretch ทั้งความสูงและกว้าง)

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้