CSS Flexbox 中的 align-content 属性详解

在 CSS Flexbox 布局中，align-content 属性用来控制多行或多列项目在交叉轴上的对齐方式。本文将详细介绍 align-content 属性的用法、取值及其对布局的影响。

align-content 属性的用法

align-content 属性只能应用于 flex 容器，用于控制多行或多列项目在交叉轴上的对齐方式。具体用法如下：

.container {
  display: flex;
  align-content: <value>;
}

其中，<value> 取值如下：

• flex-start：多行或多列项目在交叉轴的起始位置对齐。
• flex-end：多行或多列项目在交叉轴的结束位置对齐。
• center：多行或多列项目在交叉轴的中间位置对齐。
• space-between：多行或多列项目在交叉轴上平均分布，首尾不留空白。
• space-around：多行或多列项目在交叉轴上平均分布，首尾留有空白。
• stretch：默认值，多行或多列项目在交叉轴上拉伸以填满整个容器。

align-content 属性的影响

align-content 属性对于多行或多列项目的对齐非常重要。如果项目只有一行或一列，该属性将不起作用。

flex-start

当使用 flex-start 时，多行或多列项目在交叉轴的起始位置对齐。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

flex-end

当使用 flex-end 时，多行或多列项目在交叉轴的结束位置对齐。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

center

当使用 center 时，多行或多列项目在交叉轴的中间位置对齐。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

space-between

当使用 space-between 时，多行或多列项目在交叉轴上平均分布，首尾不留空白。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

space-around

当使用 space-around 时，多行或多列项目在交叉轴上平均分布，首尾留有空白。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

stretch

当使用 stretch 时，多行或多列项目在交叉轴上拉伸以填满整个容器。示例代码如下：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

总结

align-content 属性是 CSS Flexbox 布局中非常重要的属性，它控制多行或多列项目在交叉轴上的对齐方式。在实际开发中，我们需要根据实际需求选择不同的取值来达到最佳的布局效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65705970d2f5e1655d91142f