Flex wrap เป็นคุณสมบัติของ Flexbox ที่ใช้กำหนดการขึ้นบรรทัดใหม่ของ Flex items โดยมีค่าเริ่มต้นเป็น nowrap ซึ่งหมายถึง Flex items จะไม่ขึ้นบรรทัดใหม่แม้ความกว้างของ container จะไม่เพียงพอสำหรับการจัดวางทุก Flex items ในแนวนั้น ๆ
สามารถใช้คำสั่ง flex-wrap ใน CSS เพื่อกำหนด Flex wrap ได้ โดยมีค่าที่สามารถกำหนดได้ดังนี้
nowrap (ค่าเริ่มต้น) : Flex items จะไม่ขึ้นบรรทัดใหม่ โดยการปรับขนาดของ Flex items จะทำให้ overflow หากความกว้างของ container ไม่เพียงพอสำหรับการจัดวางทุก Flex items ในแนวนั้น ๆ
wrap : Flex items จะขึ้นบรรทัดใหม่เมื่อไม่สามารถจัดวางได้ในแนวนั้น ๆ โดยจะขึ้นบรรทัดใหม่จากด้านบนไปด้านล่าง (แนวตั้ง) หรือจากด้านซ้ายไปด้านขวา (แนวนอน) ตามที่กำหนดไว้ใน flex-direction
wrap-reverse : Flex items จะขึ้นบรรทัดใหม่เมื่อไม่สามารถจัดวางได้ในแนวนั้น ๆ โดยจะขึ้นบรรทัดใหม่จากด้านล่างไปด้านบน (แนวตั้ง) หรือจากด้านขวาไปด้านซ้าย (แนวนอน) ตามที่กำหนดไว้ใน flex-direction
ตัวอย่างการใช้งาน Flex wrap:
.container {
display: flex;
flex-wrap: wrap; /* Flex items จะขึ้นบรรทัดใหม่เมื่อไม่สามารถจัดวางได้ในแนวนั้น ๆ */
}
.container {
display: flex;
flex-wrap: wrap-reverse;
}
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana
นายช่างโยธา ศูนย์ก่อสร้างและบูรณะถนน 3 ส่วนก่อสร้างและบูรณะ 2 สำนักการโยธา