การสร้าง Layout ด้วย Flexbox

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้งาน float เพื่อจัด Layout ซึ่งเป็นวิธีที่ใช้กันมานาน แต่ก็มีข้อจำกัดหลายอย่าง เช่น ปัญหา Container Collapse และความซับซ้อนในการจัด Layout ที่ซับซ้อนกว่าเดิม โชคดีที่เรามี Flexbox! ในบทนี้ เราจะมาทำความรู้จักกับ Flexbox ซึ่งเป็นเครื่องมือที่ทรงพลังและยืดหยุ่นกว่าในการจัด Layout บนเว็บไซต์ของเรา

Flexbox คืออะไร?

Flexbox หรือ Flexible Box Layout เป็นโมเดล CSS ที่ออกแบบมาเพื่อสร้าง Layout ที่ยืดหยุ่นและตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน Flexbox ช่วยให้เราควบคุมการจัดเรียง, การกระจายพื้นที่ว่าง, และการจัดตำแหน่ง Element ภายใน Container ได้อย่างง่ายดาย

เริ่มต้นใช้งาน Flexbox: `display: flex`

ขั้นตอนแรกในการใช้งาน Flexbox คือการกำหนด display: flex ให้กับ Container ที่เราต้องการจัด Layout ด้วย Flexbox Container นี้จะกลายเป็น "Flex Container" และ Element ที่อยู่ภายใน Container จะกลายเป็น "Flex Items"

.container {
  display: flex;
}

ลองดูตัวอย่าง HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

และ CSS:

.container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

เมื่อเรากำหนด display: flex ให้กับ .container, Flex Items (.item) จะถูกจัดเรียงให้อยู่ในบรรทัดเดียวกันโดยอัตโนมัติ (จากซ้ายไปขวา) นี่คือพฤติกรรมเริ่มต้นของ Flexbox

`flex-direction`: กำหนดทิศทางการจัดเรียง

flex-direction เป็นคุณสมบัติที่ใช้กำหนดทิศทางการจัดเรียง Flex Items มีค่าที่เป็นไปได้ดังนี้:

row (ค่าเริ่มต้น): จัดเรียงจากซ้ายไปขวา
row-reverse: จัดเรียงจากขวาไปซ้าย
column: จัดเรียงจากบนลงล่าง
column-reverse: จัดเรียงจากล่างขึ้นบน

ตัวอย่าง:

.container {
  display: flex;
  flex-direction: column; /* จัดเรียงเป็นคอลัมน์ */
}

ในกรณีนี้, Flex Items จะถูกจัดเรียงในแนวตั้งจากบนลงล่าง

`justify-content`: จัดตำแหน่งตามแกนหลัก (Main Axis)

justify-content ใช้สำหรับจัดตำแหน่ง Flex Items ตามแกนหลัก (Main Axis) ซึ่งขึ้นอยู่กับค่าของ flex-direction ถ้า flex-direction เป็น row, แกนหลักคือแนวนอน ถ้าเป็น column, แกนหลักคือแนวตั้ง

ค่าที่เป็นไปได้ของ justify-content:

flex-start (ค่าเริ่มต้น): จัดชิดจุดเริ่มต้นของแกนหลัก
flex-end: จัดชิดจุดสิ้นสุดของแกนหลัก
center: จัดกึ่งกลางตามแกนหลัก
space-between: กระจาย Flex Items ให้มีช่องว่างเท่ากันระหว่างกัน
space-around: กระจาย Flex Items ให้มีช่องว่างเท่ากันรอบๆ แต่ละ Item
space-evenly: กระจาย Flex Items ให้มีช่องว่างเท่ากันระหว่าง Item และขอบ Container

ตัวอย่าง:

.container {
  display: flex;
  justify-content: center; /* จัดกึ่งกลางในแนวนอน (ถ้า flex-direction: row) */
}

หรือ:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* กระจาย Item ให้มีช่องว่างเท่ากันระหว่างกันในแนวตั้ง */
}

`align-items`: จัดตำแหน่งตามแกนไขว้ (Cross Axis)

align-items ใช้สำหรับจัดตำแหน่ง Flex Items ตามแกนไขว้ (Cross Axis) ซึ่งก็ขึ้นอยู่กับค่าของ flex-direction ถ้า flex-direction เป็น row, แกนไขว้คือแนวตั้ง ถ้าเป็น column, แกนไขว้คือแนวนอน

ค่าที่เป็นไปได้ของ align-items:

stretch (ค่าเริ่มต้น): ยืด Flex Items ให้เต็มความสูง (หรือความกว้าง) ของ Container
flex-start: จัดชิดจุดเริ่มต้นของแกนไขว้
flex-end: จัดชิดจุดสิ้นสุดของแกนไขว้
center: จัดกึ่งกลางตามแกนไขว้
baseline: จัดให้ Baseline ของข้อความใน Flex Items ตรงกัน

ตัวอย่าง:

.container {
  display: flex;
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง (ถ้า flex-direction: row) */
  height: 200px; /* กำหนดความสูงของ Container เพื่อให้เห็นผลการจัดตำแหน่ง */
}

หรือ:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* จัดชิดขวา (ถ้า flex-direction: column) */
}

กรณีใช้งานจริง: Navigation Bar

Flexbox เหมาะอย่างยิ่งสำหรับการสร้าง Navigation Bar ที่สวยงามและตอบสนองต่อขนาดหน้าจอ ลองดูตัวอย่าง:

<nav class="navbar">
  <a href="#" class="logo">My Website</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* กระจาย Logo และ Links */
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  background-color: #333;
  color: white;
  padding: 10px 20px;
}

.nav-links {
  display: flex; /* จัด Links ให้อยู่ในบรรทัดเดียวกัน */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

ในตัวอย่างนี้ เราใช้ Flexbox เพื่อจัดวาง Logo และ Navigation Links ให้อยู่ในบรรทัดเดียวกัน โดยใช้ justify-content: space-between เพื่อกระจายให้ Logo อยู่ด้านซ้ายสุด และ Links อยู่ด้านขวาสุด นอกจากนี้ เรายังใช้ align-items: center เพื่อจัดให้ทุกอย่างอยู่กึ่งกลางในแนวตั้ง

ข้อผิดพลาดที่พบบ่อย

ลืมกำหนด display: flex: นี่เป็นข้อผิดพลาดที่พบบ่อยที่สุด! อย่าลืมกำหนด display: flex ให้กับ Container ที่คุณต้องการใช้ Flexbox
เข้าใจผิดระหว่าง justify-content และ align-items: จำไว้ว่า justify-content ควบคุมการจัดตำแหน่งตามแกนหลัก (Main Axis) ส่วน align-items ควบคุมการจัดตำแหน่งตามแกนไขว้ (Cross Axis)
Container Collapse (คล้ายกับปัญหาใน float): Flexbox มักจะไม่ทำให้เกิด Container Collapse เหมือน float แต่ถ้าคุณกำหนด height ของ Flex Items เป็นเปอร์เซ็นต์ และ Container ไม่มี height ที่ชัดเจน, Flex Items อาจไม่แสดงผลตามที่ต้องการ

สรุป

Flexbox เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง Layout ที่ยืดหยุ่นและตอบสนองได้ดี ในบทนี้ เราได้เรียนรู้คุณสมบัติพื้นฐาน เช่น display: flex, flex-direction, justify-content, และ align-items ลองนำความรู้เหล่านี้ไปประยุกต์ใช้ในการสร้าง Layout ของคุณ แล้วคุณจะพบว่า Flexbox ช่วยให้ชีวิตง่ายขึ้นมาก!

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ CSS Grid ซึ่งเป็นอีกหนึ่งเครื่องมือที่ทรงพลังสำหรับการสร้าง Layout ที่ซับซ้อนยิ่งขึ้น

การสร้าง Layout ด้วย Flexbox