Flexbox: แกน, justify/align, gap, flex-grow

เชี่ยวชาญสองแกนของ Flexbox เพื่อจัดตำแหน่ง จัดให้อยู่กึ่งกลาง และกระจายอีลิเมนต์ในเลย์เอาต์ที่ใช้งานประจำวัน

9 นาที · 3 คำถาม

แถบนำทาง แถวของการ์ด ฟอร์มที่จัดเรียงกัน Flexbox คือเครื่องมือประจำวันสำหรับเลย์เอาต์แบบมิติเดียว ทุกอย่างวางอยู่บนสองแกน แกนหลัก (main axis) (กำหนดโดย flex-direction เป็นแนวนอนตามค่าเริ่มต้น) และ แกนขวาง (cross axis) ที่ตั้งฉากกับแกนแรก justify-content กระจายอีลิเมนต์ไปตามแกนหลัก align-items จัดตำแหน่งพวกมันบนแกนขวาง จำคู่นี้ไว้ มันแก้ปัญหาได้เป็นส่วนใหญ่ ลองมาดูแถบนำทางแบบคลาสสิกกัน

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

การประกาศไม่กี่บรรทัดเปลี่ยนลิสต์นี้ให้กลายเป็นแถบระดับมืออาชีพ space-between ดันโลโก้ไปทางซ้ายและปุ่มไปทางขวา align-items: center จัดอีลิเมนต์ที่มีความสูงต่างกันให้อยู่กึ่งกลางในแนวตั้ง และ gap เว้นระยะห่างระหว่างลิงก์โดยไม่ต้องจัดการ margin ใด ๆ

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

แบบฝึกหัดในใจ ถ้าคุณเปลี่ยน .navbar เป็น flex-direction: column แล้ว justify-content: space-between จะทำอะไร ตอนนี้มันจะกระจายอีลิเมนต์ในแนวตั้ง เพราะแกนหลักได้หมุนไปแล้ว นั่นคือกับดักคลาสสิกของ Flexbox justify-content และ align-items ไม่ได้หมายถึง "แนวนอน" และ "แนวตั้ง" แต่หมายถึง "แกนหลัก" และ "แกนขวาง" อีกกรณีการใช้งานที่ต้องรู้ การจัดเนื้อหาให้อยู่กึ่งกลางอย่างสมบูรณ์แบบ

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow กระจาย พื้นที่ว่างที่เหลือ ให้กับอีลิเมนต์ต่าง ๆ กรณีที่เป็นรูปธรรม เลย์เอาต์ที่มีแถบข้าง (sidebar) ขนาดคงที่ และเนื้อหาที่เติมเต็มส่วนที่เหลือทั้งหมด flex: 0 0 240px ล็อกแถบข้าง (มันจะไม่ขยายหรือหดตัว) ในขณะที่ flex-grow: 1 ให้เนื้อหาดูดซับพื้นที่ว่างทั้งหมดที่มี

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. เมื่อใช้ flex-direction: column แล้ว justify-content ควบคุมอะไร
   • การจัดตำแหน่งอีลิเมนต์ในแนวนอน
   • การจัดตำแหน่งในแนวตั้ง เพราะแกนหลักได้กลายเป็นแนวตั้ง
   • ระยะห่างระหว่างบรรทัดข้อความ
2. การผสมผสานใดจัดอีลิเมนต์ให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งภายใน flex container
   • text-align: center และ vertical-align: middle
   • justify-content: center และ align-items: center
   • margin: 0 auto บน container
3. ใน flex container .a มี flex-grow: 2 และ .b มี flex-grow: 1 จะเกิดอะไรขึ้น
   • .a จะกว้างเป็นสองเท่าของ .b เสมอพอดี
   • .a ได้รับพื้นที่ว่างที่เหลือมากเป็นสองเท่าของ .b
   • .b ถูกซ่อนไปเพื่อเปิดทางให้ .a