Css3-flexbox/zh-hans

介绍

本章节不具有规范叙述

CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：

• 块布局 ― 为了呈现文档而设计出来的布局模式
• 行内布局 ― 为了呈现文本而设计出来的布局模式
• 表格布局 ― 为了用格子呈现 2D 数据而设计出来的布局模式
• 定位布局 ― 为了非常直接地定位元素而设计出来的布局模式，定位元素基本与其他元素毫无关系

本模块引入了新的布局模式：伸缩布局，是为了呈现复杂的应用与页面而设计出来的。

概述

本章节不具有规范叙述

伸缩布局只与块布局有非常微薄的相似之处。伸缩布局不具有浮动或是多栏等等在块布局中可以用的复杂、面向文本／文档的属性，换来的是简单、强大的分配空间与对齐内容的工具，是 Web 应用与复杂的页面所需要的。一个伸缩容器的内容：

• 可以以任何伸缩方向（向左、向右、向下，甚至是向上！）配置
• 可以在样式层（也就是视觉顺序可以跟源码、语音顺序无关）调换、重排显示顺序
• 可以沿着单一（主）轴线性配置或是沿着第二（侧）轴折行
• 可以因为可用空间的存在扩展内容的尺寸
• 可以沿着容器或彼此对齐
• 可以在保持侧轴长度不变之下动态折叠或反折叠

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

模块关系

本模块扩展了「diplay」属性 [CSS21]，加了新的块级、行内级的显示形态，并定义了一种新的格式化上下文与控制其布局的属性。本模块也定义了「min-width」与「min-height」的新的初始值。本模块定义的所有属性皆不适用于「::first-line」与「::first-letter」伪元素。

取值

本规范遵守 [CSS21] 的 CSS 属性定义常规。不在本规范定义的取值型态由层级样式表等级 2 更新版本 1 定义 [CSS21]，其他 CSS 模组可扩充这些取值型态 ― 举例来说，同时使用 [CSS3VAL] 与本模组会扩充本规范使用的 <length> 取值型态的定义。

本规范定义的所有属性，除了在取值栏位列出的特定属性可使用的取值以外，还接受「inherit」关键字作为属性值。为了规范的可读性不重复将该值列进取值栏位。

伸缩布局盒模型和术语

一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。

与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。为了让描述伸缩布局变得更容易，本章节定义一系列相对于伸缩流的术语。「flex-flow」的值决定了这些术语如何对应到物理方向（上／右／下／左）、物理轴（垂直／水平）、物理大小（宽度／高度）。

图 2. 一个「row」伸缩容器中各种方向与大小术语的示意图。

主轴、主轴方向

主轴起点、主轴终点

主轴长度、主轴长度属性

侧轴、侧轴方向

侧轴起点、侧轴终点

侧轴长度、侧轴长度属性

伸缩容器 ―「display」的值「flex」与「inline-flex」

「flex」

「inline-flex」

伸缩容器会为其内容建立新的伸缩格式化上下文(flex formatting context)。除了使用伸缩排版而不块排版以外，伸缩格式化上下文与块级格式化上下文(block formatting context)根元素相同 ― 浮动不会闯入伸缩容器，且伸缩容器的边界不与其内容的边界叠加。

伸缩容器不是块容器，因此有些设计用来控制块布局的属性，在伸缩布局中不适用。特别是：

• 多栏(column)模块的所有「column-*」属性在伸缩容器上没有作用。
• 「float」与「clear」在伸缩项目上没有作用。(However, the ‘float’ property still affects the computed value of ‘display’ on children of a flex container, as this occurs before flex items are determined.)
• 「vertical-align」在伸缩项目上没有作用。

若元素「display」的指定值是「inline-flex」且元素是一个浮动或绝对定位元素，则「display」的计算值是「flex」。也就是 CSS 2.1 章节 9.7 的表格增修「指定值」是「inline-flex」、「计算值」是「flex」的一行。

伸缩项目

伸缩项目为其内容建立一个新的伸缩格式化上下文，这个格式化上下文的种类由项目「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>

绝对定位的伸缩子元素

1. 若伸缩容器里没有伸缩项目，则静态位置由伸缩容器上的「justify-content」的值来决定，位置为假设一个大小为零的伸缩项目在此伸缩容器里的时候的位置。
2. 否则，若绝对定位子元素的前一个伸缩项目不存在或者前一个伸缩项目与后一个伸缩项目在同一行，则静态位置是后一个伸缩项目在主轴起点边的外边。
3. 否则，静态位置是前一个伸缩项目在主轴终点边的外边。

对于侧轴方向：

1. 若绝对定位子元素的前一个伸缩项目存在，则静态位置是该项目所在伸缩行的侧轴起点边。
2. 否则，静态位置是第一行伸缩行
   Error creating thumbnail: Unable to save thumbnail to destination
   的侧轴起点边。

伸缩项目的外边界

相邻伸缩项目的边界不会叠加。「auto」边界吸收在该方向多余的空间，因此可以用来对齐或是将相邻的伸缩项目隔开 ― 参见《用「auto」边界对齐》。

伸缩项目的绘制

对于一个伸缩项目，就算「position」是「static」，不是「auto」的「z-index」值也会创建一个堆叠上下文。除此之外，伸缩项目的绘制与常规流中的块级元素无异。

流外项目

伸缩容器的绝对定位子元素不是伸缩项目，但是这些子元素在原本盒子树的常规位置留下了「占位符」。这些占位符是宽、高、行高皆为「0」的匿名行内盒，且占位符会成为伸缩项目。

伸缩容器绝对定位子元素的静止位置（当「top」/「right」/「bottom」/「left」属性为「auto」时的位置）是对应的占位符在用户代理进行伸缩布局之后的最后位置。

叠加项目

在伸缩项目上设定「visibility: collapse」会让项目变成叠加伸缩项目，效果与表格栏或是表格列上的「visibility: collapse」类似 ― 用户代理不会渲染叠加元素，但是项目会留下一个「支撑」使得伸缩行的侧轴长度维持稳定。因此，若伸缩容器只有一行伸缩行，动态叠加项目或取消叠加不会对伸缩容器的侧轴长度造成影响，也不会造成其他页面布局「摇晃」。但是，在叠加项目之后用户代理「会」重做伸缩行断行，所以具有多个伸缩行的伸缩容器的侧轴长度可能会变。

虽然用户代理不渲染叠加伸缩项目，这些项目还是会出现在格式化结构中，因此与「display: none」项目不同 [CSS21]，只靠元素出现在格式化结构就有的效果（如递增计数器或是运行动画、转场）在叠加项目上仍然有效。

为了计算「支撑」的尺寸，用户代理先假设项目未叠加并进行伸缩布局，然后将叠加项目用具有原来项目所在的伸缩行的侧轴长度的「支撑」替换并重新进行伸缩布局。《伸缩布局算法》有「visibility: collapse」如何与伸缩布局互动的规范性叙述。

伸缩项目的默认最小长度

为了让伸缩项目有合理的最小长度，本规范为 CSS 2.1 定义的「min-width」与「min-height」属性增加一个新的「auto」值作为这些属性的初始值。[CSS21]

「auto」

 <div style="min-width: auto; width: 0">内容</div> <!-- 此时min-width计算值为「0」-->

 <div style="display: flex;"><div style="min-width: auto; width: 0">内容</div></div> <!-- 此时min-width的计算值就是内容的最小宽度。-->
 

排序与方向

伸缩容器的内容可以用任何方向与任何顺序进行布局，这让网页作者轻松地达到之前需要复杂、不牢靠的「float」与「clear」属性才可以实现的效果。这个功能透过「flex-direction」、「flex-wrap」与「order」属性呈现。

网页作者不应该使用这些技术替代正确的文档排序，因为这会破坏文档的无障碍性。

伸缩流的方向 ―「flex-direction」属性

「flex-direction」属性可以用来设定伸缩容器的主轴的方向，这也决定了用户代理配置伸缩项目的方向。

「row」

「row-reverse」

「column」

「column-reverse」

伸缩行换行 ―「flex-wrap」属性

「flex-wrap」属性控制伸缩容器是单行还是多行，也决定了侧轴方向 ― 新的一行的堆放方向。

「nowrap」

「wrap」

「wrap-reverse」

伸缩方向与换行 ―「flex-flow」缩写

「flex-flow」属性是同时设定「flex-direction」与「flex-wrap」属性的缩写，两个属性决定了伸缩容器的主轴与侧轴。

div { flex-flow: row; }
/* 初始值。主轴是行内方向，
   没有换行。 */

div { flex-flow: column wrap; }
/* 主轴是块的方向，换行往行
   内方向。在英文页面里，主
   轴是上往下，往右换行。 */

div { flex-flow: row-reverse wrap-reverse; }
/* 主轴与行内方向相反（右到左）。
   新行换行向上。 */

显示顺序 ―「order」属性

默认状态下，用户代理会用伸缩项目出现在源文档的次序配置这些伸缩项目。「order」属性可以用来改变这个顺序。

「order」属性透过将元素分到有序号的组以控制元素出现的顺序。在伸缩布局中，「order」属性控制伸缩项目在伸缩容器里的顺序。

伸缩容器会从序号最小的组开始布局，在同一个组里的项目依在源文档里的次序布局，这也影响了着画次序 [CSS21]，正如同在文件中元素已经改变次序一般。

「order」属性必不可影响非视觉媒介（像是语音）里的次序。这让网页作者可以用具有逻辑次序的内容满足线性呈现内容的非视觉媒介与非 CSS 用户代理，同时用「order」重新排列内容的视觉顺序。

除非有别的规范说明，本属性在不是伸缩项目的元素上没有效果。

范例四

下图显示了一个使用中的模板总是在最前面的简单卷标接口：

这可以由以下 CSS 实作（仅显示部份相关程序代码）：

.tabs {
   display: flex;
}
.tabs > .current {
   order: -1; /* 比预设值 0 要小 */
}

<!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer>

#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;
   }
}

伸缩行

伸缩容器可以是单行的，也可以是多行的，这由「flex-wrap」属性决定：

• 单行的伸缩容器会将其所有子元素在单独的一行上进行布局，即便这可能导致内容溢出。
• 多行的伸缩窗口会将其伸缩项目配置在多个伸缩行上，这类似于文本的排列：当文本过宽导致一行无法容纳时，内容会断开并移至新的一行。当用户代理创建新的伸缩行时，这些伸缩行会根据「flex-wrap」属性沿着侧轴进行堆叠。除非伸缩容器本身是空的，每一个伸缩行至少包含一个伸缩项目。

<style>
#flexbox {
    display: flex;
    flex-flow: row wrap;
    width: 300px;
}
.item {
    width: 80px;
}
</style>

<div id="flexbox">
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
</div>

用户代理将内容分布到不同的行之后，每一行单独进行布局：可伸缩长度的计算以及「justify-content」、「align-self」的效果计算每次仅考虑单独一个伸缩行上的项目。

当一个伸缩容器有多个伸缩行时，每一行的侧轴长度为可容纳该行中的所有伸缩项目（依据「align-self」属性进行对齐之后）的最小值，这些伸缩行依据「align-content」属性在伸缩容器中进行对齐。当伸缩容器（单行或多行）只有单独一行伸缩行时，这一行的侧轴长度为伸缩容器的侧轴长度，在这种情形下「align-content」属性没有效果。一行的主轴长度始终和伸缩容器内容盒的主轴长度相同。

伸缩性

伸缩布局决定性的特性是让伸缩项目「可伸缩」，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以「flex」属性完成。一个伸缩容器会等比地按照各伸缩项目的扩展比率分配剩余空间，也会按照收缩比率缩小各项目以避免溢出。

「flex」缩写

「flex」属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率，以及伸缩基准值。当一个元素是伸缩项目时，「flex」属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则「flex」属性没有效果。

<'flex-grow'>

<'flex-shrink'>

<'flex-basis'>

图 6. 一个显示「绝对」伸缩（以零为基准值开始）与「相对」伸缩（以项目的内容大小为基准值开始）差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2」。

「none」

「flex」的各部件的初始值等同于「flex: 0 1 auto」。

用户代理必须将一个前面没有两个伸缩比例的无单位零解读成一个伸缩比例。为避免用户代理错误解读或是写出不合法的宣告，网页作者必须为是零的 <flex-basis> 部件指定一个单位或是在前面摆两个伸缩比例。

「flex」的常见值

本章节不具备规范意义。

下表总结了「flex」属性常见值的效果：

「flex: 0 auto」 「flex: initial」

「flex: auto」

「flex: none」

「flex: <positive-number>」

默认状态下，伸缩项目不会收缩至比其最小内容尺寸（最长的英文词或是固定尺寸元素的长度）更小。网页作者可以靠设置「min-width」或「min-height」属性来改变这个默认状态。（参见《伸缩项目的默认最小长度》。）

可伸缩性的部件

网页作者也可以用单独的长写属性控制可伸缩性的各个部件。

「flex-grow」属性

「flex-grow」属性可以用来设置扩展比率。负值不合法。

「flex-shrink」属性

「flex-shrink」属性可以用来设置收缩比率。负值不合法。

「flex-basis」属性

「flex-basis」属性可以用来设置伸缩基准值。负长度不合法。

除了会去截取主轴长度属性的「auto」值以外，在横向书写模式中，「flex-basis」的值的解出方法与「width」相同 [CSS21]：若「flex-basis」的值是一个百分比，则此百分比由伸缩项目的包含快（也就是伸缩容器）解出，且若该包含块的尺寸不明确，则解出结果未定义。同样的，除非「box-sizing」[CSS3UI] 等等的其他属性指定了别的行为，「flex-basis」决定内容盒的尺寸。

对齐

在一个伸缩容器的内容完成伸缩，而所有伸缩项目的大小确定后，伸缩项目可以在可伸缩容器中进行对齐。

「margin」属性可以用来对齐这些项，这类似于在块布局的行为，但要更加强大。伸缩项目同时也识别盒对齐标准中的对齐相关的属性，这些属性提供了基于关键字的对齐方式，在主轴和辅轴上均可使用。这些属性让一些如包括水平、垂直居中等等在 CSS 2.1 中很难实现的布局成为小菜一碟。

用「auto」外边距对齐

本章节不具规范意义。外边距对伸缩项目的影响的规范叙述在《可伸缩布局算法》一章。

在伸缩项目上，以「auto」为值的外边距，非常类似于普通流中的自动外边距：

• 在计算伸缩基准值和伸缩长度时，自动外边距相当于「0」。
• 在使用「justify-content」和「align-self」控制对齐前，所有正值的空间会在对应维度上被自动外边距平均分配。
• 在已要溢出的元素上，自动外边距没有作用，元素会往 “尾”／“脚” 边溢出。

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

主轴对齐 ―「justify-content」属性

「justify-content」属性用于在主轴上对齐伸缩项目。这一行为会在所有可伸缩长度及所有自动边距均被解释后进行。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

flex-start

flex-end

center

space-between

space-around

图9 通过伸缩容器中的三个不同颜色的项目，展示五种「justify-content」关键字的效果。

侧轴对齐 ―「align-items」与「align-self」属性

伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于「justify-content」属性，但是是另一个方向。「align-items」可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。「align-self」则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，「align-self」的值永远与其关联的伸缩容器的「align-items」的值相同。）

若伸缩项目的任一个侧轴上的外边距为「auto」，则「align-self」没有效果。

如果「align-self」的值为「auto」，则其计算值为元素的父元素的「align-items」值，如果该元素没有父元素，则计算值为「stretch」。对齐属性值的定义如下：

「flex-start」

「flex-end」

「center」

「baseline」

「stretch」

图10 通过伸缩容器中的四个不同颜色的项目，展示五种「align-items」关键字效果

堆栈伸缩行 ―「align-content」属性

当伸缩容器的侧轴还有多余空间时，「align-content」属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的「justify-content」属性类似。请注意本属性在只有一行的伸缩容器上没有效果。各属性值的意义如下：

「flex-start」

「flex-end」

「center」

「space-between」

「space-around」

「stretch」

图11 展示「align-content」各关键字对多行的伸缩容器的效果。

伸缩容器的基线

一个伸缩容器的基线由以下步骤决定：

• 若任一个在伸缩容器第一行（经过「order」重新排序之后） 的伸缩项目「align-self」的计算值是「baseline」，则伸缩容器的基线是那些伸缩项目的基线。
• 否则，若伸缩容器有一个以上的伸缩项目，且第一个伸缩项目（经过「order」 重新排序之后）的基线与伸缩容器的主轴平行，则伸缩容器的基线是其第一个伸缩项目的基线。
• 否则，伸缩容器的基线是其内容盒的「后」端。

伸缩布局算法

本章节涵盖了具有规范性的算法，详述伸缩容器与其内容布局的准确行为。算法以容易阅读的方式呈现，并不一定是最有效率的算法。用户代理可使用任何想用的算法，但是产生结果必须与这里的算法一致。

在以下算法中，明确尺寸是指不需要靠测量内容决定的大小：例：<length>、初始包含块的大小、一个靠明确尺寸决定的 <percentage>。不明确尺寸是指不明确的大小。

以下各小节描述了布局一个伸缩容器与其内容的算法。

起始设定

0. 生成匿名伸缩项目：依《伸缩项目》小节的描述。
1. 根据「order」重新排序伸缩项目。有最小（负值最大）「order」的伸缩项目排在第一个。若有多个项目有相同的「order」值，这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序，也影响了后面的算法如何处理各项目。

决定一行长度

2. 决定伸缩项目可用的主、侧轴空间。对于主、侧两个方向，若伸缩容器的在那个方向具有明确尺寸，使用该长度。否则，从该方向中伸缩容器的可用空间中减去边界、边框与边距并使用该值。这个结果可能是无限大。

3. 决定各项目的「伸缩基准长度」与「假定主轴长度」：

   • 若项目具有明确伸缩基准值，该值为伸缩基准长度。
   • 否则，若伸缩容器的主轴与项目的行内轴平行，使用可用空间与项目的伸缩基准值，除非项目的书写模式与伸缩容器的书写模式垂直（在这种情况下使用垂直流中的盒的规则 [CSS3-WRITING-MODES]），将伸缩基准值的「auto」视为是「max-content」。若伸缩基准直是「fill-available」或「fit-content」，且伸缩容器的主轴长度以「min-content」或「max-content」限制决定大小，则也使用该限制决定项目的长度。伸缩基准长度为项目的 measure。
   • 否则，使用可用空间与项目的伸缩基准值（若项目不可伸缩）或「auto」，除非项目的书写模式与伸缩容器的书写模式垂直（在这种情况下使用垂直流中的盒的规则 [CSS3-WRITING-MODES]），将伸缩基准值的「auto」视为是「max-content」。若伸缩基准直是「auto」、「fill-available」或「fit-content」，且伸缩容器的侧轴长度以「min-content」或「max-content」限制决定大小，则也使用该限制决定项目的长度。伸缩基准长度为项目的 max-content extent。
   • 项目的伸缩基准长度截至其最大、最小值（透过主轴长度属性）即为假定主轴长度。
4. 决定伸缩容器的主轴长度：使用其主轴长度属性。在本计算中，伸缩容器的最小内容主轴长度是所有伸缩容器里伸缩项目的「最小内容长度贡献」的最大值，伸缩容器的最大内容主轴长度是所有伸缩容器里伸缩项目的「最大内容长度贡献」的和。一个项目的「最小／最大内容长度贡献」是当项目以「min-content」或「max-content」限制决定大小时，项目的外-假定主轴长度。在这个计算中，用户代理会将「auto」边界视为「0」。

决定主轴长度

5. 搜集伸缩项目成伸缩行：
   • 若伸缩容器为单行，则搜集所有弹性项目至单个伸缩行。
   • 否则，从第一个未搜集进来的项目开始，搜集尽可能多的连续伸缩项目直到伸缩容器的内主轴长度不够或遇见强制中断（不过至少搜集一个）进一个伸缩行。CSS2.1「page-break-before/after」[CSS21] 或 CSS3「break-before/after」[CSS3-BREAK] 属性设有分段中断时，用户代理会强制断点的发生。

   在本步骤中，伸缩项目的长度是外-假定主轴长度。

   重复直到收集了所有伸缩项目。

   注：除非主轴长度为零的项目在伸缩容器的开头，这些项目不可能是一个行开头。尽管前一行的最后一个非零项目已经「填满」了前一行，「尽可能收集」会把主轴长度为零的项目搜集进前一行的尾端。
6. 决定可伸缩长度：决定所有伸缩项目的可伸缩长度以找到项目主轴长度的使用值，并由伸缩项目的主轴长度决定其「假定侧轴长度」。

决定侧轴长度

7. 计算各伸缩行的侧轴长度。

   若伸缩容器仅有单一行（尽管容器是多行伸缩容器），则伸缩行的侧轴长度是伸缩容器的内-侧轴长度。

   否则，对于各伸缩行：

   1. 搜集所有行内轴与主轴平行，且「align-self」是「baseline」，且侧轴的边界都不为「auto」。找出项目基线与假定外-侧轴起点边的最大距离，找出项目基线与假定外-侧轴终点边的最大距离，并将两个值相加。
   2. 在所有没被前一个步骤搜集的项目中，找出最大的外-假定侧轴长度。
   3. 伸缩行侧轴长度的使用值事前两步骤找到的值中较大的那一个。
8. 处理「align-content: stretch」。若伸缩容器具有明确的侧轴长度，且「align-content」，且伸缩行侧轴长度的总和小于伸缩容器的内-侧轴长度，则给各伸缩行增加相同的侧轴长度，使得侧轴长度的总和刚好与伸缩容器的内-侧轴长度相等。

9. 叠加「visibility: collapse」项目。若有「visibility: collapse」的伸缩项目，记下项目所在的行的侧轴长度为项目的支撑长度，并从头开始重新布局。

   在第二轮布局中，当进行搜集伸缩项目成伸缩行步骤的时候，将已叠加项目的主轴长度当作是零。在该步骤之后的剩下的算法步骤里，完全忽略已叠加的项目（将这些视为「display: none」），但是在计算各伸缩行的侧轴长度的步骤之后，若有任何一行的侧轴长度小于在该行所有已叠加的项目里最大的支撑长度，将该行的侧轴长度设为该支撑长度。

   在第二轮布局中跳过本步骤

10. 决定各伸缩项目侧轴长度的使用值。若伸缩项目设有「align-self: stretch」，且其侧轴长度属性是「auto」，且其侧轴边界都不是「auto」，则外-侧轴长度的的使用值是其伸缩行的侧轴长度截至最大、最小值（透过侧轴长度属性）的结果。否则，侧轴长度的使用值是项目的假定侧轴长度。

主轴对齐

11. 分配剩下的空间。对于各伸缩行：

    1. 若剩下的空间为正且在这行中至少有一个主轴边界是「auto」，将剩下的空间平均分配给这些边界。否则，将所有「auto」边界设为零。
    2. 按照「justify-content」进行沿着主轴的项目对齐。

侧轴对齐

12. 决定侧轴「auto」边界。若某个伸缩项目有「auto」侧轴边界，且其（将「auto」边界视为零）外-侧轴长度小于其伸缩行的侧轴长度，将长度的差异平均分配给「auto」边界。
13. 沿着侧轴对齐所有的伸缩项目：若项目的两个侧轴边界都不为「auto」，按照「align-self」对齐该伸缩项目。

14. 决定伸缩容器侧轴长度的使用值：

    • 若侧轴长度属性有明确大小，使用该值。
    • 否则，使用各伸缩行的侧轴长度的总和。
15. 对齐所有伸缩行：按照「align-content」对齐所有伸缩行。

决定可伸缩长度

使用以下步骤决定伸缩行里项目的可伸缩长度：

1. 决定使用哪个伸缩比例。先求目标行里所有项目外-假定主轴长度的总和。若总和小于伸缩容器的内主轴长度，则在本算法之后的部份使用扩展比率。否则，使用收缩比率。
2. 决定不可伸缩项目的大小。对于任何伸缩比率为零的项目，设项目主轴长度的使用值为项目的假定主轴长度。
3. 确认可否配置空间。若所有目标行里的伸缩项目都要不是被冻结要不是伸缩比率为零，则结束本算法。
4. 计算可配置空间。先求目标行里所有项目外-伸缩基准长度的总和，将伸缩容器的内主轴长度剪掉总和，即为可配置空间。

5. 配置正比于伸缩比例的空间。若可配置空间的正负号与选择伸缩比率的正负号相同，配置正比于项目伸缩比率的空间到可伸缩项目主轴长度里：

   若可配置空间为正

   找出项目扩展比率与目标行里项目的扩展比率总和的比率。将项目的主轴长度设为伸缩基准长度加可配置空间里占有的部份（使用前面算出的比率）。

   若可配置空间为负

   对于每一个在目标行的项目，将收缩比率乘上外-伸缩基准长度，将这个值记为正规化收缩比率。找出项目正规化收缩比率与目标行里项目的正规化收缩比率总和的比率。将项目的主轴长度设为伸缩基准长度减可配置空间里占有的部份（使用前面算出的比率）。请注意得到的内主轴长度可能是负的 ― 下一个步骤会校正这个问题

6. 修复最大、最小违规。将项目的主轴长度截至其最大、最小值（透过主轴长度属性）。若项目的主轴长度变小，则这是最大违规。若项目的主轴长度变大，则这是最小违规。

7. 总违规事前一个步骤所有调整的总和（截至其最大、最小后的长度 - 未截至其最大、最小后长度）。若总违规为：

   零

   离开算法

   正

   冻结所有最小违规，重设所以其它项目到进入本算法的大小，并回到本算法的步骤 2。

   负

   冻结所有最大违规，重设所以其它项目到进入本算法的大小，并回到本算法的步骤 2。

伸缩容器中的分页

一致性

属性列表

致谢

（排名不分先后）

• 翻译：kennyluck,GZhang，Winter，一丝
• 校对：一丝
• 感谢：「Web标准翻译与贡献」群成员的贡献，特别是：JUSTICE，米粽