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。
常见取值如下：
- 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 是交叉轴。
基本上就这些。只要搞清楚主轴方向，这两个属性的使用就不会混淆了。
暂无评论内容