Flexbox ใน CSS - Difference ระหว่าง justify-content กับ align-items

หัวข้อ: Flexbox ใน CSS - ความแตกต่างระหว่าง justify-content กับ align-items

นับตั้งแต่การพัฒนาเว็บไซต์เริ่มต้น การจัดการเลย์เอาต์ของหน้าจอถือเป็นหนึ่งในปัญหามากที่สุดที่นักพัฒนาเว็บต้องเผชิญ การสร้างและปรับเปลี่ยนเลย์เอาต์ในแต่ละครั้งมักจะใช้เวลาและความพยายามเป็นอย่างมาก จึงเกิดเทคนิคใหม่ ๆ ในการแก้ปัญหาเหล่านี้ขึ้น ในช่วงหลายปีที่ผ่านมา CSS ได้ถูกพัฒนาเพื่อให้สามารถจัดการเลย์เอาต์ได้ง่ายขึ้น รวมถึงหนึ่งในความสามารถที่มีประสิทธิภาพมากที่สุดคือ Flexbox

Flexbox เป็นระบบการจัดการเลย์เอาต์ที่มีประสิทธิภาพมากใน CSS ที่ช่วยให้นักพัฒนาออกแบบเลย์เอาต์ของหน้าเว็บได้สะดวกและรวดเร็ว ด้วยความยืดหยุ่นที่มากกว่าการใช้ CSS แบบเดิม Flexbox สามารถปรับเปลี่ยนและจัดเรียงองค์ประกอบต่าง ๆ ได้ตามความต้องการของนักพัฒนา

สำหรับผู้เริ่มต้นศึกษา Flexbox สิ่งที่มักจะสร้างความสับสนคือการใช้งานคุณสมบัติ `justify-content` และ `align-items` ซึ่งทั้งสองนี้มีบทบาทสำคัญในการจัดการเลย์เอาต์ขององค์ประกอบภายในคอนเทนเนอร์เดียวกัน แต่ทำงานต่างกันดังนี้:

Justify-Content

`justify-content` ใช้ในการจัดตำแหน่งขององค์ประกอบภายในคอนเทนเนอร์ที่เรียงตามแนวนอน หรือในกรณีที่มีการกำหนด `flex-direction: column;` จะจัดเรียงในแนวตั้ง ค่าที่มักใช้สำหรับ `justify-content` ได้แก่:

- `flex-start`: องค์ประกอบจะจัดเรียงชิดซ้าย (แนวนอน) หรือชิดต้นคอลัมน์ (แนวตั้ง)

- `flex-end`: องค์ประกอบจะจัดเรียงชิดขวา (แนวนอน) หรือชิดท้ายคอลัมน์ (แนวตั้ง)

- `center`: องค์ประกอบจะจัดเรียงอยู่กึ่งกลาง

- `space-between`: องค์ประกอบจะจัดเรียงโดยให้พื้นที่ว่างระหว่างองค์ประกอบเป็นค่ามากที่สุดเท่ากัน

- `space-around`: องค์ประกอบจะจัดเรียงโดยให้พื้นที่ว่างทั้งก่อนและหลังแต่ละองค์ประกอบเท่ากัน

ตัวอย่างโค้ดของการใช้ `justify-content`:

.container {
  display: flex;
  justify-content: space-between;
}

Align-Items

`align-items` เป็นคุณสมบัติที่ใช้ในการจัดตำแหน่งขององค์ประกอบภายในคอนเทนเนอร์ในแกนนอน (หรือแนวตั้งเมื่อใช้ `flex-direction: column;`) ซึ่งเป็นการจัดเรียงองค์ประกอบในแนวตั้งสำหรับค่า `flex-direction` เริ่มต้น ค่าที่ใช้บ่อยได้แก่:

- `flex-start`: องค์ประกอบจะจัดเรียงชิดด้านบน

- `flex-end`: องค์ประกอบจะจัดเรียงชิดด้านล่าง

- `center`: องค์ประกอบจะจัดเรียงอยู่กึ่งกลาง

- `baseline`: องค์ประกอบจะจัดเรียงโดยใช้แนวเส้นฐานของตัวอักษร

- `stretch`: องค์ประกอบจะถูกยืดออกจนเต็มความสูงของคอนเทนเนอร์

ตัวอย่างโค้ดของการใช้ `align-items`:

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

Use Case และความสำคัญ

การใช้ `justify-content` และ `align-items` ช่วยให้การออกแบบหน้าเว็บเป็นระเบียบและมีความยืดหยุ่นมากขึ้น เช่น ในการสร้างแถบการนำทางที่ต้องการให้องค์ประกอบต่าง ๆ อยู่ในระนาบเดียวกันและมีการกระจายพื้นที่เท่า ๆ กันที่ด้านซ้ายขวา รวมถึงการจัดภาพและข้อความให้อยู่กึ่งกลางของกล่องโดยที่ไม่จำเป็นต้องคำนวณค่ามาร์จินหรือแพดดิ้งด้วยตนเอง

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

ตัวอย่างการใช้งานจริงในโปรเจค

ลองนึกถึงกรณีที่ต้องการจัดหน้าเว็บที่มีส่วนของ content ที่ประกอบด้วย Navigation bar ที่ด้านบน, Main content ที่ตรงกลาง และ Footer ที่อยู่ด้านล่าง:

<div class="container">
  <nav class="navbar">Navigation</nav>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.navbar, .footer {
  background-color: #ccc;
  padding: 10px;
}

.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eaeaea;
}

โค้ดด้านบนเป็นตัวอย่างการใช้ Flexbox ที่มีการจัดเรียง Navigation bar, Main content, และ Footer โดยใช้คุณสมบัติ `justify-content` และ `align-items` เพื่อจัดเรียงเนื้อหาให้มีความสอดคล้องและสวยงาม

การเข้าใจและใช้ `justify-content` กับ `align-items` อย่างถูกต้องจะช่วยให้นักพัฒนาเว็บสามารถจัดการเลย์เอาต์ที่ซับซ้อนให้กลายเป็นเรื่องง่ายดายขึ้น

บทสรุป

Flexbox นับเป็นเครื่องมือที่สำคัญมากในแวดวงการพัฒนาเว็บไซต์ ด้วยคุณสมบัติ `justify-content` และ `align-items` ที่ช่วยให้การจัดการเลย์เอาต์หยืดหยุ่นและสะดวกสบายมากขึ้น สำหรับผู้ที่สนใจเรียนรู้และเพิ่มพูนทักษะด้านการเขียนโปรแกรม เราขอเชิญชวนให้คุณเข้ามาศึกษาเพิ่มเติมกับเราได้ที่ Expert Programming Tutor (EPT) ที่นี่คุณจะได้พบกับหลักสูตรที่ออกแบบมาเพื่อตอบสนองความต้องการของผู้เรียนในทุกระดับ ทั้งนี้ขึ้นอยู่กับความสนใจและเป้าหมายของคุณเอง!

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/