Css3中align-content

CSS3中的align-content属性用于定义多行flex容器中子元素的对齐方式。

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

上述代码中，我们先定义了一个flex容器，并通过flex-flow属性设置为水平方向排列，当空间不足时自动换行。接着使用align-content属性将子元素整体向起始位置对齐。

align-content属性支持以下值：

• flex-start：将子元素对齐到容器起始位置
• flex-end：将子元素对齐到容器末尾位置
• center：将子元素居中对齐
• space-between：将子元素等间隔分布排列，首尾子元素靠近容器两端
• space-around：将子元素等间隔分布排列，每个子元素两侧的空间相等
• stretch：默认值，子元素会被拉伸以填满容器的空间

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
}

上述代码将flex容器中的子元素居中对齐。

注意，当容器中只有一行子元素时，align-content属性无效。

总结：align-content属性用于定义多行flex容器中子元素的对齐方式，支持多种取值，通过设置不同的取值，可以实现灵活的子元素排列方式。