คอนเทนเนอร์ Flexbox คืออะไร

2024 ผู้เขียน: Lynn Donovan | [email protected]. แก้ไขล่าสุด: 2023-12-15 23:54

NS คอนเทนเนอร์แบบยืดหยุ่น ขยายรายการเพื่อเติมพื้นที่ว่างที่มีอยู่ หรือย่อขนาดรายการเพื่อป้องกันไม่ให้ล้น ที่สำคัญที่สุด flexbox เลย์เอาต์เป็นแบบไม่เชื่อเรื่องทิศทางเมื่อเทียบกับเลย์เอาต์ปกติ (บล็อกที่เป็นแนวตั้งและอินไลน์ซึ่งเป็นแนวนอน)

ในแง่นี้ คุณใช้ Flexbox อย่างไร

สรุป

1. ใช้จอแสดงผล: ดิ้น; เพื่อสร้างคอนเทนเนอร์แบบยืดหยุ่น
2. ใช้ justify-content เพื่อกำหนดการจัดตำแหน่งแนวนอนของรายการ
3. ใช้ align-items เพื่อกำหนดการจัดตำแหน่งแนวตั้งของรายการ
4. ใช้ flex-direction หากคุณต้องการคอลัมน์แทนแถว
5. ใช้ค่าแบบย้อนกลับหรือแบบคอลัมน์เพื่อพลิกลำดับรายการ

คุณจะทำคอนเทนเนอร์ Flex ได้อย่างไร? ก่อนที่คุณจะใช้ใดๆ ได้ flexbox คุณสมบัติ คุณต้องกำหนด a คอนเทนเนอร์แบบยืดหยุ่น ในเค้าโครงของคุณ คุณ สร้างคอนเทนเนอร์แบบยืดหยุ่น โดยการตั้งค่าคุณสมบัติการแสดงผลขององค์ประกอบเป็นหนึ่งใน flexbox ค่าเค้าโครง: flex หรืออินไลน์- flex . โดยค่าเริ่มต้น, flex รายการถูกจัดวางในแนวนอนบนแกนหลักจากซ้ายไปขวา

ในลักษณะนี้ Flexbox ใช้ทำอะไร?

Flexbox เป็นโมเดลเลย์เอาต์ที่อนุญาตให้องค์ประกอบจัดแนวและกระจายพื้นที่ภายในคอนเทนเนอร์ ด้วยการใช้ความกว้างและความสูงที่ยืดหยุ่น องค์ประกอบสามารถจัดแนวเพื่อเติมช่องว่างหรือกระจายช่องว่างระหว่างองค์ประกอบ ซึ่งทำให้เป็นเครื่องมือที่ยอดเยี่ยมในการ ใช้สำหรับ ระบบการออกแบบที่ตอบสนอง

การวางแนวเริ่มต้นภายในคอนเทนเนอร์แบบยืดหยุ่นคืออะไร

NS ค่าเริ่มต้น การจัดเรียงหลังจากใช้จอแสดงผล: flex เป็นรายการที่จะจัดเรียงตามแกนหลักจากซ้ายไปขวา ภาพเคลื่อนไหวด้านล่างแสดงให้เห็นว่าเกิดอะไรขึ้นเมื่อ flex - ทิศทาง : เพิ่มคอลัมน์ลงใน คอนเทนเนอร์ ธาตุ. นอกจากนี้คุณยังสามารถ ตั้งค่าเฟล็กซ์ - ทิศทาง เพื่อย้อนกลับแถวและย้อนกลับคอลัมน์