答案：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者配合实现居中、两端分布等布局；默认 row 时主轴为水平方向，column 时相反；常见用法包括 center 实现完全居中，space-between 实现两端对齐，导航栏常用 flex-start 与 center 组合；多行布局时 align-content 管理行间距，align-items 仍控制每行内元素的交叉轴对齐；响应式中可随屏幕尺寸调整主轴方向与对齐方式，灵活适配不同布局需求。
在使用 CSS Flexbox 布局时，justify-content 和 align-items 是两个最常用也最关键的属性。它们分别控制主轴和交叉轴上的对齐方式，配合使用可以轻松实现各种居中、分布和对齐效果。
理解主轴与交叉轴
Flex 容器的布局方向由 flex-direction 决定，这直接影响 justify-content 和 align-items 的作用方向：
justify-content：控制子元素在主轴（main axis）上的对齐align-items：控制子元素在交叉轴（cross axis）上的对齐
例如，默认 flex-direction: row 时，主轴是水平方向，交叉轴是垂直方向；若设为 column，则相反。
常见组合用法
以下是几种实用且常见的搭配场景：
立即学习“前端免费学习笔记（深入）”；
1. 完全居中一个元素
让子元素在容器中水平垂直都居中：
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}
适用于弹窗、登录框、卡片内容等需要居中的场景。
2. 左对齐但垂直居中
常用于导航栏或侧边栏菜单项的对齐：
稿定抠图
AI自动消除图片背景
76 查看详情
.nav { display: flex; justify-content: flex-start; /* 靠左排列 */ align-items: center; /* 垂直居中 */}
文字或图标会在容器中左侧对齐，同时高度方向上居中显示。
3. 两端对齐，垂直居中
适合页眉或按钮组布局：
.header { display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */}
左右两边的元素贴边，中间留白自动分配，整体在垂直方向居中。
注意单行与多行的区别
align-items 只作用于单行 Flex 项目。如果换行（flex-wrap: wrap），且希望多行之间也对齐，应使用 align-content：
.container { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; /* 控制多行之间的对齐 */ align-items: center; /* 控制每行内项目的交叉轴对齐 */ height: 400px; /* 需要固定高度才能看出效果 */}
此时 align-items 保证每行内的项目垂直居中，align-content 控制行与行之间的分布。
响应式中的灵活运用
在不同屏幕尺寸下，可调整这两个属性实现适配：
.card-group { display: flex; flex-direction: row; justify-content: center; align-items: stretch;}@media (max-width: 768px) {.card-group {flex-direction: column;align-items: center; / 切换为竖向后，控制宽度对齐 /justify-content: flex-start; / 主轴变为垂直，靠上对齐 /}}
横向时居中排列并拉伸高度，竖向时堆叠并对齐宽度。
基本上就这些。掌握 justify-content 与 align-items 的配合，关键在于理清主轴方向，并根据布局目标选择合适的对齐方式。不复杂但容易忽略细节，多练习几种组合就能熟练应用。
以上就是css justify-content与align-items配合使用技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1027241.html
微信扫一扫 
支付宝扫一扫 
