justify-content和align-items的区别-泉州小程序开发

`justify-content` 和 `align-items` 是用于控制弹性容器（Flex Container）中子项目（Flex Item）的布局的两个重要 CSS 属性。它们的主要区别在于它们控制的方向不同。

1. `justify-content`：这个属性用于控制弹性容器中子项目在主轴（通常是水平方向）上的对齐方式。它可以接受以下值：

   - `flex-start`：子项目在主轴上向起始位置对齐。

   - `flex-end`：子项目在主轴上向结束位置对齐。

   - `center`：子项目在主轴上居中对齐。

   - `space-between`：子项目在主轴上平均分布，首尾子项目分别靠近容器的起始和结束位置。

   - `space-around`：子项目在主轴上平均分布，具有相等的空间，包括容器的起始和结束位置。

   - `space-evenly`：子项目在主轴上平均分布，包括容器的起始和结束位置，以及子项目之间。

   例如，如果主轴是水平方向，`justify-content` 控制子项目在水平方向上的对齐方式。

2. `align-items`：这个属性用于控制弹性容器中子项目在交叉轴（通常是垂直方向）上的对齐方式。它可以接受以下值：

   - `flex-start`：子项目在交叉轴上向起始位置对齐。

   - `flex-end`：子项目在交叉轴上向结束位置对齐。

   - `center`：子项目在交叉轴上居中对齐。

   - `baseline`：子项目在交叉轴上按照它们的基线对齐。

   - `stretch`：子项目在交叉轴上拉伸以填充整个容器。

   例如，如果交叉轴是垂直方向，`align-items` 控制子项目在垂直方向上的对齐方式。

总结：`justify-content` 控制子项目在主轴上的对齐方式，而 `align-items` 控制子项目在交叉轴上的对齐方式。这两个属性通常一起使用，以控制子项目在二维空间中的布局。