css flexbox对齐方式align-content如何使用-css教程-PHP中文网

css flexbox对齐方式align-content如何使用

P粉602998670

发布： 2025-11-03 06:45:16

原创

906人浏览过

align-content用于多行flex容器中交叉轴对齐，需配合flex-wrap使用。其值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch，默认为stretch，控制行间对齐方式，不影响单行布局。

css flexbox对齐方式align-content如何使用

align-content 用于控制 Flex 容器中多行 flex 项目在交叉轴（cross axis）上的对齐方式，但前提是容器内的项目必须换行（即 flex-wrap: wrap 或 wrap-reverse），否则它不会生效。

1. 基本前提：开启换行

align-content 只在多行 flex 容器中起作用。你需要设置：

flex-wrap: wrap; —— 允许项目换行
或 flex-wrap: wrap-reverse;

如果所有项目都在一行，align-content 不会产生任何效果。

2. align-content 的可选值及效果

以下是常用的 align-content 取值及其表现：

flex-start：各行向交叉轴起点对齐
flex-end：各行向交叉轴终点对齐
center：各行在交叉轴居中对齐
space-between：行与行之间等距分布，首行在起点，末行在终点
space-around：每行周围分配相等空间
space-evenly：所有行之间的间距以及与容器边缘的间距都相等
stretch（默认值）：当行高度未设定时，拉伸填满容器交叉轴空间

3. 实际示例

HTML 结构：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

登录后复制

CSS 样式：

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

查看详情

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: center; /* 控制多行垂直居中 */
  border: 1px solid #ccc;
}
<p>.item {
width: 100px;
height: 50px;
}</p>

登录后复制

当项目换行成两行时，这两行会在容器中垂直居中对齐。