Flexbox主轴与交叉轴详解攻略

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Flexbox主轴与交叉轴详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

主轴由flex-direction决定，控制子元素排列方向，交叉轴与其垂直，justify-content和align-items分别控制主轴与交叉轴对齐方式。

在使用 Flexbox 布局时，主轴（main axis）和交叉轴（cross axis）是理解布局行为的核心概念。它们决定了子元素在容器中的排列方向和对齐方式。

主轴：Flex 容器的主要排列方向

主轴是 Flex 容器中子元素默认的排列方向。这个方向由 flex-direction 属性决定，可以是以下四种之一：

• row：从左到右（默认值，水平方向）
• row-reverse：从右到左
• column：从上到下（垂直方向）
• column-reverse：从下到上

主轴的起点叫做 main start，终点是 main end。子元素按照主轴方向依次排列，justify-content 属性控制它们在主轴上的对齐方式。

交叉轴：垂直于主轴的方向

交叉轴始终与主轴垂直。如果主轴是水平方向（row），那么交叉轴就是垂直方向；如果主轴是垂直方向（column），交叉轴就是水平方向。

交叉轴的起点是 cross start，终点是 cross end。子元素在交叉轴上的对齐由 align-items 和 align-self 控制。

实际示例帮助理解

假设设置 flex-direction: row：

• 主轴：水平方向（从左到右）
• 交叉轴：垂直方向（从上到下）
• justify-content 控制左右对齐
• align-items 控制上下对齐

若改为 flex-direction: column：

• 主轴：垂直方向
• 交叉轴：水平方向
• justify-content 控制上下对齐
• align-items 控制左右对齐

基本上就这些。掌握主轴和交叉轴的关系，就能更准确地控制 Flex 布局中的元素排列与对齐方式。不复杂但容易忽略。

理论要掌握，实操不能落！以上关于《Flexbox主轴与交叉轴详解攻略》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！