align-items控制单行内项目在交叉轴的对齐方式，如center居中、stretch拉伸；align-content控制多行容器中各行在交叉轴的分布，如space-between均匀分布、stretch填充，仅在flex-wrap换行且存在多行时生效。
align-items 和 align-content 是 CSS Flexbox 布局中用于控制项目在交叉轴上对齐方式的两个属性，它们作用的对象和适用场景不同，理解清楚能更好布局。
稿定抠图
AI自动消除图片背景
76 查看详情
align-items：控制单行内项目的对齐
当 flex 容器只有一行时，align-items 决定这一行中所有项目在交叉轴（cross axis）上的对齐方式。常见取值包括：flex-start：项目向交叉轴起点对齐 flex-end：项目向交叉轴终点对齐 center：项目在交叉轴居中对齐 stretch：项目拉伸填满容器（默认值，前提是没有设置高度） baseline：项目按基线对齐，适合文字类内容例如，你想让一个按钮内的图标和文字在垂直方向居中，用 align-items: center 就很合适。
align-content：控制多行之间的对齐
当 flex 容器设置了换行（flex-wrap: wrap），且有多行时，align-content 才起作用。它控制的是这些“行”在交叉轴上的整体分布方式。注意：如果只有一行，align-content 不生效。常见取值有：flex-start：所有行堆在交叉轴起点 flex-end：所有行堆在交叉轴终点 center：所有行整体居中 space-between：行之间均匀分布，首尾行贴边 space-around：每行周围有相等空间 stretch：行拉伸以填满容器（默认值）比如做一个卡片网格，多行排列，想让它们上下间距均匀，可以用 align-content: space-between。
关键区别总结
align-items 管的是“每一行内部项目的对齐”；align-content 管的是“多行之间的对齐与分布”。如果容器只有一行，align-content 没效果；如果有多行但未设置 flex-wrap，也无法触发多行布局。基本上就这些，搞清是否“多行”是使用哪个属性的关键。
以上就是css align-items与align-content区别与应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1023848.html
微信扫一扫 
支付宝扫一扫 
