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 เท...
ดูตัวอย่าง code ได้ในบทความนี้
codinggun.com/css/css-flexbox

[@CHAYROCKZA]

ขอบคุณครับเข้าใจง่ายมาก มีศิลปะภาษาในการพูดอธิบายมากครับๆ เรียงลำดับเรื่องได้ดีสุดๆ ภาษาไทยเกรด SSR

[@santeen060]

ขอบคุณครับ อธิบายเข้าใจง่าย มองเห็นภาพ

[@MinatoUsumaki784]

ดูจบ บรรลุ ขอบพระคุณเป็นอย่างยิ่งครับ ถ้าอ่านเอง คงช้ากว่าฟังผู้เชียวชาญแน่นอน

[@108wend]

ขอบคุณมากครับ 🙏🏻

[@monaekarin]

ขอบคุณครับ เข้าใจง่ายมากเลยครับ ❤

[@nathachairungsaeng250]

สุดยอดเลยครับ สอนดีมากเลยครับ

[@boxofsher]

พูดเข้าใจง่ายจริงๆค่ะ สอนดีมาก ขอบคุณนะคะ

[@prajitr21]

สุดยอดครับเข้าใจง่ายดี ทำต่อไปครับ ดีต่อผู้ศึกษามาก ๆ

[@youngmillionaires4344]

สอนดีมากเลยครับ พูดเข้าใจง่ายมาก ทำต่อเรื่อยๆนะครับ

[@narathornrodjaruen9243]

ขอบคุณครับ เข้าใจเลย

[@krisanaa5975]

สอนดีครับ เข้าใจภาพรวมมากขึ้น มีหลักในการใช้งานได้ดี

[@cyp-channel]

ดีมากเลย กำลังทำความเข้าใจกับ flex

[@epi4t]

ดีมากเลยครับ คลิปสั้นแต่เนื้อหาสรุปให้แบบเน้นๆ ไม่ยืดเยื้อ ชอบครับ เหมือนไว้ฟังสรุปตอนจำไม่ได้ อยากได้ grid ต่อจังครับ

[@Rutthawit]

ขอบคุณครับ เข้าใจเลย ทีนี้

[@corazon.2524]

หลายช่องสอนไม่เก็ทเลย พอมาดูช่องนี้ เข้าใจเลย ละเอียดมากครับ

[@kanokgaming]

อธิบายได้ดีมากเลยครับ ไม่เย่นเย้อ สั้นแต่ชัดเจนตรงจุด ไม่พูดมากไม่นอกประเด็น

[@codinggun7966]

ขอบคุณครับ

[@yutthapoomchainet8789]

ขอบคุณมากครับ เสียงคล้ายๆ Photo Hack จังเลยครับ

[@supakonbanteao3847]

ขอบคุณครับ จาก งงๆ กระจ่างเลย

[@andrewkosenko2757]

What is this language? Is it Javanese or something?

[@codinggun7966]

This is a cascading style sheet(CSS). It's not a programming language