เครื่องมือสร้าง Flexbox
ตั้งค่า flex container และไอเทมภายในด้วยเครื่องมือควบคุมแบบภาพ ดูการตอบสนองของเลย์เอาต์แบบเรียลไทม์ และคัดลอก CSS ได้ในคลิกเดียว
เลย์เอาต์ของคุณจะถูกสร้างขึ้นในเบราว์เซอร์โดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
คำถามที่พบบ่อย
justify-content กับ align-items แตกต่างกันอย่างไร?
justify-content จะจัดวางไอเทมตามแนวแกนหลัก (Main axis) ซึ่งก็คือทิศทางที่แถวหรือคอลัมน์ไหลไป ในขณะที่ align-items จะจัดวางไอเทมตามแนวแกนรอง (Cross axis) เมื่อคุณสลับทิศทางจาก row เป็น column แกนทั้งสองจะสลับกัน ส่งผลให้ justify-content เริ่มทำงานจากบนลงล่าง และ align-items ทำงานจากซ้ายไปขวาแทน
การควบคุมแบบแยกรายไอเทมทำงานอย่างไร?
เลือกไอเทมตามหมายเลข จากนั้นตั้งค่าว่าต้องการให้ไอเทมขยายตัว (Grow) เพื่อเติมเต็มพื้นที่ว่างเท่าใด, หดตัว (Shrink) เมื่อพื้นที่จำกัดเท่าใด, ขนาดเริ่มต้น (Basis) และการจัดตำแหน่งตามแนวแกนรองเฉพาะตัว (Align self) ส่วน Order จะช่วยย้ายตำแหน่งการแสดงผลของไอเทมให้เร็วขึ้นหรือช้าลงบนหน้าจอโดยไม่ต้องแก้ไขโครงสร้าง HTML โดยจะมีเพียงไอเทมที่คุณแก้ไขเท่านั้นที่จะมีกฎ CSS แยกเฉพาะตัวออกมา
เมื่อใดที่ wrap และ align-content จะมีความสำคัญ?
หากปิดการขึ้นบรรทัดใหม่ (Wrap) ไอเทมทั้งหมดจะถูกบังคับให้อยู่ในแถวเดียวและอาจถูกบีบให้แคบลง แต่หากเปิดใช้งาน ไอเทมที่ไม่พอดีจะตกลงไปยังบรรทัดถัดไป ซึ่งในจุดนี้ align-content จะเข้ามาควบคุมการจัดระยะห่างระหว่างบรรทัดเหล่านั้นในฐานะกลุ่ม ส่วน Gap จะใช้สำหรับกำหนดระยะห่างระหว่างไอเทมและระหว่างบรรทัดโดยไม่ต้องใช้ margin