Monday, 15 July 2024

จัดกล่องที่เกินขนาด ให้ขึ้นบรรทัดใหม่ Flex wrap

15 May 2019
168
luminox watches

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

flex-wrap

 

ตัวอย่างการใช้งาน Flex wrap:

 

.container {
display: flex;
flex-wrap: wrap; /* Flex items จะขึ้นบรรทัดใหม่เมื่อไม่สามารถจัดวางได้ในแนวนั้น ๆ */
}

 

.container {
display: flex;
flex-wrap: wrap-reverse;
}

 

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana