css align-content属性设置弹性布局容器内所有行的对齐方式

css align-content属性

CSS align-content属性是用来设置弹性布局容器内所有行的对齐方式。它可以控制行与行之间的间距，从而影响弹性布局容器的整体布局效果。它的值可以是flex-start、flex-end、center、space-between、space-around、stretch等关键字，也可以是具体的像素值。

使用方法

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

上面的代码将弹性布局容器的行对齐方式设置为flex-start，即弹性布局容器的顶部对齐。

如果将align-content设置为space-between，则行与行之间的间距相等，且首尾行与容器首尾边界的距离相等，如下所示：

.container {
    display: flex;
    align-content: space-between;
}

如果将align-content设置为space-around，则行与行之间的间距相等，且首尾行与容器首尾边界的距离不等，如下所示：

.container {
    display: flex;
    align-content: space-around;
}

如果将align-content设置为center，则行与行之间的间距相等，且行与容器中心对齐，如下所示：

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

如果将align-content设置为stretch，则行与行之间的间距相等，且行与容器的高度相等，如下所示：

.container {
    display: flex;
    align-content: stretch;
}