一、核心前提：弹性盒子的基本结构
要定义主轴方向，首先需明确弹性盒子的两大核心角色：
-
弹性容器（Flex Container）：给父元素设置
display: flex;或display: inline-flex;后，该元素即为弹性容器。 -
弹性项目（Flex Item）：弹性容器的直接子元素，会自动成为弹性项目，沿“主轴”排列，垂直于主轴的方向称为“交叉轴”。
核心结论：主轴方向决定了弹性项目的排列方向，由弹性容器的
flex-direction 属性控制。二、主轴方向控制属性：flex-direction
属性作用：专门用于定义弹性容器的主轴方向，同时决定了弹性项目的排列顺序，是弹性布局中最基础、最常用的属性之一。
语法：
flex-direction: 取值flex-direction 四种取值
这个也是重点
-
项目排列：弹性项目从左到右依次排列，与页面默认的文本流向一致。
-
示例代码：
.container {
display: flex;
flex-direction: row; /* 默认值，可省略 */
}
row-reverse（水平主轴，从右到左）
-
主轴方向：仍为水平方向，但主轴起点在容器右侧，终点在左侧。
-
项目排列：弹性项目从右到左依次排列，与 row 方向完全相反，不改变项目本身的顺序，仅反转排列方向。
-
注意：与
direction: rtl;不同，row-reverse 仅反转弹性项目的排列，不影响文本内部的流向。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
请登录后查看评论内容