align-content

CSS 的align-content属性设置内容项目在 Flexbox的交叉轴或网格或块级元素的块轴上的空间分布。

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

试一试

此属性对单行 Flex 容器（即具有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

项目根据 Flex 容器的交叉起始端在对齐容器的边缘处彼此紧密排列。这仅适用于 Flex 布局项目。对于不是 Flex 容器子元素的项目，此值将被视为start。

flex-end

项目根据 Flex 容器的交叉结束端在对齐容器的边缘处彼此紧密排列。这仅适用于 Flex 布局项目。对于不是 Flex 容器子元素的项目，此值将被视为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

<div class="wrapper">

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>
</div>

CSS

.wrapper {
  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");
document.addEventListener("load", () => {
  updatePage();
});
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;
}

结果

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

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

规范

规范
CSS 盒子对齐模块级别 3 # align-justify-content
CSS 弹性盒子布局模块级别 1 # align-content-property

浏览器兼容性

BCD 表格仅在浏览器中加载