Flexible弹性盒子模型之CSS flex-direction属性

实例

设置 e388a4556c0f65e1904146cc1a846bee 元素内弹性盒元素的方向为相反的顺序：

p
{
display:flex;
flex-direction:row-reverse;
}

效果预览

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-direction	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

---

定义和用法

flex-direction 属性规定灵活项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

默认值：	row
继承：	否
可动画化：	否。请参阅 SS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.flexDirection="column-reverse" 效果预览

 

---

CSS 语法

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性值

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	效果预览
row-reverse	与 row 相同，但是以相反的顺序。	效果预览
column	灵活的项目将垂直显示，正如一个列一样。	效果预览
column-reverse	与 column 相同，但是以相反的顺序。	效果预览
initial	设置该属性为它的默认值。请参阅 initial。	效果预览
inherit	从父元素继承该属性。请参阅 inherit。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!