ทำความเข้าใจ CSS Flexbox – 1

แต่ก่อนเวลาเราต้องการจัด 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 เพิ่มเติม