CSS Flexbox: จัดวาง display แบบง่ายๆ ด้วย flexbox

มาทำความรู้จักกับการทำงานเบื้องต้นของ CSS Flexbox ตัวช่วยที่จะทำให้การจัดวาง item ต่างได้ง่ายขึ้น โดยที่ css จะมี display อยู่หลายประเภท แบบดั้งเดิมเลยคือ display เป็น block หรือ inline-block ส่วนการจัด display แบบใหม่ๆก็จะมี flex และ grid ซึ่ง grid ยังถือว่าเป็นน้องใหม่ Broweser ที่ supprt ยังมีน้อยกว่า ดังนั้นใน คลิปนี้เราเลยเลือกที่จะนำ flexbox มาแนะนำให้ทุกท่านรู้จักกัน สิ่งแรกที่แตกต่างจากการ display เป็น block คือ flexbox จะเป็นการจัดเรียง item ต่างๆใน container ดังนั้นเราจึงต้อง set css properties ที่ตัว container เป็นหลัก ซึ่งไม่เหมือนกับการ set float: left หรือ float: right ที่ต้อง set ที่ตัว item แต่ละตัว พอมีหลาย item การจัดการก็จะลำบากมากขึ้น เริ่มต้นที่การใช้งาน flexbox เราต้อง set display ของ container เป็น flex ก่อนหลังจากนั้นเลือกการจัดเรียงโดยการกำหนด css properties ซึ่ง properties ที่น่าสนใจของ flex มีดังนี้ CSS properties ที่ต้องกำหนดให้กับ container 1. flex-direction เป็นการบอกว่าจะจัดเรียง item ในแนวตั้งหรือแนวนอน ซึ่งค่า default จะเป็นแนวนอน (แค่นี้ก็หมดปัญหากับ float: left หรื float: right ที่ไม่เคยได้ดั่งใจเราซักที) 2. flex-wrap ถ้าโดย default จะเป็น no wrap หมายถึงการไม่ขึ้นบรรทัดใหม่ item ทุกตัวจะเรียงเป็นแนวเดียวกันเสมอ ไม่ว่าความกว้างของหน้าจอจะเป็นอย่างไร แต่ถ้าเรากำหนดเป็น wrap เมื่อความกว้างของหน้าจอไม่พอมันจะปัดเอา item สุดท้ายลงไปไว้ด้านล่าง 3. flex-flow เป็นการกำหนด flex-direction และ flex-wrap ในบรรทัดเดียว 4. justify-content เป็นการจัดเรียงในแนวแกน x หรือใน css จะเรียกว่า main axis 5. align-items เป็นการจัดเรียงในแนวแกน y หรือใน css จะเรียกว่า cross axis CSS properties ที่กำหนดให้กับ item แต่ละตัว 1. order เราสามารถกำหนดลำดับการแสดงผลได้ โดย Browser จะเรียง order จากน้อยไปมาก(ถ้าไม่ได้กำหนดค่า order จะเป็น 0) 2. flex-grow ตัวไหนมีค่ามากได้พื้นที่มาก โดยต่า default จะเป็น 0 3. align-self ใช้ในการแก้ไข(Override) ค่าที่กำหนดไว้ใน align-items ที่อยู่ใน container เขียน html ให้ไวขึ้นด้วย emmet    • เขียน html ไวขึ้น 2 เท่าแค่เข้าใจ emmet   ดูตัวอย่าง code ได้ในบทความนี้ https://codinggun.com/css/css-flexbox