กล่อง-Flex CSS3 คุณสมบัติ
ตัวอย่าง
กำหนดสององค์ประกอบ P ที่มีความยืดหยุ่น หากความกว้างทั้งหมดของกล่องแม่เป็น 300px # P1 จะมีความกว้างของ 100px ที่ # P2 จะมีความกว้างของ 200px A:
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
ลอง»
สนับสนุนเบราว์เซอร์
เบราว์เซอร์หลัก ๆ ในปัจจุบันไม่สนับสนุนคุณสมบัติกล่อง-Flex
Internet Explorer 10 ทรัพย์สินส่วนตัวโดยการสนับสนุน -ms-Flex
Firefox โดยทรัพย์สินส่วนตัว -moz กล่อง-Flex สนับสนุน
Safari และ Chrome ได้โดยทรัพย์สินส่วนตัว -webkit กล่อง-Flex สนับสนุน
หมายเหตุ: Internet Explorer 9 และรุ่นก่อนหน้าของ IE ไม่สนับสนุนกล่องที่มีความยืดหยุ่น
แอตทริบิวต์คำจำกัดความและคำแนะนำ
แอตทริบิวต์กล่อง-Flex ระบุองค์ประกอบของเด็กที่มีความยืดหยุ่นกล่องหรือคงขนาด
เคล็ดลับ: พร้อมกล่องหดตัวและเจริญเติบโตได้ไม่ว่าจะเป็นองค์ประกอบที่เป็นหดหรือขยายความยืดหยุ่นเมื่อใดก็ตามที่มีพื้นที่พิเศษในกล่ององค์ประกอบที่มีความยืดหยุ่นขยายตัวออกไปเติมช่องว่าง
| เริ่มต้น: | 0.0 (แสดงให้เห็นว่าองค์ประกอบไม่ยืดหยุ่น) |
|---|---|
| มรดก: | ไม่ |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | วัตถุ .style.boxFlex = 2.0 |
ไวยากรณ์
กล่อง-Flex:ค่า;
| ความคุ้มค่า | ลักษณะ |
|---|---|
| ความคุ้มค่า | องค์ประกอบที่มีความยืดหยุ่น Flex ทั้งหมดเป็นญาติ |