CSS Flex布局中的align-content

在CSS的Flex布局中， align-content是用来定义多个行或者列在Flex容器中的垂直对齐方式的属性。

align-content是在Flex容器中操作其子元素的位置，而非子元素操作自身位置。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch | baseline | initial | inherit;

值

• flex-start：默认值，将多个行或列的对齐方式放在 Flex 容器的开头，与主轴起点对齐。

• flex-end：将多个行或列的对齐方式放在 Flex 容器的末尾，与主轴终点对齐。

• center：将多个行或列的对齐方式放在 Flex 容器的中间点上，与主轴中间点对齐。

• space-between：将多个行或列的对齐方式平均分布于 Flex 容器中，两端靠边。

• space-around：将多个行或列的对齐方式平均分布于 Flex 容器中，两端留空白。

• stretch：将多个行或列的对齐方式拉伸至与 Flex 容器相同的高度，不管是否存在间隔。

• baseline：将多个行或列的基线对齐。

• initial：规定这个属性的初始值。

• inherit：规定应该从父元素继承这个属性的值。

示例

以下是对不同 align-content 值的示例：

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: flex-start;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: flex-end;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: center;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: space-between;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: space-around;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: stretch;
}

.parent {
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: baseline;
}

注意事项

• align-content 只在有多行或多列的容器中生效，单行单列的容器中不会有作用。

• 为了让 align-content 属性生效，有需要的容器元素需要设置 flex-wrap: wrap;，这样它才能有多行或多列的效果。

• 如果 align-items 和 align-content 都定义了，align-items 会以覆盖 align-content。