Flex布局主轴和交叉轴解析

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《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 的作用方向也随之改变。

本篇关于《Flex布局主轴和交叉轴解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！