CSS详解系列:03-Flex容器属性flex-direction

fox/ 2023年12月31日/ CSS教程/ 浏览 422

flex布局是一种一维布局模型,一次只能处理一个维度(一行或者一列)上的元素布局。flex布局大部分的属性都是作用于主轴的,在交叉轴上很多时候只能被动地变化。


flex-direction 属性决定主轴的方向(即项目的排列方向)。


可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了,那么交叉轴就会相应地旋转90度,弹性元素的排列方式也会发生改变,因为弹性元素永远沿主轴排列。


属性值含义
row默认值,主轴为水平方向(水平布局),起点在左端,从左向右排列
row-reverse主轴为水平方向(水平布局),起点在右端,从右向左排列
column主轴为垂直方向(垂直布局),起点在上沿,从上往下排列
column-reverse主轴为垂直方向(垂直布局),起点在下沿,从下往上排列

应用方法:

.flex-box {
  flex-direction: row | row-reverse | column | column-reverse;
}


具体内容块展示形式可以参考下图:



发表评论

暂无评论,抢个沙发...

客服 工单