CSS flex 布局(入门)- flex-direction 项目排列方向

flex-direction 属性设置在容器上,是设置项目的排列方向。

div{
	display: flex;
	flex-direction: column;
}

它的值有:

  • row:主轴为水平方向,起点在左端(默认值)。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。
flex-direction 项目排列方向 2-5

1.值为 row 或者 row-reverse 时,所有的项目排成一排。当所有项目的总宽度大于容器的宽度时,项目的宽度默认会等比例缩小。

假设项目1宽度为100px,项目2宽度为200px。当容器宽度不够时,会按照比例1:2缩小,项目1宽度变为55px,项目2则为110px。

2.值为 column 或者 column-reverse 时,所有的项目排成一列。跟 row 类似,当容器高度不够时,项目的高度默认会等比例缩小。

flex-direction 排列实例

兼容性 :

属性 IE Chrome Firefox Safari Opera
flex-direction 10.0 -ms-
11.0
21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.flexDirection = "column-reverse";