CSS3 คุณสมบัติกล่องทิศทาง
ตัวอย่าง
จากขวาไปซ้ายเพื่อแสดงกล่อง div องค์ประกอบของเด็ก:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
ลอง»
สนับสนุนเบราว์เซอร์
เบราว์เซอร์หลัก ๆ ในปัจจุบันไม่สนับสนุนคุณสมบัติกล่องทิศทาง
Internet Explorer 10 ทรัพย์สินส่วนตัวโดยการสนับสนุน -ms-Flex ทิศทาง
Firefox โดยทรัพย์สินส่วนตัว - การสนับสนุน MOZ กล่องทิศทาง
Safari และ Chrome ได้โดยทรัพย์สินส่วนตัวคุณสมบัติ -webkit กล่องทิศทาง
หมายเหตุ: Internet Explorer 9 และรุ่นก่อนหน้าของ IE ไม่สนับสนุนกล่องที่มีความยืดหยุ่น
แอตทริบิวต์คำจำกัดความและคำแนะนำ
แอตทริบิวต์กล่องทิศทางระบุองค์ประกอบย่อยของทิศทางที่จอแสดงผลกล่อง
เริ่มต้น: | ปกติ |
---|---|
ที่รับมา: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.boxDirection = "ย้อนกลับ" |
ไวยากรณ์
กล่องทิศทาง: ปกติ | ย้อนกลับ | สืบทอด;
ความคุ้มค่า | ลักษณะ |
---|---|
ปกติ | ในการแสดงการวางแนวทางเริ่มต้นองค์ประกอบย่อย |
ถอยหลัง | ในทิศทางตรงกันข้ามสำหรับองค์ประกอบของเด็ก |
สืบทอด | คุณควรจะได้รับมรดกมูลค่าทรัพย์สินกล่องทิศทางจากองค์ประกอบย่อย |