CSSFlex主轴与交叉轴解析

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS Flex主轴与交叉轴详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

主轴由flex-direction决定，是flex项目排列的主方向，默认为水平；交叉轴垂直于主轴，其方向随主轴变化，align-items和justify-content的对齐作用方向也随之改变。

在使用 CSS Flexbox 布局时，主轴（main axis）和交叉轴（cross axis）是理解元素排列方式的核心概念。它们不是固定的方向，而是由 flex 容器的 flex-direction 属性决定的。

主轴（Main Axis）是什么？

主轴是 flex 项目（flex items）主要排列的方向。默认情况下，主轴是水平方向（从左到右）。

通过设置 flex-direction 可以改变主轴方向：

• row：主轴为水平方向，项目从左到右排列（默认值）
• row-reverse：主轴仍为水平方向，但项目从右到左排列
• column：主轴变为垂直方向，项目从上到下排列
• column-reverse：主轴为垂直方向，项目从下到上排列

主轴的起点叫做 main start，终点是 main end。项目沿主轴依次排列，justify-content 控制项目在主轴上的对齐方式。

交叉轴（Cross Axis）如何确定？

交叉轴始终垂直于主轴。也就是说，主轴方向确定后，交叉轴方向也就自动确定了。

• 当主轴是水平方向（row）时，交叉轴就是垂直方向
• 当主轴是垂直方向（column）时，交叉轴就是水平方向

交叉轴的起点叫 cross start，终点是 cross end。容器的 align-items 和 align-content 属性控制项目在交叉轴上的对齐。

实际例子帮助理解

假设有一个 flex 容器：

.container {
  display: flex;
  flex-direction: row;
}

此时：

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

如果改成：

.container {
  display: flex;
  flex-direction: column;
}

那么：

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

基本上就这些。关键是记住：主轴由 flex-direction 决定，交叉轴与之垂直。一旦方向变了，justify-content 和 align-items 的作用方向也随之改变。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~