答案：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者结合可实现居中、两端对齐等布局效果。
在使用 CSS Flexbox 布局时，justify-content 和 align-items 是控制子元素对齐方式的两个核心属性。它们分别作用于主轴（main axis）和交叉轴（cross axis），配合使用可以实现各种居中、对齐和分布效果。
justify-content：控制主轴方向的对齐
该属性定义了 flex 容器中的子元素在主轴上的排列与对齐方式。主轴的方向由 flex-direction 决定（默认为 row，即水平从左到右）。
常见值包括：flex-start：元素向主轴起点对齐（默认） flex-end：元素向主轴终点对齐 center：元素在主轴居中 space-between：两端对齐，元素间间距相等 space-around：每个元素周围有相等空间 space-evenly：所有元素间及边缘间距完全相等
align-items：控制交叉轴方向的对齐
该属性定义子元素在交叉轴上的对齐方式。交叉轴始终垂直于主轴。例如，主轴是 row（水平），交叉轴就是 vertical（垂直）。
常用值有：stretch：拉伸以填满容器（默认，但需子元素无固定尺寸） flex-start：元素向交叉轴起点对齐 flex-end：元素向交叉轴终点对齐 center：在交叉轴居中 baseline：按文本基线对齐
典型组合用法示例
通过结合 justify-content 和 align-items，可以轻松实现多种布局需求。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
立即学习“前端免费学习笔记（深入）”；
完全居中一个元素：justify-content: center; align-items: center;
水平垂直都居中，适合模态框或提示信息。 顶部左对齐，类似默认文档流：justify-content: flex-start; align-items: flex-start; 底部居中按钮组：justify-content: center; align-items: flex-end;
按钮在底部水平居中排列。 等间距导航栏（横向）：justify-content: space-between; align-items: center;
首尾项贴边，中间均匀分布，垂直居中。 垂直菜单项居中显示（主轴为 column）：flex-direction: column; justify-content: center; align-items: center;
所有菜单项在容器中垂直居中且水平居中。
基本上就这些。只要理解主轴和交叉轴的关系，再搭配这两个属性的不同值，就能灵活控制 flex 布局的对齐方式，无需依赖 margin 或绝对定位来“手动居中”。
以上就是css flexbox主轴对齐justify-content与align-items组合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1011231.html
微信扫一扫 
支付宝扫一扫 
