การทำงานของเครื่องมือสร้าง Flexbox
เครื่องมือสร้าง Flexbox ช่วยให้ผู้ใช้สามารถตั้งค่า flex container และไอเทมภายในผ่านระบบควบคุมแบบภาพได้อย่างสะดวก ผู้ใช้สามารถปรับแต่งค่าต่างๆ เพื่อกำหนดเลย์เอาต์ สังเกตการเปลี่ยนแปลงที่เกิดขึ้นในส่วนแสดงผลแบบเรียลไทม์ และคัดลอกโค้ด CSS ที่ระบบสร้างขึ้นไปใช้งานในการออกแบบเว็บไซต์ได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นภายในเครื่องของผู้ใช้โดยตรง เลย์เอาต์ของคุณจะถูกสร้างขึ้นในเบราว์เซอร์โดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
การตั้งค่าคุณสมบัติของ Container
การกำหนดพฤติกรรมของตัวควบคุมหลักหรือคอนเทนเนอร์ สามารถเลือกปรับแต่งค่าต่างๆ ได้ดังนี้:
- Direction: กำหนดทิศทางของแกนหลัก มีตัวเลือกคือ Row, Row reverse, Column และ Column reverse
- Wrap: ควบคุมการขึ้นบรรทัดใหม่ของไอเทม ได้แก่ No wrap, Wrap และ Wrap reverse
- Justify content: จัดวางตำแหน่งไอเทมตามแนวแกนหลัก เลือกได้ทั้ง Start, End, Center, Space between, Space around และ Space evenly
- Align items: จัดวางตำแหน่งไอเทมตามแนวแกนรอง เลือกได้ทั้ง Start, End, Center, Stretch และ Baseline
- Align content: จัดวางแนวของบรรทัดในกรณีที่มีการขึ้นบรรทัดใหม่ เลือกได้ทั้ง Start, End, Center, Stretch, Space between, Space around และ Space evenly
- Gap: กำหนดระยะห่างระหว่างไอเทมและระหว่างบรรทัดด้วยการระบุค่าเป็นตัวเลข
การตั้งค่าคุณสมบัติของ Items รายชิ้น
ผู้ใช้สามารถเลือกปรับแต่งไอเทมแต่ละชิ้นได้อย่างอิสระ โดยเมื่อคลิก "เพิ่มไอเทม" ไอเทมใหม่จะปรากฏขึ้น เช่น "Item 5" สำหรับคุณสมบัติเฉพาะตัวของไอเทมที่สามารถปรับแต่งได้ประกอบด้วย:
- Order: กำหนดลำดับการแสดงผลของไอเทมด้วยค่าตัวเลข
- Grow: กำหนดสัดส่วนการขยายตัวเพื่อเติมเต็มพื้นที่ว่างด้วยค่าตัวเลข
- Shrink: กำหนดสัดส่วนการหดตัวเมื่อพื้นที่จำกัดด้วยค่าตัวเลข
- Basis: กำหนดขนาดเริ่มต้นของไอเทม โดยระบุเป็นค่าตัวเลขหรือเลือก "Auto"
- Align self: จัดตำแหน่งแกนรองเฉพาะไอเทมชิ้นนั้นๆ โดยเลือกได้ทั้ง Auto, Start, End, Center, Stretch และ Baseline
ระบบจะสร้างกฎ CSS แยกเฉพาะตัวออกมาให้เฉพาะไอเทมที่มีการแก้ไขหรือเปลี่ยนค่าคุณสมบัติไปจากค่าเริ่มต้นเท่านั้น
ความสัมพันธ์ของแกนและการขึ้นบรรทัดใหม่
การทำงานของ Flexbox มีกฎและพฤติกรรมเฉพาะตัวที่ต้องทำความเข้าใจดังนี้:
- การสลับแกนหลักและแกนรอง: เมื่อผู้ใช้สลับทิศทาง (Direction) จาก row เป็น column จะส่งผลให้แกนหลัก (Main axis) และแกนรอง (Cross axis) สลับทิศทางกัน ซึ่งจะส่งผลโดยตรงต่อการทำงานของ
justify-contentและalign-items - การควบคุมแถวด้วย Wrap: หากเลือก No wrap ไอเทมทั้งหมดจะถูกบังคับให้อยู่ในแถวเดียวกันทั้งหมดโดยไม่มีการขึ้นบรรทัดใหม่ แต่หากเลือก Wrap ไอเทมที่ไม่พอดีกับขนาดของคอนเทนเนอร์จะตกลงไปยังบรรทัดถัดไป ซึ่งในกรณีนี้
align-contentจะทำหน้าที่จัดระยะห่างระหว่างบรรทัดเหล่านั้นในลักษณะของกลุ่ม - ระยะห่างด้วย Gap: ค่า Gap จะถูกนำไปใช้เพื่อกำหนดระยะห่างระหว่างไอเทมแต่ละชิ้นรวมถึงระยะห่างระหว่างบรรทัดที่เกิดขึ้นจากการ wrap
การนำโค้ด CSS ไปใช้งาน
เมื่อปรับแต่งเลย์เอาต์จนได้ผลลัพธ์ที่ต้องการแล้ว ในส่วนแสดงผล CSS จะปรากฏโค้ดที่พร้อมใช้งานสำหรับคอนเทนเนอร์และไอเทมต่างๆ เมื่อผู้ใช้คลิกปุ่ม "คัดลอก CSS" สถานะของปุ่มจะเปลี่ยนเป็น "Copied" เพื่อแสดงว่าโค้ดถูกบันทึกไปยังคลิปบอร์ดเรียบร้อยแล้ว
เครื่องมือนี้เหมาะสำหรับผู้ที่ต้องการออกแบบเลย์เอาต์ CSS Flexbox แบบเห็นภาพอย่างรวดเร็ว ตลอดจนผู้ที่ต้องการสร้างโครงสร้างเว็บทั่วไป เช่น การจัดองค์ประกอบให้อยู่กึ่งกลาง (Center), แถบเมนู (Navbar), กองซ้อน (Stack), การ์ด (Cards) หรือแถบข้าง (Sidebar)
คำถามที่พบบ่อย (FAQ)
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