แต่ก่อนเวลาเราต้องการจัด Layout ของเว็บไซต์ เราใช้ <table> ในการทำ หลังจากนั้นมีการพัฒนามาใช้งาน float หรือ position และในปัจจุบันที่เขียนบทความนี้อยู่ เรามี flex และ grid ที่ใช้ในการจัด Layout ของเว็บไซต์
สิ่งที่ flex และ grid ดีกว่า <table>, float และ position ตรงที่สามารถจัดการการจัดเรียงเนื้อหา จัดเรียง element ได้ด้วย attribute ที่ใช้ร่วมกับ flex และ grid
โดย Flexbox เป็นสิ่งที่มาช่วยในการจัด Layout ในมิติเดียว ( แนวตั้ง หรือแนวนอน ) ยกตัวอย่างให้เห็นภาพ คือเวลาทำเว็บไซต์แล้วอยากให้กล่องเนื้อหาเราอยู่ด้านซ้าย และกล่อง sidebar อยู่ด้านขวา
เราสามารถใช้ CSS Flexbox ทำอะไรได้บ้าง
ในการจัด Layout ด้วย CSS Flex นั้น สามารถตัดสินใจเพื่อจะใช้งานด้วยสิ่งต่าง ๆ เหล่านี้ได้
- จัดรูปแบบการแสดงผลมิติเดียวในแนวตั้ง หรือแนวนอน ( a column or a row )
- สนับสนุนการทำงานกับ writing mode ( อ่านเพื่อทำความเข้าใจเกี่ยวกับ writing mode : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode )
- สามารถจัดลำดับการแสดงผลได้ เช่น ในหน้าจอ tablet อยากให้เรียง block-2, block-1, block-3 แต่บนหน้าจอ desktop อยากให้เรียง block-3, block-2, block-1 ได้
- ระยะห่างสำหรับ element ที่อยู่ภายใน สามารถยืดหยุ่นตาม element ที่ครอบคลุมไว้อยู่ได้
- สามารถจัดตำแหน่งการแสดงผล element ด้านในได้ง่าย เช่น จัดให้ทุก element ด้านในให้อยู่กลาง element ที่ครอบคลุมอยู่
- สามารถจัดการตำแหน่งการแสดงผล เฉพาะ element ด้านในที่เลือกได้
วิธีการใช้งาน CSS Flexbox เบื้องต้น
สำหรับค่ามาตรฐานของในการประกาศ display: flex; ให้กับ element นั้น คือ
- element ด้านในแสดงผลเรียงในแนวนอน
flex-direction: row; - element ด้านในเรียงเป็นแถวเดียว
flex-wrap: noswap; - element ด้านใน ไม่ขยายเพื่อให้เต็ม element ที่ครอบคลุมอยู่
flex-grow: 0; - element ด้านในเรียงกันโดยเริ่มจากที่จุดเริ่มต้น
justify-content: normal;และalign-items: normal;
การควบคุมทิศทางของ element ด้านในด้วย flex-direction
ถ้าเราไม่ได้กำหนด flex-direction ไว้ อย่างที่บอกไว้ด้านบนค่ามาตรฐานจะเป็น row โดยค่าต่าง ๆ ที่ใช้กับ flex-direction นั้น มีดังนี้
rowแสดงผล element ด้านในเป็นแนวนอนrow-reverseแสดงผล element ด้านในเป็นแนวนอน โดยเริ่มจากจุดสุดท้ายของ element นี้columnแสดงผล element ด้านในเป็นแนวตั้งcolumn-reverseแสดงผล element ด้านในเป็นแนวตั้ง โดยเริ่มจากจุดสุดท้ายของ element นี้
สามารถทำความเข้าใจเพิ่มเติม โดยทดลองเปลี่ยนค่าในกล่อง dropdown ด้านล่าง
สำหรับบทความนี้ ขอจบไว้ตรงนี้ก่อน แล้วเราจะมาต่อกันในบทความหน้า ที่จะมาอธิบายเกี่ยวกับ CSS Flexbox เพิ่มเติม