align-content 堆栈伸缩行

CSSalign-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

该属性对单行弹性盒子模型无效。(即:带有 flex-wrap: nowrap)。

语法

/* 基本位置对齐 */
/*align-content不采用左右值 */
align-content: center;     /* 将项目放置在中点 */
align-content: start;      /* 最先放置项目 */
align-content: end;        /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平,
                                 最后一项与终止点齐平 */
align-content: space-around;  /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly;  /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch;       /* 均匀分布项目
                                 拉伸‘自动’-大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */ 
align-content: inherit; /* 继承 */
align-content: initial;  /* 初始值 */
align-content: unset; /* 未设置 */

取值

start
所有行从容器的起始边缘开始填充。
end
所有行从容器的结束边缘开始填充。
flex-start
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
center
所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
normal
这些项按默认位置填充,就好像没有设置对齐内容值一样。
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
所有行在容器中平均分布,相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
space-evenly
所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距,主开始边和第一项,以及主结束边和最后一项,都是完全相同
stretch
拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行
safe
与对齐关键字一起使用。如果所选的关键字意味着项溢出对齐容器而导致数据丢失,则将对项进行对齐,就好像启动了对齐模式一样。
unsafe
无论元素和对齐容器的相对大小如何,都将使用给定的对齐值。

标准语法

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

where
<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

示例

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>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="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Result

规范

Specification(规范) Status(状态) Comment(备注)
CSS Box Alignment Module Level 3
align-content
Working Draft 添加了 space-evenly, [ first | last ]? baseline, start, end, left, 和 right 的属性值.
CSS Flexible Box Layout Module
align-content
Candidate Recommendation 初始定义
初始值normal
适用元素multi-line flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

在弹性盒子布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11Opera Full support 12.1Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 9
Full support 9
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
baselineChrome Full support 57Edge No support NoFirefox Full support 45IE No support NoOpera Full support 44Safari Full support 9WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 45Opera Android Full support 43Safari iOS Full support 9Samsung Internet Android Full support 7.0
first baseline and last baselineChrome No support NoEdge No support NoFirefox Full support 52IE No support NoOpera No support NoSafari Full support 11WebView Android No support NoChrome Android No support NoFirefox Android Full support 52Opera Android No support NoSafari iOS Full support 11Samsung Internet Android No support No
left and rightChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support NoFirefox No support 52 — 60
Notes
No support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android No support 52 — 60
Notes
No support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
safe and unsafeChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support NoFirefox Full support 63IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
WebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android Full support 63Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Samsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
space-evenlyChrome Full support 60Edge No support NoFirefox Full support 52IE No support NoOpera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 52Opera Android Full support 44Safari iOS Full support 11Samsung Internet Android Full support 8.0
start and endChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support NoFirefox Full support 45IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android Full support 45Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
stretchChrome Full support 57Edge No support NoFirefox Full support 52IE No support NoOpera Full support 44Safari Full support 9WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 52Opera Android Full support 43Safari iOS Full support 9Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

在网格布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Full support 57Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 52Firefox Android Full support 52Opera Android Full support 43Safari iOS Full support 10.3Samsung Internet Android Full support 6.2

Legend

Full support  
Full support
No support  
No support

相关链接