align-content

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

CSS align-content 属性设置了 flexbox 的交叉轴，或 grid 或块级元素的块轴上，内容项之间和周围空间的分布。

下面的交互式示例使用网格布局演示了此属性的一些值。

试一试

align-content: start;

align-content: center;

align-content: space-between;

align-content: space-around;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  column-gap: 10px;
  height: 180px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

此属性对单行弹性容器（即具有 flex-wrap: nowrap 的容器）没有影响。

语法

css

/* Normal alignment */
align-content: normal;

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;

值

normal

项目按其默认位置打包，就像未设置 align-content 值一样。

start

项目在交叉轴上紧密地堆叠在对齐容器的起始边缘。

center

项目在交叉轴上紧密地堆叠在对齐容器的中心。

end

项目在交叉轴上紧密地堆叠在对齐容器的结束边缘。

flex-start

项目根据弹性容器的交叉起始侧，紧密地堆叠在对齐容器的边缘。这仅适用于弹性布局项目。对于非弹性容器子项，此值被视为 start。

flex-end

项目根据弹性容器的交叉结束侧，紧密地堆叠在对齐容器的边缘。这仅适用于弹性布局项目。对于非弹性容器子项，此值被视为 end。

baseline、first baseline、last baseline

指定参与首行或末行基线对齐：将框的首行或末行基线集的对齐基线与其基线共享组中所有框的共享首行或末行基线集中的相应基线对齐。

the baseline is the line upon which most letters "sit" and below which descenders extend.

first baseline 的回退对齐是 start，last baseline 的回退对齐是 end。

space-between

项目在交叉轴上沿对齐容器均匀分布。每对相邻项目之间的间距相同。第一个项目与交叉轴上对齐容器的起始边缘齐平，最后一个项目与交叉轴上对齐容器的结束边缘齐平。

space-around

项目在交叉轴上沿对齐容器均匀分布。每对相邻项目之间的间距相同。第一个项目之前和最后一个项目之后的空白空间等于每对相邻项目之间空间的一半。

space-evenly

项目在交叉轴上沿对齐容器均匀分布。每对相邻项目之间、起始边缘与第一个项目之间，以及结束边缘与最后一个项目之间的间距完全相同。

stretch

如果项目沿交叉轴的组合大小小于对齐容器的大小，则任何 auto 大小的项目都会等量（而非按比例）增加其大小，同时仍尊重 max-height/max-width（或等效功能）施加的约束，以便组合大小沿交叉轴正好填充对齐容器。

safe

与对齐关键字一起使用。如果所选关键字意味着项目会溢出对齐容器导致数据丢失，则项目将改为像对齐模式为 start 一样对齐。

unsafe

与对齐关键字一起使用。无论项目与对齐容器的相对大小以及是否可能发生导致数据丢失的溢出，都会遵守给定的对齐值。

注意： <content-distribution> 值（space-between、space-around、space-evenly 和 stretch）在块布局中没有效果，因为该块中的所有内容都被视为单个对齐主题。

正式定义

初始值	`normal`
应用于	块容器、多列容器、弹性容器
继承性	否
计算值	同指定值
动画类型	离散

正式语法

align-content = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

示例

不同 align-content 值的影响

在此示例中，您可以切换三个不同的 display 属性值，包括 flex、grid 和 block。您还可以切换 align-content 的不同值。

HTML

html

<section>
  <div class="olive">Olive</div>
  <div class="coral">Coral</div>
  <div class="deepskyblue">Deep<br />sky<br />blue</div>
  <div class="orchid">Orchid</div>
  <div class="slateblue">Slateblue</div>
  <div class="maroon">Maroon</div>
</section>

<fieldset class="controls">
  <legend>Controls</legend>
  <div class="row">
    <label for="display">display: </label>
    <select id="display">
      <option value="block" selected>block</option>
      <option value="flex">flex</option>
      <option value="grid">grid</option>
    </select>
  </div>
  <div class="row">
    <label for="alignContent">align-content: </label>
    <select id="alignContent">
      <option value="normal" selected>normal</option>
      <option value="start">start</option>
      <option value="center">center</option>
      <option value="end">end</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
      <option value="space-evenly">space-evenly</option>
    </select>
  </div>
  <p>CSS applied</p>
  <pre>
section {
  display: <span id="displayStyle">block</span>;
  align-content: <span id="align">normal</span>
}
  </pre>
</fieldset>

CSS

body {
  font-size: 1.25rem;
  display: flex;
  gap: 1rem;
}
section div {
  font-family: monospace;
  padding: 3px;
}

css

section {
  border: solid 1.5px tomato;
  height: 300px;
  width: 300px;
  flex-wrap: wrap; /* used by flex only */
  gap: 0.2rem; /* not used by block */
}
.olive {
  background-color: olive;
}
.coral {
  background-color: coral;
}
.deepskyblue {
  background-color: deepskyblue;
}
.orchid {
  background-color: orchid;
}
.slateblue {
  background-color: slateblue;
  color: white;
}
.maroon {
  background-color: maroon;
  color: white;
}

const alignContent = document.querySelector("#alignContent");
const display = document.querySelector("#display");
const container = document.querySelector("section");
const displayStyle = document.querySelector("#displayStyle");
const alignStyle = document.querySelector("#align");

alignContent.addEventListener("change", () => {
  updatePage();
});
display.addEventListener("change", () => {
  updatePage();
});
function updatePage() {
  const alVal = alignContent.value;
  const dVal = display.value;
  container.style.alignContent = alVal;
  container.style.display = dVal;
  alignStyle.innerText = alVal;
  displayStyle.innerText = dVal;
}
updatePage();

结果

尝试更改 display 值和 align-content 值。

在块布局中，子元素被视为单个元素，这意味着 space-between、space-around 和 space-evenly 的行为不同。

规范

规范
CSS Box Alignment Module Level 3 # align-justify-content
CSS 弹性盒子布局模块第 1 级 # align-content-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 9 月 21 日修改。

在 GitHub 上查看此页面 • 报告此内容问题