flexbox中align-items控制交叉轴对齐，justify-content控制主轴对齐。1. justify-content常用flex-start、center、flex-end、space-between、space-around调整主轴方向排列；2. align-items常见取值为stretch、flex-start、center、flex-end、baseline用于交叉轴对齐；3. 同时设置两者可实现水平垂直居中等复杂布局效果。
在使用Flexbox布局时，align-items 和 justify-content 是两个非常常用的属性，它们都用于控制容器内子元素的对齐方式，但作用的方向不同。简单来说：
justify-content 控制的是主轴（main axis）上的对齐方式 align-items 控制的是交叉轴（cross axis）上的对齐方式
理解主轴和交叉轴是关键。Flex容器默认的主轴是水平方向（从左到右），交叉轴则是垂直方向（从上到下）。当然，通过设置 flex-direction 可以改变主轴方向，进而影响这两个属性的实际表现。
主轴对齐用 justify-content
当你想调整子元素在水平方向的排列方式，比如让它们靠左、居中、靠右，或者分配空间，就该使用 justify-content。
立即学习“前端免费学习笔记（深入）”；
常用取值包括：
flex-start（默认）：靠主轴起点对齐center：主轴方向居中flex-end：靠主轴终点对齐space-between：两端对齐，中间间距平均分布space-around：每个项目周围有相等的空间
举个例子，如果你想做一个水平居中的导航栏，可以这样写：
.nav { display: flex; justify-content: center;}
这时候所有的导航项就会在容器中水平居中显示。
交叉轴对齐用 align-items
如果你希望调整子元素在垂直方向的对齐方式，比如让它们上下居中、顶部对齐或底部对齐，那就用 align-items。
大师兄智慧家政
58到家打造的AI智能营销工具
99 查看详情
常见取值如下：
stretch（默认）：拉伸填满容器flex-start：交叉轴起点对齐center：交叉轴居中flex-end：交叉轴终点对齐baseline：按基线对齐（适用于文字）
比如你想让一个按钮内部的图标和文字在垂直方向上居中，可以这样设置：
.button { display: flex; align-items: center;}
这样无论图标和文字的高度如何变化，都能保持垂直居中。
有时候需要一起用
很多时候我们会同时设置这两个属性，来达到更精细的对齐效果。比如一个卡片布局，希望内容在水平和垂直方向都居中：
.card { display: flex; justify-content: center; align-items: center;}
这样就可以实现“完全居中”的效果了。
需要注意的是，如果容器的高度不确定或者子元素本身有高度差异，align-items 的行为可能会略有不同，这时候可以结合 align-self 单独调整某个子元素。
总的来说，记住一句话就能区分清楚：justify 是主轴，align 是交叉轴。
基本上就这些。只要搞清楚主轴方向，这两个属性的使用就不会混淆了。
以上就是CSS中align-items和justify-content在flex布局中的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1109444.html
微信扫一扫 
支付宝扫一扫 
