导航分类

CSS accent-color 属性 CSS align-items 属性

CSS align-content 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

align-content属性用于控制弹性盒子（Flexbox）或网格布局（Grid）容器内多行内容的对齐方式。

在 Flexbox 布局里，当容器内项目在交叉轴方向有多余空间时，此属性可调整项目在交叉轴上的分布。
在 Grid 布局中，它能处理网格容器内所有行在交叉轴方向的对齐。

常用的实例

接下来用实例演示align-content属性的用法，来深化您对align-content属性的理解。

1. 弹性盒子（Flexbox）对齐

实例代码运行代码

复制

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

2. 网格布局（Grid）容器对齐

实例代码运行代码

复制

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

CSS 语法

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

属性值

值	描述
`flex-start`	项目向交叉轴起点对齐（默认值）
`flex-end`	项目向交叉轴终点对齐。
`center`	项目在交叉轴居中对齐。
`space-between`	第一行在起点，最后一行在终点，其余均匀分布。
`space-around`	每行周围分配相等空间。
`space-evenly`	所有行均匀分布，包括两端。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。

浏览器支持

表格中的数字注明了完全支持align-content属性的首个浏览器版本。


57.0	16.0	52.0	10.1	44.0

CSS accent-color 属性 CSS align-items 属性

评论区 0

发表评论

教程介绍

CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。

32 章节

36 阅读

0 评论