主轴由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 属性控制项目在交叉轴上的对齐。
Type
生成草稿，转换文本，获得写作帮助-等等。
83 查看详情
实际例子帮助理解
假设有一个 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 的作用方向也随之改变。
以上就是css flex容器主轴与交叉轴理解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999766.html
微信扫一扫 
支付宝扫一扫 
