แม่แบบ CSS: display: flex;

📝 การใช้งาน

แม่แบบนี้ใช้สำหรับจัดกล่องหรือองค์ประกอบให้อยู่ในแนวนอน เหมาะสำหรับจัดวางการ์ด ปุ่ม หรือเลย์เอาต์ที่ตอบสนองต่ออุปกรณ์

📘 คำอธิบาย

เมื่อกำหนด display: flex; ให้กับองค์ประกอบแม่ องค์ประกอบลูกภายในจะถูกจัดเรียงในแนวนอนโดยอัตโนมัติ พร้อมทั้งสามารถใช้ gap เพื่อปรับระยะห่างได้ ตัวอย่างนี้ใช้ .flex-container เป็นแม่ และ .flex-box เป็นกล่องลูก

✅ ตัวอย่าง

กล่อง 1

กล่อง 2

กล่อง 3

📄 โค้ด (บางส่วน)

<style>
  .flex-container {
    display: flex;
    gap: 1rem;
  }
  .flex-box {
    flex: 1;
    padding: 1rem;
    background: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-box">กล่อง 1</div>
  <div class="flex-box">กล่อง 2</div>
  <div class="flex-box">กล่อง 3</div>
</div>

📦 โค้ด (HTML เต็มรูปแบบ)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวอย่าง Flex Layout</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
    }
    .flex-box {
      flex: 1;
      padding: 1rem;
      background: #f2f2f2;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-box">กล่อง 1</div>
    <div class="flex-box">กล่อง 2</div>
    <div class="flex-box">กล่อง 3</div>
  </div>
</body>
</html>

คัดลอกแล้ว!

🧩 เทคนิคการใช้งาน Flexbox Layout อย่างมีประสิทธิภาพ

display: flex เป็นหนึ่งในคุณสมบัติของ CSS ที่ทรงพลังที่สุดในเลย์เอาต์เว็บยุคใหม่ ช่วยให้สามารถจัดวางองค์ประกอบต่าง ๆ ได้อย่างเป็นธรรมชาติ และเหมาะอย่างยิ่งกับการออกแบบแบบ Responsive

🎯 เทคนิคการจัดตำแหน่งพื้นฐาน

ใช้ justify-content เพื่อควบคุมการจัดตำแหน่งในแนวนอน และ align-items เพื่อควบคุมในแนวตั้ง ตัวอย่างเช่น justify-content: space-between จะจัดเรียงองค์ประกอบให้มีระยะห่างเท่ากันและชิดขอบทั้งสองด้าน หากเพิ่ม flex-wrap: wrap องค์ประกอบจะขึ้นบรรทัดใหม่โดยอัตโนมัติเมื่อหน้าจอแคบลง

✨ การปรับแต่งเลย์เอาต์ขั้นสูง

คุณสามารถควบคุมสัดส่วนขององค์ประกอบลูกได้อย่างละเอียดด้วยคุณสมบัติ flex เช่น flex: 2 ร่วมกับ flex: 1 จะได้การแบ่งพื้นที่แบบ 2:1 และคุณสามารถใช้ order เพื่อเปลี่ยนลำดับการแสดงผลโดยไม่ต้องเปลี่ยนโครงสร้าง HTML

📱 เคล็ดลับสำหรับการออกแบบ Responsive

สำหรับการแสดงผลบนมือถือ คุณสามารถใช้ flex-direction: column เพื่อเปลี่ยนการจัดเรียงเป็นแนวตั้ง ร่วมกับ media queries จะช่วยให้ปรับเลย์เอาต์ให้เหมาะกับแต่ละอุปกรณ์ได้ นอกจากนี้การปรับค่า gap ตามขนาดหน้าจอก็เป็นแนวทางที่ดีเช่นกัน

Flexbox ทรงพลังมาก แต่ถ้าคุณต้องการสร้างเลย์เอาต์ที่ซับซ้อนยิ่งขึ้น ควรพิจารณาใช้ Grid Layout แทน และหากจำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า ควรเพิ่ม prefix อย่าง display: -webkit-box ด้วย