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

`justify-content` 和 `align-items` 都是用于控制 Flexbox 布局中子元素的对齐方式的属性，但它们的作用对象不同，具体区别如下：

- `justify-content` 用于控制子元素在主轴方向（水平方向）的对齐方式，即子元素沿着主轴的排列方式。常用的值包括：

- `flex-start`：子元素沿主轴起点对齐。
- `flex-end`：子元素沿主轴终点对齐。
- `center`：子元素沿主轴居中对齐。
- `space-between`：子元素沿主轴平均分配空间，相邻子元素之间的间距相等，首尾子元素与容器边缘之间没有间距。
- `space-around`：子元素沿主轴平均分配空间，相邻子元素之间的间距相等，首尾子元素与容器边缘之间也有间距。

- `align-items` 用于控制子元素在交叉轴方向（垂直方向）的对齐方式，即子元素沿着交叉轴的排列方式。常用的值包括：

- `flex-start`：子元素沿交叉轴起点对齐。
- `flex-end`：子元素沿交叉轴终点对齐。
- `center`：子元素沿交叉轴居中对齐。
- `baseline`：子元素沿着它们的基线对齐。
- `stretch`：子元素在交叉轴方向上被拉伸以填满容器。

综上所述，`justify-content` 和 `align-items` 的作用对象不同，一个控制主轴方向上的对齐方式，一个控制交叉轴方向上的对齐方式。在实际使用中，它们可以同时使用，以达到子元素在 Flexbox 布局中完美的对齐效果。

相关问题

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，使得子元素在垂直方向上也居中。

box-sizing: border-box; border-radius: 4rpx; display: inline-flex; justify-content: center; align-items: center;

这是一段CSS代码，它包含了几个属性和值。让我逐个解释给你听：

1. `box-sizing: border-box;`：这个属性用于设置盒模型的计算方式。当设置为`border-box`时，元素的宽度和高度包括了边框和内边距，而不会被它们撑开。

2. `border-radius: 4rpx;`：这个属性用于设置元素的边框圆角半径。在这个例子中，元素的边框圆角半径被设置为4像素。

3. `display: inline-flex;`：这个属性用于设置元素的显示方式。在这个例子中，元素被设置为以行内弹性盒子的方式显示。

4. `justify-content: center;`：这个属性用于设置弹性盒子内部元素在主轴上的对齐方式。在这个例子中，元素内部的内容被设置为在主轴上居中对齐。

5. `align-items: center;`：这个属性用于设置弹性盒子内部元素在交叉轴上的对齐方式。在这个例子中，元素内部的内容被设置为在交叉轴上居中对齐。

这些属性和值可以一起使用，以创建一个具有特定样式的元素。例如，你可以将这些样式应用于一个`<div>`元素，使其具有圆角边框、居中对齐的内容，并且宽度和高度包括了边框和内边距。