justify-items: center;和 justify-content: center;区别

`justify-items` 和 `justify-content` 是 CSS Flexbox 布局中的两个属性，它们用于控制行（交叉轴）和列（主轴）上子元素的对齐方式。以下是它们的区别：

1. **justify-items**: 这个属性控制的是 flex 容器（flex container）内项目（flex items）在垂直方向（交叉轴）上的对齐方式。常见的值有 `flex-start`（默认值，顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）和 `space-between`（子项均匀分布，两端对齐但空隙相等）、`space-around`（每个子项周围都有等间距，子项之间靠拢）等。

2. **justify-content**: 这个属性则控制的是 flex 容器内项目在水平方向（主轴）上的对齐方式。同样，它的常见值包括 `flex-start`（左对齐）、`flex-end`（右对齐）、`center`（居中对齐）、`space-between`（子项均匀分布，两端对齐但空隙相等）、`space-around`（每个项目周围都有等间距）等。

简单来说，`justify-items`关注的是单个项目在容器内的垂直对齐，而 `justify-content`关注的是整个项目的行在容器内的水平对齐。如果要调整一个容器内的所有子元素在容器内部的上下左右对齐，你需要同时设置这两个属性。

相关问题

display: flex; align-items: center; justify-content: center;

这是CSS中用于布局的三个属性，它们通常一起使用。

`display: flex;` 用于将一个元素设置为弹性布局容器，使其内部的子元素能够按照一定的规则进行排列。

`align-items: center;` 用于设置子元素的垂直对齐方式，这里设置为居中对齐。

`justify-content: center;` 用于设置子元素的水平对齐方式，这里也设置为居中对齐。

综合起来，这三个属性可以实现让一个容器内部的子元素在水平和垂直方向上都居中对齐的效果。

例如，下面是一个实现了水平和垂直居中的例子：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在这个例子中，我们创建了一个具有 `display: flex;` 属性的容器，内部包含一个宽高为100px的子元素。由于在容器中设置了 `align-items: center;` 和 `justify-content: center;`，因此子元素会在水平和垂直方向上都居中对齐。容器的高度设置为200px，使得子元素在垂直方向上也居中。

justify-content: center; align-items: center;

`justify-content: center;` 和 `align-items: center;` 是用来在容器元素中居中子元素的常用CSS属性。

`justify-content: center;` 属性用于水平居中子元素。它会将子元素沿着容器的水平中心线居中对齐。

`align-items: center;` 属性用于垂直居中子元素。它会将子元素沿着容器的垂直中心线居中对齐。

通常这两个属性会一起使用，以实现在容器元素中居中子元素的效果。例如：

.container {
  display: flex; /* 或者 display: inline-flex; */
  justify-content: center;
  align-items: center;
}

上面的代码中，我们将容器元素设置为 flex 布局，并使用 `justify-content: center;` 和 `align-items: center;` 属性将子元素在容器元素中水平和垂直居中。