align-items和align-content都可以用于控制flex容器中交叉轴上项目的对齐方式，但它们的作用范围不同。

• align-items适用于单行flex容器，可以设置单个项目的对齐方式。
• align-content适用于多行flex容器，可以设置多个行的对齐方式。

// 代码示例 .container { display: flex; flex-wrap: wrap; align-content: center; /* 将多行项目垂直居中对齐 */ }

justify-items和justify-content都可以用于控制flex容器中主轴上项目的对齐方式，但它们的作用范围也不同。

• justify-items适用于单个项目，可以设置单个项目的对齐方式。
• justify-content适用于所有项目，可以设置所有项目在主轴上的对齐方式。

// 代码示例 .container { display: flex; justify-content: center; /* 将所有项目水平居中对齐 */ }

需要注意的是，以上四个属性的取值方式相同，常用的取值有：

• flex-start：靠左或者靠上对齐；
• flex-end：靠右或者靠下对齐；
• center：居中对齐；
• space-between：平均分配空间，使项目之间间距相等；
• space-around：平均分配空间，使项目之间间距相等，并在项目两侧留有一半的空间。

// 代码示例 .container { display: flex; justify-content: space-between; /* 将所有项目平均分配空间，同时第一个和最后一个项目都与容器边缘相邻 / align-items: center; / 将所有项目垂直居中对齐 */ }