CSS คุณสมบัติ Flex-ทิศทาง
ตัวอย่าง
การตั้งค่า <div> ภายในทิศทางขององค์ประกอบยืดหยุ่นเพื่อตลับหมึกเพื่อย้อนกลับ:
div
{
display:flex;
flex-direction:row-reverse;
}
{
display:flex;
flex-direction:row-reverse;
}
ลอง»
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน
ทันทีหลังจาก -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-ทิศทางที่ไม่ทำงาน
เริ่มต้น: | แถว |
---|---|
มรดก: | ไม่ |
สามารถเคลื่อนไหว: | NO โปรดดู การเคลื่อนไหว (Animatable) |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.flexDirection = "คอลัมน์ย้อนกลับ"ลอง |
CSS ไวยากรณ์
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
มูลค่าทรัพย์สิน
值 | 描述 | 实例 |
---|---|---|
row | 默认值。灵活的项目将水平显示,正如一个行一样。 | 尝试一下 » |
row-reverse | 与 row 相同,但是以相反的顺序。 | 尝试一下 » |
column | 灵活的项目将垂直显示,正如一个列一样。 | 尝试一下 » |
column-reverse | 与 column 相同,但是以相反的顺序。 | 尝试一下 » |
initial | 设置该属性为它的默认值。请参阅 initial 。 | 尝试一下 » |
inherit | 从父元素继承该属性。请参阅 inherit 。 |
บทความที่เกี่ยวข้อง
อ้างอิง CSS: Flex คุณสมบัติ
คู่มืออ้างอิง CSS: คุณสมบัติ Flex-เกณฑ์
คู่มืออ้างอิง CSS: คุณสมบัติ Flex-Flow
คู่มืออ้างอิง CSS: Flex-Grow คุณสมบัติ
คู่มืออ้างอิง CSS: Flex-หดคุณสมบัติ
คู่มืออ้างอิง CSS: คุณสมบัติ Flex-ห่อ