这篇翻译不完整。请帮忙从英语翻译这篇文章

 

概述

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

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

初始值stretch
适用元素multi-line flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar
 

语法

/* 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;
}

结果

规范

Specification Status Comment
CSS Box Alignment Module
align-content
Working Draft Adds the space-evenly, [ first | last ]? baseline, start, end, left, and right values.
CSS Flexible Box Layout Module
align-content
Candidate Recommendation Initial definition

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21.0-webkit
29.0
(Yes)-webkit
(Yes)
28.0 (28.0)[1] 11 12.10 6.1-webkit
9.0
space-evenly 未实现 未实现 52.0 (52.0) 未实现 未实现 未实现
start, end 未实现[2] 未实现 (Yes) 未实现 未实现[2] ?
left, right 未实现[2] 未实现 52.0 (52.0)[3] 未实现 未实现[2] ?
baseline 57.0 未实现 (Yes) 未实现 44.0 ?
first baseline, last baseline 未实现 未实现 52.0 (52.0) 未实现 未实现 ?
stretch 57.0 未实现 52.0 (52.0) 未实现 44.0 ?
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 (Yes) (Yes)-webkit
(Yes)
28.0 (28.0)[1] 11.0 12.10 7.1-webkit
9.2
space-evenly 未实现 未实现 未实现 52.0 (52.0) 未实现 未实现 未实现
start, end 未实现[2] 未实现[2] 未实现 未实现 未实现 未实现[2] ?
left, right 未实现[2] 未实现[2] 未实现 52.0 (52.0)[3] 未实现 未实现[2] ?
baseline 57.0 57.0 未实现 (Yes) 未实现 44.0 ?
first baseline, last baseline 未实现 未实现 未实现 52.0 (52.0) 未实现 未实现 ?
stretch 57.0 57.0 未实现 52.0 (52.0) 未实现 44.0 ?

[1] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] The keywords start, end, left, and right are recognized but are not implemented.

[3] Versions prior to Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) already recognize the left and right keywords, but don't implement them.

参见

 

文档标签和贡献者

 最后编辑者: sqchenxiyuan,