align-content

概述

align-content 属性定义了当作为一个弹性盒子容器的属性时，浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。

该属性对单行弹性盒子模型无效。

语法

/* Positional alignment */
align-content: center;     /* Pack items around the center */
align-content: start;      /* Pack items from the start */
align-content: end;        /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */
align-content: left;       /* Pack items from the left */
align-content: right;      /* Pack items from the right */
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: space-evenly;  /* Distribute items evenly
                                 Items have equal space around them */
align-content: stretch;       /* Distribute items evently
                                 Stretch 'auto'-sized items to fit
                                 the container */
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
 /* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

取值

start

The items are packed flush to each other toward the start edge of the alignment container in the cross axis.

end

The items are packed flush to each other toward the end edge of the alignment container in the cross axis.

flex-start

所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

flex-end

所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

center

所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

left

The items are packed flush to each other toward the left edge of the alignment container in the cross axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.

right

The items are packed flush to each other toward the right edge of the alignment container in the cross axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.

baseline
first baseline
last baseline

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.

space-between

所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

space-around

所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

stretch

拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

safe

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.

unsafe

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

形式化语法

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

例子

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="contentAlignment">
  <option value="flex-start">flex-start</option>
  <option value="flex-end" selected>flex-end</option>
  <option value="center">center</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

CSS

#container {
  display: flex;
  height:200px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  align-content: flex-end; /* Can be changed in the live sample */
}
div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  height: 50px;
  background-color: #a0c8ff;
}

var contentAlignment = document.getElementById("contentAlignment");
contentAlignment.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignContent = evt.target.value;
});

结果

规范

浏览器兼容性

参见

• 使用 CSS flexible boxes