CSS 伸缩盒布局模组
Editor's Draft, 16 October 2012
This version:
http://dev.w3.org/csswg/css3-flexbox/
Latest version:
http://www.w3.org/TR/css3-flexbox/
Editor's Draft:
http://dev.w3.org/csswg/css3-flexbox/
Previous version:
http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/
Issues List:
Bugzilla
Bugs for Flexbox
Discussion:
www-style@w3.org
with subject line "[css3-flexbox] …message topic…"
Editors:
Tab Atkins Jr. , Google
Inc.
Elika J. Etemad ,
Mozilla
Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
Authors and former editors:
L. David Baron, Mozilla Corporation, dbaron@dbaron.org
Neil Deakin, Mozilla Corporation, enndeakin@gmail.com
Ian Hickson, formerly of Opera Software, ian@hixie.ch
David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
Copyright © 2012 W3C ® (MIT ERCIM Keio ), All Rights Reserved. W3C liability ,
trademark
and document
use rules apply.
Abstract
Status of this document
Table of contents
1. 介绍本章节不具有规范叙述。
CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：
块布局 ― 为了呈现文档而设计出来的布局模式
行内布局 ― 为了呈现文本而设计出来的布局模式
表格布局 ― 为了用格子呈现 2D 数据而设计出来的布局模式
定位布局 ― 为了非常直接地定位元素而设计出来的布局模式，定位元素基本与其他元素毫无关
本模块引入了新的布局模式：伸缩布局 ，是为了呈现复杂的应用与页面而设计出来的。
1.1. 概述本章节不具有规范叙述。
伸缩布局只与块布局有非常微薄的相似之处。伸缩布局不具有浮动 或是多栏 等等在块布局中可以用的复杂、面向文本／文档的属性，换来的是简单、强大的分配空间与对齐内容的工具，是 Web 应用与复杂的页面所需要的。一个伸缩容器的内容：
可以以任何伸缩方向 （向左、向右、向下，甚至是向上！）配置
可以在样式层（也就是视觉顺序可以跟源码、语音顺序无关）调换 、重排 显示顺序
可以沿着单一（主 ）轴线性配置或是沿着第二（侧 ）轴折行
可以因为可用空间的存在扩展内容的尺寸
可以沿着容器或彼此对齐
可以在保持侧轴长度 折叠 或反折叠
这时一个产品型录的例子，每个商品有品名、相片、描叙、购买按钮。设计师希望每个产品栏有相同的尺寸，相片要在文字叙述之上，而且不管商品的描叙有多长购买按钮要沿着底部对齐。伸缩布局让这个设计的很多部分的实现起来很简单：
产品型录可以用伸缩布局，让商品栏水平排列成一行一行，并让每一行的商品栏有相同的高度。每一个商品栏本生是一个竖排的伸缩容器，里面内容垂直排列。
在每一个商品栏里，源码里的内容以逻辑顺序排列：品名、叙述、相片，这为语音、非 CSS 浏览器提供了一个恰当的顺序。在一个视觉浏览器上，可以用「orderalign-self 不管每一个商品的叙述有多高，购买按钮上的「auto」外边距 让按钮总是在商品栏里置底。
<style>
#deals {
display: flex; /* 应为是伸缩布局每一个商品有同样高度 */
flex-flow: row wrap; /* 让商品折行 */
}
.sale-item {
display: flex; /* 用伸缩布局配置每一个商品的描述 */
flex-flow: column; /* 垂直配置商品的内容 */
}
.sale-item > img {
order: -1; /* 将图像挪到其他内容之前（视觉顺序） */
align-self: center; /* 在侧轴（水平向）置中图像 */
}
.sale-item > button {
margin-top: auto; /* 自动顶端外边距让按钮置底 */
}
</style>
<section id='deals'>
<section class='sale-item'>
<h1>电脑初学者配备</h1>
<p>如果你的钱不够多，这是你可以买到的最好的电脑。
<ul>
<li>电脑
<li>屏幕
<li>键盘
<li>滑鼠
</ul>
<img src='images/computer.jpg'
alt='你可以得到：一台白色的电脑与其他配备。'>
<button>下单！</button>
</section>
<section class='sale-item'>
…
</section>
…
</section>
电脑初学者配备
如果你的钱不够多，这是你可以买到的最好的电脑。
打印机
只能打印 ASCII art。
上面代码的可能渲染结果。
1.2. 模块关系本模块扩展了「diplay」属性 [CSS21] ，加了新的块级、行内级的显示形态，并定义了一种新的格式化上下文与控制其布局的属性。本模块也定义了「min-width」与「min-height」的新的初始值。本模块定义的所有属性皆不适用于「::first-line」与「::first-letter」伪元素。
1.3. 取值本规范遵守 [CSS21] 的 CSS 属性定义常规 。不在本规范定义的取值型态由层级样式表等级 2 更新版本 1 定义 [CSS21] ，其他 CSS 模组可扩充这些取值型态 ― 举例来说，同时使用 [CSS3VAL] 与本模组会扩充本规范使用的 <length> 取值型态的定义。
本规范定义的所有属性，除了在取值栏位列出的特定属性可使用的取值以外，还接受「inherit
2. 伸缩布局模型一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器 伸缩项目
与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流 flex-flow
一个「row
主轴、主轴方向
使用者代理沿着一个伸缩容器的主轴 配置伸缩项目 主轴 主轴方向 的延伸。
主轴起点、主轴终点
伸缩项目 主轴起点 边开始，往主轴终点 边结束。
主轴长度、主轴长度属性
伸缩项目 主轴方向 主轴长度 ，伸缩项目 主轴长度属性 是「width」或「height」属性，由哪一个对着主轴方向
侧轴、侧轴方向
与主轴 侧轴 ，是侧轴方向 的延伸。
侧轴起点、侧轴终点
伸缩行的配置从容器的侧轴起点 边开始，往侧轴终点 边结束。
侧轴长度、侧轴长度属性
伸缩项目 侧轴方向 侧轴长度 ，伸缩项目 侧轴长度属性 是「width」或「height」属性，由哪一个对着侧轴方向
名称：
display
新值 ：
flex | inline-flex
「flex」
这个值让元素产生块级伸缩容器 「inline-flex」
这个值让元素产生行内级伸缩容器
伸缩容器 会为其内容建立新的伸缩格式化上下文 。除了使用伸缩排版而不块排版以外，伸缩格式化上下文与块格式化上下文根元素相同 ― 浮动不会闯入伸缩容器，且伸缩容器的边界不与其内容的边界折叠
伸缩容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。特别是：
多栏模组的所有「column-*」属性在伸缩容器上没有作用。
「float」与「clear」在伸缩项目 「vertical-align」在伸缩项目
若元素「display」的指定值是「inline-flexdisplay」的计算值是「flexCSS 2.1 章节 9.7 的表格增修「指定值」是「inline-flexflex
4. 伸缩项目一个伸缩容器 伸缩项目 ― 伸缩容器的每一个子元素（除了需要盒修复的元素之外）都会成为一个伸缩项目 伸缩项目 伸缩项目 display: none」。
伸缩项目 display」的值决定。使用者代理使用 CSS 2.1 章节 9.7 的表格决定伸缩项目 display」的计算值。
CSS 工作组预计会在未来的规范里为伸缩项目引入新的「display」值，以取代这条叙述。
伸缩项目范例
<div style="display: flex">
<!-- 伸缩项目：块级子元素 -->
<div id="item1">块</div>
<!-- 伸缩项目：浮动元素 ― 使用者代理会忽略浮动 -->
<div id="item2" style="float: left;">浮动</div>
<!-- 伸缩项目：包着行内内容的无名块盒 -->
无名项目 3
<!-- 伸缩项目：行内子元素 -->
<div id="item4">span</div>
<!-- 伸缩项目：<span> 变成 'display: block'，所以没有行内块现象。-->
<span>
项目 5
<div id=not-an-item>项目 5</div>
项目 5
</span>
</div>
有些「display」会触发无名盒的生成，举例来说，使用者代理会在单独的「table-cell」盒周围生成「table」与「table-row」元素 。[CSS21] 这种修复必须在伸缩容器的子元素变成伸缩项目 display: table-cell」子元素，两个元素周围的无名表格包裹盒会变成伸缩项目
本规范预期让未来生成无名容器（如「display:ruby」）或会搅动盒树（「display:run-in」）的显示型态造成的变化在决定伸缩项目之前发生。
4.1. 绝对定位的伸缩子元素伸缩容器 重新排序步骤 之后的所有步骤。但是，若「left」和「right」的值均为「auto」或者「top」和「bottom」的值均为「auto」，则这些属性的使用值由绝对定位子元素的静态位置 得来，如下：
若「left」和「right」的值均为「auto」，则用户代理必须将绝对定位子元素在主轴起点 侧轴起点 静态位置 top」和「bottom」的值均为「auto」，则用户代理必须将绝对定位子元素在主轴起点 侧轴起点 静态位置
对于主轴
若伸缩容器 伸缩项目 静态位置 伸缩容器 justify-content伸缩项目 伸缩容器 否则，若绝对定位子元素的前一个伸缩项目 伸缩项目 伸缩项目 静态位置 伸缩项目 主轴起点 否则，静态位置 伸缩项目 主轴终点
对于侧轴
若绝对定位子元素的前一个伸缩项目 静态位置 侧轴起点
否则，静态位置 侧轴起点
这个定义的意图是要让静态位置差不多是一个匿名 0x0 的流内、以「flex-start」对齐 的伸缩项目参与伸缩布局后的位置，主要的差别在于假想项目周围由「justify-content: space-around」与「justify-content: space-between」分配的空间被抑制了：假想项目跟下一个真项目（如果存在）间的空白，又或是假想项目跟前一个真项目（如果下一个真项目不存在）间的空白（被抑制了）。
4.2. 伸缩项目的边界相邻伸缩项目 「auto」边界 《用「auto」边界对齐》
4.3. Flex Item Painting4.4. 折叠项目在伸缩项目上设定「visibility: collapse」会让项目变成折叠伸缩项目 ，效果与表格栏或是表格列上的「visibility: collapse」类似 ― 使用者代理不会渲染折叠元素，但是项目会留下一个「支撑」使得伸缩行的侧轴长度维持稳定。因此，若伸缩容器只有一行伸缩行，动态折叠项目或取消折叠不会对伸缩容器的侧轴长度
虽然使用者代理不渲染折叠伸缩项目，这些项目还是会出现在格式化结构 中，因此与「display: none」项目不同 [CSS21] ，只靠元素出现在格式化结构就有的效果（如递增计数器或是运行动画、转场）在折叠项目上仍然有效。
Sample rendering for example code below
Interesting Stuff to Read
<style>
@media (min-width: 60em) {
/* two column layout only when enough room (relative to default text size) */
header + div { display: flex; }
#main {
flex: 1; /* Main takes up all remaining space */
order: 1; /* Place it after (to the right of) the navigation */
min-width: 12em; /* Optimize main content area sizing */
}
}
/* menu items use flex layout so that visibility:collapse will work */
nav > ul > li {
display: flex;
flex-flow: column;
}
/* dynamically collapse submenus when not targetted */
nav > ul > li:not(:target):not(:hover) > ul {
visibility: collapse;
}
</style>
…
</header>
<div>
<article id="main">
Interesting Stuff to Read
</article>
<nav>
<ul>
<li id="nav-about"><a href="#nav-about">About</a>
…
<li id="nav-projects"><a href="#nav-projects">Projects</a>
<ul>
<li><a href="…">Art</a>
<li><a href="…">Architecture</a>
<li><a href="…">Music</a>
</ul>
<li id="nav-interact"><a href="#nav-interact">Interact</a>
…
</ul>
</nav>
</div>
<footer>
…
为了计算「支撑」的尺寸，使用者代理先假设项目未折叠并进行伸缩布局，然后将折叠项目用具有原来项目所在的伸缩行的侧轴长度的「支撑」替换并重新进行伸缩布局。《伸缩布局演算法》 visibility: collapse」如何与伸缩布局互动的规范性叙述。
请注意在任何伸缩项目上使用「visibility: collpase」会让使用者代理执行伸缩布局演算法的时候重复最费时的几个步骤。若项目不会需要动态折叠、取消折叠，本规范建议网页作者继续使用「display: none」来隐藏项目，因为对于布局引擎来说这样比较有效率
4.5. 伸缩项目的默认最小长度为了让伸缩项目有合理的最小长度，本规范为 CSS 2.1 定义的「min-width」与「min-height」属性增加一个新的「auto[CSS21]
名称：
min-width, min-height
新值 ：
auto
新初始值：
auto
新计算值：
指定的百分比率或绝对长度或关键字
auto
当使用在伸缩项目的最小主轴长度属性的时候，本关键词代表最小主轴长度是最小内容长度，以帮助确保项目够大到足以容纳其内容。
CSS 工作组预计在定义「min-content」关验字（书写模式附录 D ）的规范足够成熟时，在这种情况让「automin-content」。
否则，（除非未来规范描述别的行为）本关键字的计算值为「0」。
请注意虽然基于内容的最小尺寸通常可以避免内容重叠或是内容溢出伸缩项目，但在某些情况这是不适当的：
如果要在文档的主要内容区域使用伸缩布局，最好也设置相对于字体的最小宽度，如「min-width: 12em」。基于内容的最小宽度会导致网页里有大型表格或图像的时候，整个内容区域扩展以至于溢出窗口，使得一行文本过长、难读。
请也注意在含有大量内容的项目上设置基于内容的最小尺寸会让布局引擎必须遍历项目的所有内容方可找到项目的最小尺寸，而在网页作者设置明确的最小值时不须要这种遍历程序。（然而，对于含有小量内容的伸缩项目，这种遍历并不会造成效能问题。）
5. 排序与方向伸缩容器的内容可以用任何方向与任何顺序进行布局，这让网页作者轻松地达到之前需要复杂、不牢靠的「float」与「clear」属性才可以实现的效果。这个功能透过「flex-directionflex-wraporder
名称：
flex-direction
取值 ：
row | row-reverse | column | column-reverse
初始：
row
适用于：
伸缩容器
继承：
否
计算值：
同指定值
媒介：动画：
视觉
动画：
否
正规顺序
照文法
「flex-direction主轴 伸缩项目
「row」
伸缩容器的主轴 书写模式 的行内轴（文字布局的主要方向）同向。主轴起点 主轴终点 书写模式 的始 与结 方向。
「row-reverse」
除了主轴起点 主轴终点 row 「column」
伸缩容器的主轴 书写模式 的块轴（块布局的主要方向）同向。主轴起点 主轴终点 书写模式 的前 与后 方向。
「column-reverse」
除了主轴起点 主轴终点 column
名称：
flex-wrap
取值 ：
nowrap | wrap | wrap-reverse
初始：
nowrap
适用于：
伸缩容器
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
否
正规顺序
照文法
「flex-wrap单行 多行 侧轴
「nowrap」
伸缩容器为单行 侧轴起点 书写模式 的起点 或前 ／头在侧轴 侧轴终点 侧轴起点 「wrap」
伸缩容器为多行 侧轴起点 书写模式 的起点 或前 ／头在侧轴 侧轴终点 侧轴起点 「wrap-reverse」
除了侧轴起点 侧轴终点 wrap
「flex-flowflex-directionflex-wrap
请注意「flex-flowrow
英文
日文
flex-flow: row wrap;
flex-flow: row wrap;
5.4. 显示顺序 ―「order预设状态下，使用者代理会用伸缩项目 order
名称：
order
取值 ：
<integer>
初始：
0
适用于：
伸缩项目与伸缩容器的绝对定位子元素
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
yes
正规顺序
照文法
「orderorder伸缩项目
伸缩容器会从序号最小的组开始布局，在同一个组里的项目依在来源文件里的次序布局，这也影响了着画次序 [CSS21] ，正如同在文件中元素已经改变次序一般。
下图的简单标签介面中，一个使用中的模板总是显示在最前面：
这可以由以下 CSS 实作（仅显示部份相关程式码）：
.tabs {
display: flex;
}
.tabs > .current {
order: -1; /* 比喻设值 0 要小 */
}
除非有别的规范说明，本属性在不是伸缩项目
5.4.1. Reordering and
Accessibility
很多 Web 页面在 HTML 里有很相似的构造，在上面有一个标题，下面一个注解，一个内容区块跟一个或两个在中间的额外栏位。一般来说，内容出现在页面原始码的前面（在额外的栏位之前）比较好。然而，这让很多一般的设计很难达成，像是把栏位摆在内容区块的两边。多年以来这种俗称「圣杯布局」的两个额外栏位的布局已经有很多种方法完成了，然而「order
这种布局可以很简单地由伸缩布局达成：
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
更棒的是，预设下这些栏位是等高
@media all and (max-width: 600px) {
/* 要放三个栏位太窄了 */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* 回到文件顺序 */
order: 0; width: auto;
}
}
（用多行伸缩容器实现智慧换行就当作是给读者的习题。）
6. 伸缩行伸缩容器可以是单行 多行 flex-wrap
单行 的伸缩容器会将其所有子元素在单独的一行上进行布局，即便这可能导致内容溢出。
多行 的伸缩窗口会将其伸缩项目 flex-wrap侧轴 伸缩项目
在本示例中的四个按钮如果完全并排会放不下。
<style>
#flex {
display: flex;
flex-flow: row wrap;
width: 300px;
}
.item {
width: 80px;
}
<style>
<div id="flex">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
由于容器的宽度是 300px，同一行上仅能放得下三个项目，这三个项目占用了 240px，剩余空间为 60px。由于「flex-wrapwrap
多行伸缩容器的渲染示例。
用户代理将内容分布到不同的行之后，每一行单独进行布局：可伸缩长度的计算以及「justify-contentalign-self
当一个伸缩容器有多个伸缩行时，每一行的侧轴长度 伸缩项目 align-selfalign-content单行 多行 侧轴长度 侧轴长度 align-content主轴长度 主轴长度
这一示例与上一示例相同，唯一的区别是伸缩项目拥有「flex: auto」样式。因为第一行的剩余空间为 60px 且所有项目有相同的可伸缩性，所以三個項目均額外獲得寬度 20px 而變為寬度 100px。由于剩余的项目自己单独在一行伸缩行中，它会扩展到整个伸缩行，即宽度 300px。
与上一示例相同，但所有项目设有「flex: auto」。
7. Flexibility伸缩布局决定性的特性是让伸缩项目 伸缩项目 flex伸缩项目 扩展比率 收缩比率
7.1. 「flex
名称：
flex
取值 ：
none | [ <'flex-grow'> <'flex-shrink'>? ||
<'flex-basis'> ]
初始：
参见各属性
适用于：
伸缩项目
继承：
参见各属性
计算值：
参见各属性
媒介：
视觉
动画：
参见各属性
正规顺序
照文法
「flex可伸缩长度 的部件：扩展比率 收缩比率 伸缩基准值 伸缩项目 flex主轴长度属性 主轴长度 伸缩项目 flex
<‘flex-grow
此 <number> 部件可以用来设置「flex-grow长写 并指定扩展比率 ，也就是剩余空间是正值的时候此伸缩项目 伸缩项目 1」。
<‘flex-shrink
此 <number> 部件可以用来设置「flex-shrink长写 并指定收缩比率 ，也就是剩余空间是负值的时候此伸缩项目 伸缩项目 1」。在收缩的时候收缩比率 伸缩基准值 <‘flex-basis
与「width」属性使用相同的值的此部件可以用来设置「flex-basis长写 并指定伸缩基准值 ，也就是根据可伸缩比率计算出剩余空间的分布之前，伸缩项目 主轴长度 flexflex-basis
若「flex-basisauto伸缩基准值 主轴长度属性 auto」，代表元素的长度取决于其内容。）
一个显示「绝对」伸缩（以零为基准值开始）与「相对」伸缩（以项目的内容大小为基准值开始）差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2」。
「none」
关键字「none0 0 auto」。
「flex「flex: 0 1 auto」 。
用户代理必须将一个前面没有两个伸缩比例的无单位零解读成一个伸缩比例。为避免用户代理错误解读或是写出不合法的宣告，网页作者必须为是零的 <flex-basis> 部件指定一个单位或是在前面摆两个伸缩比例。
7.2. 「flex本章节不具备规范意义。
下表总结了「flex
「flex: 0 auto」
「flex: initial」
与「flex: 0 1 auto」相同。（这也就是初始值。）根据「width」／「height」属性决定元素的尺寸。（如果项目的主轴长度属性 auto」，则会根据其内容来决定元素尺寸。）当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小 值。网页作者可以用对齐相关的属性 以及「margin」属性的「auto」值 控制伸缩项目沿着主轴 「flex: auto」
与「flex: 1 1 auto」相同。根据「width」／「height」属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴 flex: auto」、「flex: initial」或「flex: none」，则在项目尺寸决定后，剩余的正空间会被平分给是「flex: auto」的项目。
「flex: none」
与「flex: 0 0 auto」相同。根据「width」／「height」属性决定元素的尺寸，但是完全不可伸缩。其效果与「initial 「flex: <positive-number>」
与「flex: 1 0px 」相同。该值使元素可伸缩，并将伸缩基准值
默认状态下，伸缩项目不会收缩至比其最小内容尺寸（最长的英文词或是固定尺寸元素的长度）更小。网页作者可以靠设置「min-width」或「min-height」属性来改变这个默认状态。（参见《伸缩项目的默认最小长度》 。）
7.3. 可伸缩性的部件网页作者也可以用单独的长写属性控制可伸缩性的各个部件。
本规范鼓励网页作者使用「flexflex常见的情景
名称：
flex-grow
取值 ：
<number>
初始：
0
适用于：
伸缩项目
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
是，除了在「0」与其他值之间转变以外。
正规顺序
照文法
「flex-grow扩展比率
名称：
flex-shrink
取值 ：
<number>
初始：
1
适用于：
伸缩项目
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
是，除了在「0」与其他值之间转变以外。
正规顺序
照文法
「flex-shrink收缩比率
名称：
flex-basis
取值 ：
<'width'>
初始：
auto
适用于：
伸缩项目
继承：
否
计算值：
除了将长度边为绝对长度以外，同指定值。
百分比：
相对与伸缩容器的内-主轴长度
媒介：
视觉
动画：
是，只要「width」是可动画的。
正规顺序
照文法
「flex-basis伸缩基准值
除了会去截取主轴长度属性 auto」值以外，在横向书写模式中，「flex-basiswidth[CSS21] ：若「flex-basisbox-sizing」[CSS3UI] 等等的其他属性指定了别的行为，「flex-basis
8. 对齐在一个伸缩容器的内容完成伸缩，而所有伸缩项目的大小确定后，伸缩项目可以在可伸缩容器中进行对齐。
「margin」属性可以用来对齐这些项，这类似于在块布局的行为，但要更加强大。伸缩项目 盒对齐 标准中的对齐相关的属性，这些属性提供了基于关键字的对齐方式，在主轴 辅轴
虽然对齐相关的属性是在《盒对齐》规范中定义的，但是《可伸缩盒布局》为避免对《盒对齐》产生依赖从而减缓标准的进步速度，在这里重新定义了相关属性。在《盒对齐》完成并定义这些属性用于其他类型的布局模式时的效果前，本标准定义的这些属性将只用于伸缩布局
8.1. 用「auto」边界对齐 本章节不具规范意义。外边距对伸缩项目的影响的规范叙述在《可伸缩布局算法
在伸缩项目上，以「auto」为值的外边距，非常类似于普通流中的自动边距：
在计算伸缩基准值和伸缩长度时，自动边距相当于「0」。
在使用「justify-contentalign-self 在已要溢出的元素上，自动外边距没有作用，元素会往 “尾”／“脚” 边溢出。
需要注意的是，如果空间被自动外边距平均分配了，则对齐相关的属性在这一维度上没有作用，因为外边距偷走了伸缩后所有的可用空间。
一种比较常见的使用 「auto」作为「margin」属性的值的场景是，将可伸缩项分为多个独立的 “组”。以下示例展示了使用这一方案来实现一个常用的UI模式 ― 一个包含多个动作按钮的横条，其中一部分在左边，另一部分在右边。
下面是代码示例。
<style>
nav > ul {
display: flex;
}
nav > ul > #login {
margin-left: auto;
}
</style>
<nav>
<ul>
<li><a href=/about>登入</a>
<li><a href=/projects>项目</a>
<li><a href=/interact>交互</a>
<li id='login'><a href=/login>登入</a>
</ul>
</nav>
下图展示了在有溢出的情况下，使用「auto」值作为「margin」，以及使用对齐相关属性 控制跨轴的对齐时的差异。
左图中的元素使用边距进行居中，而右图的则使用「align-self
名称：
justify-content
取值 ：
flex-start | flex-end | center | space-between | space-around
初始：
flex-start
适用于：
伸缩容器
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
否
正规顺序
照文法
「justify-content主轴 伸缩项目 自动边距 伸缩项目
「flex-start」
伸缩项目 伸缩项目 主轴起点边 主轴起点 伸缩项目 「flex-end」
伸缩项目 伸缩项目 主轴终点边 主轴终点 伸缩项目 「center」
伸缩项目 伸缩项目 主轴起点 主轴终点 「space-between」
伸缩项目 伸缩项目 flex-start主轴起点边 主轴起点 主轴终点边 主轴终点 伸缩项目 「space-around」
伸缩项目 伸缩项目 center伸缩项目
名称：
align-items
取值 ：
flex-start | flex-end | center | baseline | stretch
初始：
stretch
适用于：
伸缩容器
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
否
正规顺序
照文法
名称：
align-self
取值 ：
auto | flex-start | flex-end | center | baseline | stretch
初始：
auto
适用于：
flex items
继承：
否
计算值：
如果值为「autoalign-items
媒介：
视觉
动画：
否
正规顺序
照文法
伸缩项目 侧轴 justify-contentalign-items伸缩项目 项目 align-self伸缩项目 align-selfalign-items
若伸缩项目 auto」，则「align-self
如果「align-self「auto」 ，则其计算值为元素的父元素的「align-itemsstretch
「flex-start」
伸缩项目 侧轴起点边 侧轴起始 「flex-end」
伸缩项目 侧轴终点边 侧轴终点 「center」
伸缩项目 侧轴 伸缩项目 伸缩项目 「baseline」
如果伸缩项目 侧轴 flex-start
其它情况下，该值将参与基线对齐 。所有参与该对齐方式的伸缩项目 伸缩项目 侧轴起点边 侧轴起点
「stretch」
如果侧轴长度属性 auto」，则此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目
伸缩项目在侧轴起点边 侧轴起点
名称：
align-content
取值 :
flex-start | flex-end | center | space-between | space-around |
stretch
初始：
stretch
适用于：
多行
继承：
否
计算值：
同指定值
媒介：
视觉
动画：
否
正规顺序
照文法
当伸缩容器的侧轴 align-contentjustify-content
「flex-start」
各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点 侧轴起点 「flex-end」
各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点 侧轴终点 「center」
各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边 侧轴终点边 「space-between」
各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「flex-start侧轴起点 侧轴起点边 侧轴终点 侧轴终点 「space-around」
各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「center 「stretch」
各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于「flex-start
注意：只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。
8.5. Flex Baselines一个伸缩容器的基线由以下步骤决定（顺序是经过「order
「block」
「list-item」
「table」
9. 伸缩布局演算法本章节涵盖了具有规范性的演算法，详述伸缩容器与其内容布局的准确行为。演算法以容易阅读的方式呈现，并不一定是最有效率的演算法。使用者代理可使用任何想用的演算法，但是产生结果必须与这里的演算法一致。
本章节的目标读者为实作者。除非某网页作者具有追根究柢的企图心，了解神秘的 CSS 布局的渴望，否则网页作者应该可以从各个单独的属性解释找到要查的东西。
在以下演算法中，明确尺寸 是指不需要靠测量内容决定的大小：例：<length> 、初始包含块的大小、一个靠明确尺寸决定的 <percentage> 。不明确尺寸 是指不明确
以下各小节描述了布局一个伸缩容器与其内容的演算法。
9.1. 起始设定
生成无名伸缩项目： 依《伸缩项目》
根据「order 有最小（负值最大）「orderorder
9.2. 决定一行长度
决定伸缩项目可用的主、侧空间。 对于主、侧两个方向，若伸缩容器的在那个方向具有明确尺寸 这个结果可能是无限大。
决定各项目的「伸缩基准长度」 与「假定主轴长度」 ：
项目的伸缩基准长度 假定主轴长度
决定伸缩容器的主轴长度： 使用其主轴长度属性 假定主轴长度 auto0」。
9.3. 决定主轴长度
搜集伸缩项目成伸缩行：
若伸缩容器为单行，则搜集所有弹性项目至单一个伸缩行。
否则，从第一个尚未搜集进来的项目开始，尽可能的搜集伸缩项目直到伸缩容器的内主轴长度不够或碰到强迫中断（不过至少搜集一个）进一个伸缩行。CSS2.1「page-break-before/after」[CSS21] 或 CSS3「break-before/after」[CSS3-BREAK] 属性设有分段中断时，使用者代理会将之视为强迫中断。
在本步骤中，伸缩项目的长度是外-假定主轴长度
重复直到收集了所有伸缩项目。
除非主轴长度为零的项目在伸缩容器的开头，这些项目不可能是一个行开头。尽管前一行的最后一个非零项目已经「填满」了前一行，「尽可能收集」会把主轴长度为零的项目搜集进前一行的尾端。
决定可伸缩长度
9.4. 决定侧轴长度
决定每个项目的假定侧轴长度 ： 将「auto」当作「fit-content」并使用主轴长度的使用值与可用空间进行布局以找到假定侧轴长度。
计算各伸缩行的侧轴长度。
若伸缩容器仅有单一行（尽管容器是多行
否则，对于各伸缩行：
搜集所有行内轴与主轴平行，且「align-selfbaselineauto」的所有项目。找出这些项目中基线与假定外-侧轴起点边的最大距离，找出项目基线与假定外-侧轴终点边的最大距离，并将两个值相加。
在所有没被前一个步骤搜集的项目中，找出最大的外-假定侧轴长度
伸缩行侧轴长度的使用值是前两步骤找到的值中较大的那一个。
处理「align-content: stretch」。 若伸缩容器具有明确 align-contentstretch
折叠「visibility: collapse」项目。 若有「visibility: collapse」的伸缩项目，记下项目所在的行的侧轴长度为项目的支撑长度 ，并从头开始重新布局。
在第二轮布局中，当进行搜集伸缩项目成伸缩行 display: none」），但是在计算各伸缩行的侧轴长度 支撑长度 支撑长度
在第二轮布局中跳过本步骤
决定各伸缩项目侧轴长度的使用值。 若伸缩项目设有「align-self: stretch」，且其侧轴长度属性是「auto」，且其侧轴边界都不是「auto」，则外-侧轴长度的的使用值是其伸缩行的侧轴长度截至最大、最小值（透过侧轴长度属性）的结果。否则，侧轴长度的使用值是项目的假定侧轴长度
9.5. 主轴对齐
分配剩下的空间。 分配剩下的空间。
若剩下的空间为正且在这行中至少有一个主轴边界是「auto」，将剩下的空间平均分配给这些边界。否则，将所有「auto」边界设为零。
按照「justify-content
9.6. 侧轴对齐
决定侧轴「auto」边界。
若某个伸缩项目有「auto」侧轴边界：
沿着侧轴对齐所有的伸缩项目： 若项目的两个侧轴边界都不为「auto」，按照「align-self
决定伸缩容器侧长度的使用值
若侧长度属性有明确
否则，使用各伸缩行的侧长度的总和。
对齐所有伸缩行： 按照「align-content
9.7. 决定可伸缩长度使用以下步骤决定伸缩行里项目的可伸缩长度：
决定使用哪个伸缩比例。 先求目标行里所有项目外-假定主轴长度 扩展比率 收缩比率
决定不可伸缩项目的大小。 对于任何伸缩比率为零的项目，设项目主轴长度的使用值为项目的假定主轴长度
确认可否配置空间。 若所有目标行里的伸缩项目都要不是被冻结要不是伸缩比率为零，则结束本演算法。
计算可配置空间。 先求目标行里所有项目外-伸缩基准长度
配置正比于伸缩比例的空间。 若可配置空间的正负号与选择伸缩比率的正负号相同，配置正比于项目伸缩比率的空间到可伸缩项目主轴长度里：
若可配置空间为正
找出项目扩展比率 扩展比率 伸缩基准长度 若可配置空间为负
对于每一个在目标行的项目，将收缩比率 伸缩基准长度 正规化收缩比率 。找出项目正规化收缩比率 正规化收缩比率 伸缩基准长度 请注意得到的内主轴长度可能是负的 ― 下一个步骤会校正这个问题。
修复最大、最小违规。 将项目的主轴长度截至其最大、最小值（透过主轴长度属性）。若项目的主轴长度变小，则这是最大违规。若项目的主轴长度变大，则这是最小违规。
总违规事前一个步骤所有调整的总和（截至其最大、最小后的长度 - 未截至其最大、最小后长度）。若总违规为：
零
离开演算法
正
冻结所有最小违规，重设所以其它项目到进入本演算法的大小，并回到本演算法的步骤 2。
负
冻结所有最大违规，重设所以其它项目到进入本演算法的大小，并回到本演算法的步骤 2。
11.1. Document conventions
11.3. Partial implementations11.4. Experimental
implementations11.5. Non-experimental
implementations11.6. CR exit criteria
Acknowledgments
Thanks for feedback and contributions to Erik Anderson, Tony Chang, Phil
Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston,
Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper,
Kang-Hao Lu, Markus Mielke, Robert O'Callahan, Christoph Päper, Ning
Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai,
Eugene Veselov, Boris Zbarsky.
References
Normative references
[CSS21]
Bert Bos; et al. Cascading Style
Sheets Level 2 Revision 1 (CSS 2.1) Specification. http://www.w3.org/TR/2011/REC-CSS2-20110607
[CSS3-BREAK]
Rossen Atanassov; Elika J. Etemad. CSS
Fragmentation Module Level 3. http://www.w3.org/TR/2012/WD-css3-break-20120823/
[CSS3-WRITING-MODES]
Elika J. Etemad; Koji Ishii. CSS
Writing Modes Module Level 3. http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/
[RFC2119]
S. Bradner. Key
words for use in RFCs to Indicate Requirement Levels. http://www.ietf.org/rfc/rfc2119.txt
[CSS3UI]
Tantek Çelik. CSS Basic
User Interface Module Level 3 (CSS3 UI). http://www.w3.org/TR/2012/WD-css3-ui-20120117/
[CSS3VAL]
Håkon Wium Lie; Tab Atkins; Elika J. Etemad. CSS
Values and Units Module Level 3. http://www.w3.org/TR/2012/CR-css3-values-20120828/
[HTML40]
Ian Jacobs; David Raggett; Arnaud Le Hors. HTML 4.0
Specification. http://www.w3.org/TR/1998/REC-html40-19980424
Changes
The following significant changes were made since the 21 September
2012 Candidate Recommendation :
Absolutely positioned children of a flex container are no longer
called "flex items" (to avoid terminology confusion).
A Disposition of
Last Call Comments is available.
Property index
Property
Values
Initial
Applies to
Inh.
Percentages
Media
align-content
flex-start | flex-end | center | space-between | space-around |
stretch
stretch
multi-line flex containers
否
视觉
align-items
flex-start | flex-end | center | baseline | stretch
stretch
伸缩容器
否
视觉
align-self
auto | flex-start | flex-end | center | baseline | stretch
auto
flex items
否
视觉
display
flex-basis
<'width'>
auto
flex items
否
relative to the flex container's inner main size
视觉
flex-direction
row | row-reverse | column | column-reverse
row
伸缩容器
否
视觉
flex-flow
<‘flex-direction’> || <‘flex-wrap’>
参见各属性
伸缩容器
参见各属性
视觉
flex-grow
<number>
0
flex items
否
视觉
flex-shrink
<number>
1
flex items
否
视觉
flex
none | [ <'flex-grow'> <'flex-shrink'>? ||
<'flex-basis'> ]
参见各属性
flex items
参见各属性
视觉
flex-wrap
nowrap | wrap | wrap-reverse
nowrap
伸缩容器
否
视觉
justify-content
flex-start | flex-end | center | space-between | space-around
flex-start
伸缩容器
否
视觉
min-width , min-height
order
<integer>
0
flex items and absolutely-positioned flex container children
否
视觉
Index
align-content, 8.4. align-items, 8.3. align-self, 8.3. align-self: auto, 8.3. authoring tool, 11.2. ‘baseline8.3. ‘center8.3. 8.4. 8.2. collapsed, 4.4. collapsed flex item, 4.4. ‘column5.1. ‘column-reverse5.1. cross axis, 2. cross-axis baseline, 8.5. cross dimension, 2. cross-end, 2. cross size, 2. cross size property, 2. cross-start, 2. definite, 9. definite size, 9. flex, 7.1. 3. ‘flex3. flex base size, 9.2. flex basis, 7.1. flex-basis, 7.3.3. flex-basis: auto, 7.3.3. flex container, 3. flex-direction, 5.1. ‘flex-end8.4. 8.3. 8.2. flex-flow, 5.3. flex formatting context, 3. flex-grow, 7.3.1. flex grow factor, 7.1. flexible length, 7.1. flexible length's, 7.1. flex item, 4. flex layout, 1. flex-shrink, 7.3.2. flex shrink factor, 7.1. ‘flex-start8.4. 8.3. 8.2. flex-wrap, 5.2. hypothetical cross size, 9.4. hypothetical main size, 9.2. indefinite, 9. indefinite size, 9. ‘inline-flex3. inline-flex, 3. justify-content, 8.2. main axis, 2. main-axis baseline, 8.5. main dimension, 2. main-end, 2. main size, 2. main size property, 2. main-start, 2. min-width/height:auto, 4.5. multi-line, 6. ‘none7.1. ‘nowrap5.2. order, 5.4. participates in baseline alignment, 8.3. renderer, 11.2. ‘row5.1. ‘row-reverse5.1. scaled flex shrink factor, 9.7. single-line, 6. ‘space-around8.4. 8.2. ‘space-between8.4. 8.2. static position, 4.1. ‘stretch8.4. 8.3. strut size, 9.4. style sheet
as conformance class, 11.2.
‘wrap5.2. ‘wrap-reverse5.2.
