flex-direction
版本:CSS3
CSS flex-direction属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。
示例/* the direction text is laid out in a line */
flex-direction: row;
/* like , but reversed */
flex-direction: row-reverse;
/* the direction in which lines of text are stacked */
flex-direction: column;
/* like , but reversed */
flex-direction: column-reverse;
/* global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
浏览器支持
IE11以上版本的浏览器都支持flex-direction
语法flex-direction:row | row-reverse | column | column-reverse
取值row:flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse:表现和row相同,但是置换了主轴起点和主轴终点。
column:flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同。
column-reverse:表现和column相同,但是置换了主轴起点和主轴终点。
说明:
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列该属性的反转取值不影响元素的绘制,语音和导航顺序,只改变流动方向。这与和相同。
对应的脚本特性为flexDirection。
注意,值row和row-reverse受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr,row 表示从左到右定向的水平轴,而 row-reverse 表示从右到左;如果 dir 属性是 rtl,row 表示从右到左定向的轴,而 row-reverse 表示从左到右。默认值row
适用于flex容器
继承性无
动画性visual
计算值指定值
例子
将一个容器内的子元素反转横向排列
- a
- b
- c
#box{
display: flex;
flex-direction: row-reverse;
list-style: none;
}
例子//HTML
this is a column-reverse
this is a row-reverse
//CSS
#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
#box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
#box1 {
width: 50px;
height: 50px;
}//HTML
//CSS
#main{
width:450px;
height:300px;
border:1px solid #ccc;
display:-webkit-flex;
display:flex;
flex-direction:row-reverse;
-webkit-flex-direction:row-reverse;
}
#main div{
width:50px;
}
效果图: