CSS คุณสมบัติ Flex-ห่อ คืออะไร และใช้งานอย่างไร?

บทช่วยสอน CSS คุณสมบัติ Flex-ห่อ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,สนับสนุนเบราว์เซอร์,ความหมายและการใช้งาน,CSS ไวยากรณ์,มูลค่าทรัพย์สิน,บทความที่เกี่ยวข้อง,

CSS คุณสมบัติ Flex-ห่อ

ก่อนหน้านี้: คุณสมบัติ CSS Flex-หดตัว

ถัดไป: CSS นิเมชั่น

CSS อ้างอิง

ตัวอย่าง

ให้ตลับหมึกองค์ประกอบยืดหยุ่นเมื่อมีความจำเป็นสายแยก:

display:flex;
flex-wrap: wrap;

ลอง»

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- หลังจากรุ่นแรกที่จะสนับสนุนคุณสมบัติคำนำหน้า

คุณสมบัติ
ดิ้นห่อ	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

ความหมายและการใช้งาน

แอตทริบิวต์ Flex-ห่อระบุภาชนะดิ้นเป็นบรรทัดเดียวหรือหลายสายในขณะที่แกนนอนเป็นตัวกำหนดทิศทางของทิศทางใหม่สายซ้อน .

หมายเหตุ: หากองค์ประกอบไม่ได้มีความยืดหยุ่นกล่องวัตถุองค์ประกอบคุณสมบัติ Flex-ห่อไม่ทำงาน

เริ่มต้น:	nowrap
มรดก:	ไม่
สามารถเคลื่อนไหว:	NO โปรดดู การเคลื่อนไหว (Animatable)
เวอร์ชัน:	CSS3
ไวยากรณ์ javascript:	วัตถุ .style.flexWrap = "nowrap"ลอง

CSS ไวยากรณ์

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

มูลค่าทรัพย์สิน

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。