CSS中的flex-direction
属性用于设置弹性容器中的主轴方向。主轴是定义弹性项在容器内布局的方向。该属性的可选值有row
、row-reverse
、column
和column-reverse
。
row
表示主轴为水平方向,起点在左端。row-reverse
表示主轴为水平方向,起点在右端。column
表示主轴为垂直方向,起点在上方。column-reverse
表示主轴为垂直方向,起点在下方。flex-direction
属性是使用弹性布局的重要属性之一,可以通过改变主轴方向来控制弹性项在容器中的排列方向。
需要注意的是,flex-direction
属性只对弹性容器有效,不影响弹性项。如果需要控制弹性项的排列顺序,可以使用order
属性。
示例代码:
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
}
在上面的例子中,.container
被设置为弹性容器,并且flex-direction
被设置为row
,也就是水平方向。.item
被设置为弹性项,并且使用flex
属性来占据剩余的空间。