justify-contet和align-items的区别

justify-content和align-items时，是CSS中常用的两个属性，用于控制弹性容器（flex container）中的弹性项目（flex items）的对齐和定位。
![在这里插入图片描述](https://img-blog.csdnimg.cn/dd87574dc152425c9d5caa4e64c756ba.png

justify-content（主轴对齐）：

justify-content属性用于沿着弹性容器的主轴对齐弹性项目。主轴由flex-direction属性决定，它可以是row（水平方向）或column（垂直方向）。justify-content属性接受几个不同的值：

- flex-start：将弹性项目对齐到主轴的起始位置。对于row方向，它将项目对齐到左侧；对于column方向，它将项目对齐到顶部。

• flex-end：将弹性项目对齐到主轴的结束位置。对于row方向，它将项目对齐到右侧；对于column方向，它将项目对齐到底部。
• center：将弹性项目沿主轴居中对齐。
• space-between：在弹性项目之间均匀分布额外的空白空间，但首尾项目不会有空白。
• space-around：在弹性项目周围均匀分布额外的空白空间，使项目之间和首尾项目与边框之间都有空白。
• space-evenly：在弹性项目之间均匀分布额外的空白空间，包括首尾项目与边框之间。
  

align-items（交叉轴对齐）：

align-items属性用于沿着弹性容器的交叉轴对齐弹性项目。交叉轴是与主轴垂直的轴。对于flex-direction: row的情况，交叉轴是垂直轴，对于flex-direction: column的情况，交叉轴是水平轴。align-items属性也接受几个不同的值：

• flex-start：将弹性项目对齐到交叉轴的起始位置。对于flex-direction: row，它将项目对齐到顶部；对于flex-direction: column，它将项目对齐到左侧。
• flex-end：将弹性项目对齐到交叉轴的结束位置。对于flex-direction: row，它将项目对齐到底部；对于flex-direction: column，它将项目对齐到右侧。
• center：将弹性项目沿交叉轴居中对齐。
• baseline：将弹性项目的基线对齐。
• stretch：如果弹性项目没有设置固定的交叉轴尺寸，将拉伸项目以填充交叉轴。
  

这些属性为弹性布局提供了灵活的对齐和定位选项，使得在构建响应式和动态布局时非常有用。

原论文：https://blog.csdn.net/u014614038/article/details/112062197