หนึ่งในสิ่งที่ developers ต้องทำคือหาวิธีแก้ปัญหาเมื่อได้ project ใหม่ เวลาทำ responsive websites เราจะเลือก بين CSS Grid และ CSS Flexbox สำหรับ layout บทความนี้พยายามแยกความแตกต่างระหว่าง Grid และ Flexbox และเมื่อไหร่ควรเลือกอันไหน
Flexbox – ภาพรวมสั้น
CSS Flexbox คือ responsive box model แบบหนึ่ง ช่วยจัดตำแหน่งภายใน container ได้ดีกว่า และ implement ได้ง่ายถ้าเข้าใจความสามารถ
Flexible box model ยังใช้ properties ของ box model ทั้งหมดควบคุม margin, padding, border, content เมื่อตั้ง display: flex บน parent container จะเปิด flex properties ทั้งหมดสำหรับ children ของ parent นั้น
Flexbox Properties สำคัญ:
- flex-direction: column | row* | column-reverse | row-reverse
- flex-wrap: wrap | nowrap* | wrap-reverse
- flex-flow: shortcut ของสอง property แรก format
flex-flow: <flex-direction> <flex-wrap>; - justify-content: จัดระยะ items ตาม main axis เมื่อ flex-direction เป็น row main axis คือ horizontal axis เมื่อเป็น column main axis คือ vertical axis
- justify-content: flex-start* | flex-end | center | space-evenly | space-around | space-between
- align-items: จัดระยะ items ตาม axis ตรงข้าม main axis เมื่อ flex-direction เป็น column คือ vertical axis เมื่อเป็น row คือ horizontal axis
- align-items: stretch* | center | flex-start | flex-end | baseline
- align-self: ใช้ได้กับ flex items ที่ parent ประกาศ display เป็น 'flex' ควบคุม alignment ใน flex container
- align-self: auto* | stretch | center | flex-start | flex-end | baseline
* – default setting ของ property
CSS Grid – ภาพรวมสั้น
CSS Grid เป็น layout model อีกอย่าง ใหม่กว่า Flexbox นิดหน่อย browser support ไม่กว้างขวางเท่า Flexbox เมื่อตั้ง display: grid บน parent element จะใช้ grid properties ทั่วไปได้
CSS Grid Properties สำคัญ
- grid-gap, grid-column-gap, grid-row-gap: กำหนด spacing grid gap เป็น shortcut ควบคุม column และ row gap ทั้งคู่
- grid-template-columns, grid-template-rows: จัดรูปแบบ containers ใน grid – ความกว้าง columns, ความสูง rows, จำนวน containers ต่อ row
- justify-content: จัด grid ทั้งชุด horizontally
- align-content: จัด grid ทั้งชุด vertically
- grid-column, grid-row: ประกาศความกว้าง/ความสูงของ grid items
ควรเลือกอันไหน?
Properties ใน CSS Flexbox อนุญาต one-dimensional layout: rows หรือ columns เหมาะกับ web pages ที่ focus น้อยกว่า content placement และมากกว่า flexibility ใน responsive design
ในทางตรงข้าม CSS Grid สร้าง layouts ใน two-dimensional space: rows และ columns มี properties ควบคุม layout, width, height ของแต่ละ container สร้าง grids ที่คล้าย stained glass window ได้
หาก focus ที่ content placement และต้องการควบคุม child containers ในพื้นที่ Grid คือ layout format สำหรับคุณ Flexbox focus ที่ content flow มากกว่า placement
Browser support สำหรับ Grid ไม่กว้างขวางเท่า Flexbox เพราะ Flexbox เก่ากว่า อาจเป็นปัจจัยในการเลือก layout model
สรุป
Layout model ไหนก็ตาม ทั้งคู่เป็นตัวเลือกที่ถูกต้อง แค่ขึ้นอยู่กับ purpose ของ project ว่าจะเลือก CSS Flex layout หรือ CSS Grid layout
