สร้าง Flexbox

ทำงานอย่างไร

Flexbox ไม่ซับซ้อน แต่มีเรื่องหนึ่งที่ทำให้เกือบทุกคนพลาด คือ justify-content และ align-items ไม่ได้หมายถึงแนวนอนและแนวตั้ง แต่หมายถึงตามทิศทางและขวางทิศทาง และทิศทางเป็นสิ่งที่คุณตั้งเอง

กับดัก พูดตรง ๆ

เมื่อ flex-direction: row, justify-content ทำงานในแนวนอนและ align-items ในแนวตั้ง เปลี่ยนเป็น column แล้วทั้งสองสลับกันโดยสิ้นเชิง เวลาที่เสียไปกับ flexbox แทบทั้งหมดมาจากเรื่องนี้ คำอธิบายด้านล่างจะอัปเดตเมื่อคุณเปลี่ยนทิศทาง เพื่อให้เห็นความสัมพันธ์ ไม่ใช่ท่องจำ

แกนหลักและแกนรอง

แกนหลักคือแกนที่รายการไหลไปตาม กำหนดโดย flex-direction แกนรองตั้งฉากกับแกนหลัก justify-content กระจายพื้นที่ตามแกนหลัก align-items จัดตำแหน่งรายการบนแกนรอง เมื่อจำสองชื่อนี้ได้ ที่เหลือก็ตามมา

gap และเหตุผลที่มันมาแทน margin

gap ใส่ช่องว่างระหว่างรายการโดยไม่เพิ่มด้านนอกของรายการแรกและรายการสุดท้าย ซึ่งเป็นสิ่งที่ margin ทำผิด และเป็นสิ่งที่คนเคยแก้ด้วยวิธีแฮ็ก :last-child เบราว์เซอร์ปัจจุบันทุกตัวรองรับ และไม่มีเหตุผลต้องหลีกเลี่ยงอีกต่อไป

nowrap หมายถึงหด ไม่ใช่ล้น

ค่าเริ่มต้นคือ nowrap รายการจะหดเล็กกว่าขนาดตามธรรมชาติเพื่อให้พอดี แทนที่จะย้ายไปบรรทัดใหม่ นี่คือเหตุผลที่ข้อความบางครั้งถูกบีบโดยไม่คาดคิดในแถว flex การตั้ง wrap ให้รายการย้ายลงไปแทน min-width: 0 บนองค์ประกอบลูกหยุดไม่ให้หดเกินเนื้อหา

จัดกึ่งกลางทั้งสองทิศทาง

justify-content: center ร่วมกับ align-items: center จัดรายการให้อยู่กึ่งกลางทั้งสองทิศทางไม่ว่า flex-direction จะเป็นอะไร ซึ่งเป็นชุดเดียวที่ควรจำให้ขึ้นใจ