5 เคล็ดลับ CSS Flexbox ที่นักพัฒนาเว็บทุกคนต้องรู้

CSS Flexible Box Layout หรือ Flexbox คือหนึ่งในโมดูลการจัดวางโครงสร้างหน้าเว็บที่ทรงพลังที่สุด ไม่ว่าคุณกำลังออกแบบแถบเมนูนำทาง หรือสร้างการ์ดข้อมูลแบบตอบสนอง (Responsive) การเข้าใจ 5 เทคนิคนี้จะช่วยให้คุณพัฒนาเว็บได้รวดเร็วและเป็นมืออาชีพยิ่งขึ้น

1. การจัดกึ่งกลางที่สมบูรณ์แบบด้วยโค้ดเพียงสองบรรทัด

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. การใช้คุณสมบัติ Gap แทนการกำหนด Margin

บอกลาการใช้ Margin ติดลบหรือการเขียนตัวเลือก :last-child ที่ซับซ้อน คุณสมบัติ gap ช่วยสร้างระยะห่างระหว่างไอเทมได้อย่างสม่ำเสมอ:

.card-grid {
  display: flex;
  gap: 1.5rem;
}

3. การใช้ Margin Auto ในแถบนำทาง (Navbar)

เมื่อต้องการจัดให้โลโก้อยู่ฝั่งซ้าย และปุ่มผู้ใช้อยู่ฝั่งขวาสุด การกำหนด margin-left: auto ที่องค์ประกอบเป้าหมายจะดันไอเทมที่เหลือไปยังฝั่งตรงข้ามโดยอัตโนมัติ:

.nav-item-user {
  margin-left: auto;
}

4. ความเข้าใจใน flex: 1 1 auto

คำสั่งย่อ flex รวมคุณสมบัติ flex-grow, flex-shrink และ flex-basis เข้าด้วยกัน การใช้ flex: 1 1 0% จะช่วยให้องค์ประกอบขยายและหดตัวได้อย่างสมดุล:

.col-equal {
  flex: 1 1 0%;
}

5. เลย์เอาต์แบบตอบสนองด้วย flex-wrap

เมื่อใช้ flex-wrap: wrap ร่วมกับ flex-basis ไอเทมจะปัดบรรทัดใหม่อัตโนมัติเมื่อหน้าจอมีขนาดเล็กลง โดยไม่ต้องพึ่งพา Media Queries ที่ซับซ้อน:

.responsive-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}