作为一名前端工程师，熟悉并掌握 Flexbox 布局技术是非常必要的。其中，掌握关于主轴和交叉轴控制的技巧更是至关重要。在本文中，我们将探讨 Flexbox 布局技术下的主轴和交叉轴控制技巧，并提供一些示例代码来帮助您更好地理解。
什么是主轴和交叉轴？
在 Flexbox 布局中，有两个重要的轴：主轴（main axis）和交叉轴（cross axis）。从名字上就可以看出，主轴决定了主要的布局方向，而交叉轴则是与主轴垂直的方向。
具体来说，在默认情况下：
- 主轴方向为从左到右（如果是从右到左的语言，主轴方向反之）；
- 交叉轴方向为从上到下。
控制主轴和交叉轴的属性
Flexbox 还提供了许多控制主轴和交叉轴的属性。
主轴属性
justify-content
justify-content 属性可以控制主轴上的元素如何分布。它可以接受以下值：
flex-start：默认值，元素排列在主轴起点；flex-end：元素排列在主轴终点；center：元素在主轴上居中；space-between：元素沿主轴平均分布；space-around：元素沿主轴平均分布，但两端留有间隔。
示例：
.container {
display: flex;
justify-content: space-between;
}上述代码将使 .container 内的元素沿主轴平均分布，但两端留有间隔。
flex-wrap
flex-wrap 属性可以控制主轴上的元素是否换行。它可以接受以下值：
nowrap：默认值，元素都在一行上，如果放不下则压缩；wrap：元素在必要时换行，但尽可能保持在一行上；wrap-reverse：元素在必要时换行，并反转每行的方向。
示例：
.container {
display: flex;
flex-wrap: wrap;
}上述代码将使 .container 内的元素在主轴上换行。
交叉轴属性
align-items
align-items 属性可以控制交叉轴上的元素如何对齐。它可以接受以下值：
stretch：默认值，元素沿交叉轴拉伸至容器大小；flex-start：元素顶部对齐容器顶部；flex-end：元素底部对齐容器底部；center：元素在交叉轴上居中；baseline：元素按照其基线对齐。
示例：
.container {
display: flex;
align-items: center;
}上述代码将使 .container 内的元素在交叉轴上居中。
align-content
align-content 属性可以控制多行元素在交叉轴上的对齐方式。它可以接受以下值：
stretch：默认值，多行元素沿交叉轴拉伸至容器大小；flex-start：多行元素顶部对齐容器顶部；flex-end：多行元素底部对齐容器底部；center：多行元素在交叉轴上居中；space-between：多行元素在交叉轴上平均分布；space-around：多行元素在交叉轴上平均分布，但两端留有间隔。
示例：
.container {
display: flex;
align-content: center;
flex-wrap: wrap;
}上述代码将使 .container 内的多行元素在交叉轴上居中，同时沿主轴上进行换行。
总结
通过掌握以上关于主轴和交叉轴的控制技巧，您可以更好地利用 Flexbox 布局技术优化您的网站布局。当然，除了上述提到的属性之外，还有许多其他可以控制主轴和交叉轴的属性，如 order、flex-grow、flex-shrink、align-self 等，也值得您去深挖和学习。
希望本文对您学习和掌握 Flexbox 布局技术有所帮助，祝您使用愉快！
示例代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- -------------- ------- ---------- ----- - ---------- --- - ----- - - ------ ------- ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646338fd968c7c53b043c8cc