justify/align-content/items使用区别

justify-content, align-content, 以及 align-items 这三个CSS属性都是Flex布局或Grid布局中的重要属性，它们分别用于控制容器内子元素的主轴对齐方式、交叉轴线对齐方式以及单行或多行子元素在交叉轴上的对齐方式。下面详细解释一下各自的区别：

1. justify-content：

   • 主要应用于Flex布局和Grid布局中。
   • 它定义了flex项目或grid项目在主轴（main axis）上的对齐方式，即项目在一行内的水平或垂直分布方式。
   • 可选值包括：flex-start(默认，左对齐或顶部对齐)、flex-end(右对齐或底部对齐)、center(居中对齐)、space-between(两端对齐，项目之间的间隔相等)、space-around(每个项目两侧的间隔相等)、space-evenly(所有项目之间的间距相等)等。

2. align-items：

   • 同样适用于Flex布局和Grid布局。
   • 它定义了flex项目或grid项目在交叉轴（cross axis）上的对齐方式，即项目的垂直对齐方式（当主轴是横向时）或者水平对齐方式（当主轴是纵向时）。
   • 可选值包括：stretch(默认，拉伸以填满整个交叉轴空间)、flex-start(交叉轴起点对齐)、flex-end(交叉轴终点对齐)、center(交叉轴居中对齐)等。

3. align-content：

   • 仅在Flex布局中，且只针对多行的情况（即flex-wrap: wrap时）有效，在Grid布局中没有此属性。
   • 它控制的是flex容器内多行之间的对齐方式，决定了行与行之间在交叉轴方向上的空白区域如何分配。
   • 当容器内只有一行时，该属性不起作用；可选值与justify-content类似，包括：stretch(默认，拉伸以填满整个交叉轴空间)、flex-start、flex-end、center、space-between、space-around等。

总结：
在弹性布局中，这四个属性设置为center产生的效果如下：

• justify-content: 在单行和多行中都是在主轴方向上整体居中；
• justify-items：在弹性布局中没有效果，该属性会被忽略。
• align-content: 只在多行情况下有效，多行元素会整体居中。
• align-items: 单行和多行都是在所在行中居中，这里区别下整体居中（align-content）。

1. 单行：justify-content 主轴居中，align-items 次轴居中
2. 多行：justify-content 主轴居中，align-items 各行内居中， align-content 次轴整体居中

注意：一般都是 justify-content 搭配 align-items使用。

justify对应主轴，align对应次轴。content对应的是整体，items对应的是每个元素所在的那个周边区域。