1. 介绍

本节非规范性内容。

CSS 2.1 定义了四种布局模式——根据盒子与其兄弟和祖先盒子的关系确定盒子的尺寸和位置的算法：

• 块布局，适用于文档布局

• 内联布局，适用于文本布局

• 表格布局，适用于以表格格式布局二维数据

• 定位布局，适用于不考虑文档中其他元素而非常明确地定位元素

本模块引入了一种新的布局模式，弹性布局，用于更加复杂的应用和网页布局。

1.1. 概述

本节非规范性内容。

弹性布局在表面上与块布局类似。 它缺少许多块布局中用于文本或文档的复杂属性，比如 浮动 和 多栏。 但弹性布局获得了简单且强大的工具， 可用于分配空间和对齐内容，这也正是 Web 应用和复杂网页常常需要的。 一个弹性容器的内容：

• 可以按照任意 流向（向左、向右、向下，甚至向上！）进行布局

• 可以在样式层将显示顺序反转或“order|重新排列” （即视觉顺序可以和源码及语音顺序独立）

• 可以沿着单一（主）轴线性布局，或沿着次（交叉）轴换行为多行

• 可以“弹性”调整尺寸以适应可用空间

• 可以在次（交叉）轴上与容器或其他项目对齐

• 可以在主轴上动态折叠或展开， 同时保持容器的交叉尺寸

下面是一个目录示例，每个商品有标题、图片、描述和购买按钮。 设计师希望每一项整体尺寸一致，图片在文本上方， 并且无论描述长度如何，购买按钮都要底部对齐。 弹性布局让这些设计需求变得简单：

• 目录使用弹性布局横向排列商品行，并确保行内项目高度一致。 每个商品本身又是一个纵向弹性容器，垂直排列其内容。

• 在每个商品内，源文档内容顺序是标题、描述和图片。 这样有利于语音呈现和无 CSS 浏览器下的顺序。 为了更吸引人的视觉效果，使用 order 把图片从内容后面提升到顶部， 并用 align-self 实现水平居中。

• 在购买按钮上方加一个auto 外边距， 可以把按钮推到底部，无论描述高度如何。

#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;     /* 自动顶边距将按钮推到底部 */
}

<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 艺术。

• 不含纸张和墨水。

立即购买

立即购买

1.2. 模块交互

本模块扩展了 display 属性 [CSS2]， 增加了新的块级和内联级 display 类型， 并定义了一种新的格式化上下文，以及用于控制其布局的属性。 本模块定义的属性均不适用于 ::first-line 和 ::first-letter 伪元素。

CSS 盒对齐模块扩展并替代了此处引入的对齐属性定义 (justify-content, align-items, align-self, align-content) 。

1.3. 值定义

本规范采用 CSS 属性定义约定 [CSS2]， 并使用 值定义语法 [CSS-VALUES-3]。 本规范未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。 与其他 CSS 模块结合时，这些值类型定义可能会扩展。

除了各自定义中列出的属性专用值外， 本规范定义的所有属性也接受 CSS 全局关键字 作为属性值。 为便于阅读未一一列出。

2. 弹性布局盒模型及术语

弹性容器是由 display 属性计算为 flex 或 inline-flex 的元素生成的盒。 弹性容器的普通流内子元素称为 弹性项目，并使用弹性布局模型进行布局。

与偏向于 块和内联流向 的块和内联布局不同， 弹性布局偏向于 弹性方向。 为便于讨论弹性布局， 本节定义了一组弹性流向相关术语。 flex-flow 的值和 书写模式决定了这些术语如何映射到物理方向（上/右/下/左）、轴线（垂直/水平）和尺寸（宽度/高度）。

主轴

主维度

主轴是弹性容器内弹性项目布局的主要轴线。 它沿着主维度延伸。

主起点

主终点

弹性项目在容器内从 主起点边开始，依次放置到 主终点边。

主尺寸

主尺寸属性

主尺寸指的是 弹性容器 或 弹性项目 的 宽度 或 高度， 取决于哪个位于 主轴方向。 它的 主尺寸属性 是其 width 或 height 属性， 取决于哪个位于 主轴方向。 同理，其 最小和 最大主尺寸属性 分别是 min-width/max-width 或 min-height/max-height 属性， 取决于哪个位于 主轴方向， 并决定其 最小/最大主尺寸。

在 弹性布局中， 主尺寸由 flex 属性控制， 而不是直接由 主尺寸属性控制。

注意：这意味着任何对弹性项目在 主轴方向上的已用尺寸（width、height、inline size、block size） 的引用都指其弹性伸缩后的 主尺寸。

交叉轴

交叉维度

与 主轴 垂直的轴称为 交叉轴， 沿着 交叉维度 延伸。

交叉起点

交叉终点

弹性行从 交叉起点边开始填充并放入容器， 依次到 交叉终点边。

交叉尺寸

交叉尺寸属性

交叉尺寸指 弹性容器或 弹性项目的 宽度 或 高度， 取决于其所在的 交叉维度。 其 交叉尺寸属性为 width 或 height 属性， 取决于 交叉维度。 同理，最小和最大交叉尺寸属性为 min-width/max-width 或 min-height/max-height 属性， 取决于 交叉维度， 决定其 最小/最大交叉尺寸。

本规范用到的其他尺寸术语，详见 CSS 内在与外在尺寸。[CSS-SIZING-3]

3. 弹性容器：flex 和 inline-flex display 属性值

flex

该值会使元素生成一个 弹性容器 盒， 当其处于 流式布局 时，该盒为 块级。

测试

• baseline-synthesis-001.html （在线测试） （源码）
• baseline-synthesis-002.html （在线测试） （源码）
• baseline-synthesis-003.html （在线测试） （源码）
• baseline-synthesis-004.html （在线测试） （源码）
• baseline-synthesis-vert-lr-line-under.html （在线测试） （源码）
• display-flex-001.htm （在线测试） （源码）
• dynamic-change-simplified-layout-002.html （在线测试） （源码）
• dynamic-change-simplified-layout.html （在线测试） （源码）
• fixedpos-video-in-abspos-quirk-crash.html （在线测试） （源码）
• flexbox_flex-0-0-0.html （在线测试） （源码）
• flexbox_flex-0-0-0-unitless.html （在线测试） （源码）
• flexbox_flex-0-0-1-unitless-basis.html （在线测试） （源码）
• flexbox_flex-0-0-auto.html （在线测试） （源码）
• flexbox_flex-0-0-auto-shrink.html （在线测试） （源码）
• flexbox_flex-0-0.html （在线测试） （源码）
• flexbox_flex-0-0-N.html （在线测试） （源码）
• flexbox_flex-0-0-Npercent.html （在线测试） （源码）
• flexbox_flex-0-0-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-0-0-N-shrink.html （在线测试） （源码）
• flexbox_flex-0-0-N-unitless-basis.html （在线测试） （源码）
• flexbox_flex-0-1-0.html （在线测试） （源码）
• flexbox_flex-0-1-0-unitless.html （在线测试） （源码）
• flexbox_flex-0-1-1-unitless-basis.html （在线测试） （源码）
• flexbox_flex-0-1-auto.html （在线测试） （源码）
• flexbox_flex-0-1-auto-shrink.html （在线测试） （源码）
• flexbox_flex-0-1.html （在线测试） （源码）
• flexbox_flex-0-1-N.html （在线测试） （源码）
• flexbox_flex-0-1-Npercent.html （在线测试） （源码）
• flexbox_flex-0-1-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-0-1-N-shrink.html （在线测试） （源码）
• flexbox_flex-0-1-N-unitless-basis.html （在线测试） （源码）
• flexbox_flex-0-auto.html （在线测试） （源码）
• flexbox_flex-0-N-0.html （在线测试） （源码）
• flexbox_flex-0-N-0-unitless.html （在线测试） （源码）
• flexbox_flex-0-N-auto.html （在线测试） （源码）
• flexbox_flex-0-N-auto-shrink.html （在线测试） （源码）
• flexbox_flex-0-N.html （在线测试） （源码）
• flexbox_flex-0-N-N.html （在线测试） （源码）
• flexbox_flex-0-N-Npercent.html （在线测试） （源码）
• flexbox_flex-0-N-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-0-N-N-shrink.html （在线测试） （源码）
• flexbox_flex-1-0-0.html （在线测试） （源码）
• flexbox_flex-1-0-0-unitless.html （在线测试） （源码）
• flexbox_flex-1-0-auto.html （在线测试） （源码）
• flexbox_flex-1-0-auto-shrink.html （在线测试） （源码）
• flexbox_flex-1-0.html （在线测试） （源码）
• flexbox_flex-1-0-N.html （在线测试） （源码）
• flexbox_flex-1-0-Npercent.html （在线测试） （源码）
• flexbox_flex-1-0-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-1-0-N-shrink.html （在线测试） （源码）
• flexbox_flex-1-1-0.html （在线测试） （源码）
• flexbox_flex-1-1-0-unitless.html （在线测试） （源码）
• flexbox_flex-1-1-auto.html （在线测试） （源码）
• flexbox_flex-1-1-auto-shrink.html （在线测试） （源码）
• flexbox_flex-1-1.html （在线测试） （源码）
• flexbox_flex-1-1-N.html （在线测试） （源码）
• flexbox_flex-1-1-Npercent.html （在线测试） （源码）
• flexbox_flex-1-1-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-1-1-N-shrink.html （在线测试） （源码）
• flexbox_flex-1-N-0.html （在线测试） （源码）
• flexbox_flex-1-N-0-unitless.html （在线测试） （源码）
• flexbox_flex-1-N-auto.html （在线测试） （源码）
• flexbox_flex-1-N-auto-shrink.html （在线测试） （源码）
• flexbox_flex-1-N.html （在线测试） （源码）
• flexbox_flex-1-N-N.html （在线测试） （源码）
• flexbox_flex-1-N-Npercent.html （在线测试） （源码）
• flexbox_flex-1-N-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-1-N-N-shrink.html （在线测试） （源码）
• flexbox_flex-N-0-0.html （在线测试） （源码）
• flexbox_flex-N-0-0-unitless.html （在线测试） （源码）
• flexbox_flex-N-0-auto.html （在线测试） （源码）
• flexbox_flex-N-0-auto-shrink.html （在线测试） （源码）
• flexbox_flex-N-0.html （在线测试） （源码）
• flexbox_flex-N-0-N.html （在线测试） （源码）
• flexbox_flex-N-0-Npercent.html （在线测试） （源码）
• flexbox_flex-N-0-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-N-0-N-shrink.html （在线测试） （源码）
• flexbox_flex-N-1-0.html （在线测试） （源码）
• flexbox_flex-N-1-0-unitless.html （在线测试） （源码）
• flexbox_flex-N-1-auto.html （在线测试） （源码）
• flexbox_flex-N-1-auto-shrink.html （在线测试） （源码）
• flexbox_flex-N-1.html （在线测试） （源码）
• flexbox_flex-N-1-N.html （在线测试） （源码）
• flexbox_flex-N-1-Npercent.html （在线测试） （源码）
• flexbox_flex-N-1-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-N-1-N-shrink.html （在线测试） （源码）
• flexbox_flex-N-N-0.html （在线测试） （源码）
• flexbox_flex-N-N-0-unitless.html （在线测试） （源码）
• flexbox_flex-N-N-auto.html （在线测试） （源码）
• flexbox_flex-N-N-auto-shrink.html （在线测试） （源码）
• flexbox_flex-N-N.html （在线测试） （源码）
• flexbox_flex-N-N-N.html （在线测试） （源码）
• flexbox_flex-N-N-Npercent.html （在线测试） （源码）
• flexbox_flex-N-N-Npercent-shrink.html （在线测试） （源码）
• flexbox_flex-N-N-N-shrink.html （在线测试） （源码）
• flexbox_flex-formatting-interop.html （在线测试） （源码）
• flexbox_generated-flex.html （在线测试） （源码）
• flexbox_generated.html （在线测试） （源码）
• flexbox_generated-nested-flex.html （在线测试） （源码）
• flexbox-iframe-intrinsic-size-001.html （在线测试） （源码）
• flexbox_item-bottom-float.html （在线测试） （源码）
• flexbox_item-clear.html （在线测试） （源码）
• flexbox_item-float.html （在线测试） （源码）
• flexbox_item-top-float.html （在线测试） （源码）
• flexbox_item-vertical-align.html （在线测试） （源码）
• flexbox_block.html （在线测试） （源码）
• flexbox_box-clear.html （在线测试） （源码）
• flexbox_display.html （在线测试） （源码）
• flexbox_fbfc2.html （在线测试） （源码）
• flexbox_fbfc.html （在线测试） （源码）
• flexbox_nested-flex.html （在线测试） （源码）
• flexbox-root-node-001a.html （在线测试） （源码）
• flexbox-root-node-001b.html （在线测试） （源码）
• flexbox_stf-fixpos.html （在线测试） （源码）
• flexbox_stf-float.html （在线测试） （源码）
• flexbox_stf-inline-block.html （在线测试） （源码）
• flexbox_stf-table-caption.html （在线测试） （源码）
• flexbox_stf-table-cell.html （在线测试） （源码）
• flexbox_stf-table.html （在线测试） （源码）
• flexbox_stf-table-row-group.html （在线测试） （源码）
• flexbox_stf-table-row.html （在线测试） （源码）
• flexbox_stf-table-singleline-2.html （在线测试） （源码）
• flexbox_stf-table-singleline.html （在线测试） （源码）
• flexbox_table-fixed-layout.html （在线测试） （源码）
• flexbox-with-multi-column-property.html （在线测试） （源码）
• flexbox_computedstyle_display.html （在线测试） （源码）
• grid-flex-item-001.html （在线测试） （源码）
• grid-flex-item-002.html （在线测试） （源码）
• grid-flex-item-003.html （在线测试） （源码）
• grid-flex-item-004.html （在线测试） （源码）
• grid-flex-item-005.html （在线测试） （源码）
• grid-flex-item-006.html （在线测试） （源码）
• grid-flex-item-007.html （在线测试） （源码）
• flexbox_interactive_flex-transitions.html (manual test) （源码）
• flexbox_interactive_order-transitions-2.html (manual test) （源码）
• flexbox_interactive_order-transitions.html (manual test) （源码）
• nested-flex-image-loading-invalidates-intrinsic-sizes.html （在线测试） （源码）
• percentage-margins-001.html （在线测试） （源码）
• stretch-after-sibling-size-change.html （在线测试） （源码）
• stretched-child-in-nested-flexbox-001.html （在线测试） （源码）
• stretched-child-in-nested-flexbox-002.html （在线测试） （源码）
• stretched-child-in-nested-flexbox-003.html （在线测试） （源码）
• stretched-child-shrink-on-relayout.html （在线测试） （源码）
• stretch-flex-item-checkbox-input.html （在线测试） （源码）
• stretch-flex-item-radio-input.html （在线测试） （源码）
• stretching-orthogonal-flows.html （在线测试） （源码）
• table-with-percent-intrinsic-width.html （在线测试） （源码）

inline-flex

该值会使元素生成一个 弹性容器 盒， 当其处于 流式布局 时，该盒为 内联级。

测试

• flexbox_inline.html （在线测试） （源码）
• flex-inline.html （在线测试） （源码）
• flexbox_inline-float.html （在线测试） （源码）
• inline-flexbox-absurd-block-size-crash.html （在线测试） （源码）
• inline-flexbox-wrap-vertically-width-calculation.html （在线测试） （源码）
• inline-flex-editing-crash.html （在线测试） （源码）
• inline-flex-editing-with-updating-text-crash.html （在线测试） （源码）
• inline-flex-frameset-main-axis-crash.html （在线测试） （源码）
• inline-flex.html （在线测试） （源码）
• inline-flex-min-content-height.html （在线测试） （源码）
• flexbox_computedstyle_display-inline.html （在线测试） （源码）
• intrinsic-width-orthogonal-writing-mode.html （在线测试） （源码）

弹性容器为其内容建立了一个新的 弹性格式化上下文。 这与建立块格式化上下文类似，只是使用弹性布局而不是块布局。 例如，浮动不会侵入弹性容器， 并且弹性容器的外边距不会与其内容的外边距折叠。 弹性容器为其内容形成包含块， 和块容器完全一样。 [CSS2] overflow 属性适用于弹性容器。

弹性容器不是块容器，因此一些基于块布局假设设计的属性在弹性布局环境下并不适用。尤其：

• float 和 clear 不会让 弹性项目产生浮动或清除浮动效果，也不会让其脱离正常文档流。

• vertical-align 对弹性项目无效。

• ::first-line 和 ::first-letter 伪元素不适用于 弹性容器， 弹性容器也不会为其祖先贡献 首格式化行或首字母。

如果元素指定的display 属性为 inline-flex， 那么在某些情况下其display属性会被计算为 flex： CSS 2.1 第9.7节中的表格会添加一行， 其中 "Specified Value" 列为 inline-flex， "Computed Value" 列为 flex。

4. 弹性项目

简单来说，弹性项目是 弹性容器流内内容所生成的盒子。

每个弹性容器的流内子元素都会成为 弹性项目， 每个子文本序列会被包裹在一个匿名 块容器 弹性项目中。 但是，如果整个文本序列仅包含 文档空白字符（即能被white-space属性影响的字符）， 则不会渲染（就像其文本节点被设置为display:none一样）。

<div style="display:flex">

    <!-- 弹性项目：块级子元素 -->
    <div id="item1">block</div>

    <!-- 弹性项目：浮动元素，浮动会被忽略 -->
    <div id="item2" style="float: left;">float</div>

    <!-- 弹性项目：匿名块盒包裹内联内容 -->
    anonymous item 3

    <!-- 弹性项目：内联子元素 -->
    <span>
        item 4
        <!-- 弹性项目不会在块元素周围分割 -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>

弹性项目 为其内容建立独立的格式化上下文。 但弹性项目自身是弹性级盒子，而不是块级盒子： 它们参与其容器的弹性格式化上下文，而不是块格式化上下文。

注意： 阅读本规范的作者可能想要跳过下面的盒子生成与静态定位细节。

如果元素最近的祖先元素（跳过 display:contents 祖先）的 计算 display值为 flex 或 inline-flex， 那么该元素自身的display值将会被 块化。 （块化值转换的详细信息见 CSS2.1§9.7 [CSS2] 及 CSS Display 3 § 2.7 自动盒类型转换。）

注意： 即使 flex 或 inline-flex 元素最终没有生成 弹性容器盒子， 块化仍然会发生。例如当其是 替换元素 或处于 display: none 子树中时。

注意： 某些 display 的值通常会在原始盒子外创建匿名盒。 如果这样的盒子是 弹性项目， 会先块化，因此不会再创建匿名盒。例如，两个连续的弹性项目 display: table-cell， 会变成两个独立的display: block 弹性项目，而不是被包裹为一个匿名表格。

对于 display: table 的弹性项目， 表格包装盒会成为弹性项目， 因此 align-self 属性适用于它。 任何 caption 盒的内容会参与表格包装盒的 min-content 和 max-content 尺寸计算。 但与 width、 height 一样， flex 长属性应用于表格盒时如下： 弹性项目的最终尺寸通过布局计算， 假定表格包装盒的边缘与表格盒内容边缘之间的距离都属于表格盒的 border+padding 区域， 并且表格盒就是弹性项目。

4.1. 绝对定位的弹性子项

由于绝对定位元素脱离了文档流，弹性容器的绝对定位子元素不会参与弹性布局。

弹性容器的绝对定位子元素的 交叉轴方向的 静态定位矩形边缘， 是该弹性容器的内容边缘。 静态定位矩形的 主轴方向的边缘， 是子元素作为唯一弹性项目时， 其外边距边缘 应该被放置的位置， 前提是子元素和弹性容器都是其已用尺寸的固定尺寸盒子。 （在此情况下，子元素的auto外边距视为零。）

4.2. 弹性项目的外边距和内边距

相邻弹性项目的外边距不会折叠。

弹性项目上的百分比外边距和内边距， 与块盒上的一样， 都是相对于包含块的内联尺寸计算的， 例如左右/上下百分比都相对于其包含块的宽度在水平书写模式下计算。

auto 外边距会扩展以吸收相应维度的多余空间。 它们可以用于对齐，或用于将相邻弹性项目分开。 详见使用 auto 外边距进行对齐。

4.3. 弹性项目的Z轴排序

弹性项目的绘制方式与内联块几乎完全一致 [CSS2]， 唯一不同点是使用order调整后的文档顺序， 替代原始文档顺序， 并且z-index属性值只要不是 auto， 都会创建一个堆叠上下文， 即使position 为static（行为与position为relative时完全一致）。

注意： 定位在弹性项目之外的后代元素，依然参与弹性项目建立的堆叠上下文。

4.4. 折叠项

在弹性项目上指定 visibility:collapse 会使其成为一个折叠弹性项目， 其效果类似于表格行或表格列上的 visibility:collapse： 折叠弹性项目会完全从渲染中移除， 但会留下一个“支撑”，以保持弹性行的交叉轴尺寸稳定。 因此，如果弹性容器只有一行， 动态折叠或展开项目 可能会改变弹性容器的 主尺寸， 但保证不会影响其交叉尺寸，也不会导致页面其它布局“晃动”。 然而，折叠后会重新进行弹性行换行， 所以有多行的弹性容器的交叉尺寸可能会改变，也可能不会改变。

虽然折叠弹性项目不会被渲染， 但它们仍然会出现在格式化结构中。 因此，与display:none元素不同 [CSS2]， 依赖盒子出现在格式化结构中的效果 （如计数器递增或动画与过渡的运行） 仍然会作用于折叠项。

@media (min-width: 60em) {
  /* 仅当空间足够时使用双栏布局（相对于默认文本尺寸）*/
  div { display: flex; }
  #main {
    flex: 1;         /* 主内容区占据所有剩余空间 */
    order: 1;        /* 放在导航栏右侧 */
    min-width: 12em; /* 优化主内容区尺寸 */
  }
}
/* 菜单项使用弹性布局使 visibility:collapse 生效 */
nav > ul > li {
  display: flex;
  flex-flow: column;
}
/* 未被激活时动态折叠子菜单 */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}

<div>
  <article id="main">
    有趣的内容阅读
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">关于</a>
        …
      <li id="nav-projects"><a href="#nav-projects">项目</a>
        <ul>
          <li><a href="…">艺术</a>
          <li><a href="…">建筑</a>
          <li><a href="…">音乐</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">互动</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

为了计算支撑的尺寸，弹性布局首先会在所有项目未折叠的情况下进行，然后对每个折叠弹性项目用一个支撑替换，保持该项目原本所在行的交叉尺寸。 关于 visibility:collapse 如何与弹性布局交互的规范定义，参见弹性布局算法。

注意： 在任何弹性项目上使用 visibility:collapse 都会导致弹性布局算法在中途重复执行，重新运行最耗资源的步骤。 建议作者在项目不会动态折叠/展开时继续使用 display:none 隐藏项目， 因为这样对布局引擎更高效。 （由于仅在更改 visibility 时需要重复部分步骤， 所以“visibility: collapse”仍推荐用于动态场景。）

4.5. 弹性项目的自动最小尺寸

注意： auto 关键字， 表示 自动最小尺寸， 是 min-width 和 min-height 属性的新初始值。 该关键字此前在本规范中定义，现在已由 CSS Sizing 模块定义。

为了给弹性项目提供更合理的默认最小尺寸， 当 弹性项目的主轴方向 自动最小尺寸的已用值， 且其计算的 overflow值为不可滚动时， 其自动最小尺寸为基于内容的最小尺寸； 对于滚动容器，自动最小尺寸一如既往为零。

基于内容的最小尺寸 对于弹性项目，取决于该 弹性项目是否为替换元素：

对于替换元素

取内容尺寸建议和 传递尺寸建议（如有）中较小值， 再以指定尺寸建议（如有）作为上限。

对于非替换元素

取内容尺寸建议和 传递尺寸建议（如有）中较大值， 再以指定尺寸建议（如有）作为上限。

无论哪种情况，尺寸都会被最大 主尺寸限制（如果是确定的）。

内容尺寸建议、 指定尺寸建议和 传递尺寸建议在此计算中会考虑相关的 min/max/首选尺寸属性， 以确保基于内容的最小尺寸不会影响作者提供的约束， 定义如下：

指定尺寸建议

如果该项目的首选 主尺寸是确定的且不是 自动的， 那么指定尺寸建议即为该尺寸。 否则无定义。

传递尺寸建议

如果该项目有首选纵横比， 且其首选 交叉尺寸是确定的， 那么传递尺寸建议即为该尺寸 （如有最小和 最大 交叉尺寸且为确定的则加以限制）， 并通过纵横比转换。 否则无定义。

内容尺寸建议

内容尺寸建议是 最小内容尺寸 在主轴方向上， 若有首选纵横比， 则通过纵横比转换，并受任何确定的 最小和 最大 交叉尺寸限制。

注意： 基于内容的最小尺寸 是一种内在尺寸贡献， 因此CSS Sizing 3 § 5.2 内在贡献中的循环百分比条款适用。

在计算盒子的内在尺寸（如盒子的最小内容尺寸）时， 基于内容的最小尺寸 会导致该轴上的盒子尺寸变为不确定（即使其width属性指定了确定的尺寸）。 注意，这意味着针对该尺寸计算的百分比会表现为 auto。

在除计算内在尺寸之外的任何用途， 基于内容的最小尺寸 （不同于显式的min-content等 最小尺寸）不会强制盒子的尺寸变为不确定。 但是，如果某个百分比是在应用此最小值前根据盒子尺寸解析的，则必须在应用后重新基于新尺寸解析该百分比。

5. 排序与方向

弹性容器中的内容可以以任意方向和顺序进行布局。 这让作者能够轻松实现以前需要复杂或易碎方法才能达到的效果， 比如使用 float 和 clear 属性的技巧。 这些功能通过 flex-direction、flex-wrap 和 order 属性来实现。

注意： 弹性布局的重新排序能力有意只影响视觉渲染， 保持语音顺序和基于源码的导航不变。 这让作者能够调整视觉呈现效果， 同时让源码顺序在非 CSS 用户代理和诸如语音或顺序导航等线性模型中保持不变。 参见 CSS Display 3 § 3.1 重新排序与可访问性 以及 弹性布局概述，其中有利用这种区分提升可访问性的示例。

作者不得使用 order 或 *-reverse 作为 flex-flow/flex-direction 的值来替代正确的源码顺序， 因为这样会破坏文档的可访问性。

5.1. 弹性流方向：flex-direction 属性

flex-direction 属性指定 弹性项目 在弹性容器中的放置方式， 通过设置弹性容器的 主轴 方向。 这决定了弹性项目的布局方向。

row

弹性容器的 主轴 与当前 内联轴 的方向一致。 main-start 和 main-end 的方向分别等同于当前 inline-start 和 inline-end， 即 writing mode 的对应方向。

测试

• flex-child-percent-basis-resize-1.html （在线测试） （源码）
• flexbox-flex-basis-content-001a.html （在线测试） （源码）
• flexbox-flex-basis-content-001b.html （在线测试） （源码）
• flexbox-flex-direction-row.htm （在线测试） （源码）
• flexbox_justifycontent-left-001.html （在线测试） （源码）
• flexbox-writing-mode-010.html （在线测试） （源码）
• flexbox-writing-mode-011.html （在线测试） （源码）
• flexbox-writing-mode-012.html （在线测试） （源码）
• flexbox-writing-mode-016.html （在线测试） （源码）
• percentage-size.html （在线测试） （源码）

row-reverse

与 row 相同， 只是 main-start 和 main-end 的方向被交换。

测试

• flexbox_direction-row-reverse.html （在线测试） （源码）
• flexbox-mbp-horiz-001-reverse.xhtml （在线测试） （源码）
• flexbox-mbp-horiz-001-rtl-reverse.xhtml （在线测试） （源码）
• multi-line-wrap-with-row-reverse.html （在线测试） （源码）
• flexbox_justifycontent-right-001.html （在线测试） （源码）
• flexbox_justifycontent-start.html （在线测试） （源码）
• flexbox_justifycontent-start-rtl.html （在线测试） （源码）

column

弹性容器的 主轴 与当前 块轴 的方向一致。 main-start 和 main-end 的方向分别等同于当前 block-start 和 block-end， 即 writing mode 的对应方向。

测试

• columns-height-set-via-top-bottom.html （在线测试） （源码）
• dynamic-bsize-change.html （在线测试） （源码）
• flexbox_direction-column.html （在线测试） （源码）
• flexbox_direction-column-reverse.html （在线测试） （源码）
• flexbox_rtl-flow.html （在线测试） （源码）
• flex-column-relayout-assert.html （在线测试） （源码）
• flex-item-max-height-min-content.html （在线测试） （源码）
• flex-item-transferred-sizes-padding-border-sizing.html （在线测试） （源码）
• flex-item-transferred-sizes-padding-content-sizing.html （在线测试） （源码）
• flex-outer-flexbox-column-recalculate-height-on-resize-001.html （在线测试） （源码）
• image-nested-within-definite-column-flexbox.html （在线测试） （源码）
• layout-with-inline-svg-001.html （在线测试） （源码）
• nested-orthogonal-flexbox-relayout.html （在线测试） （源码）
• percentage-max-width-cross-axis.html （在线测试） （源码）
• percentage-size.html （在线测试） （源码）

column-reverse

与 column 相同， 只是 main-start 和 main-end 的方向被交换。

测试

• column-reverse-gap.html （在线测试） （源码）
• flexbox_rtl-direction.html （在线测试） （源码）
• multi-line-wrap-with-column-reverse.html （在线测试） （源码）

注意： 反向值不会改变盒子的顺序： 与 writing-mode 和 direction [CSS3-WRITING-MODES] 类似， 它们只会改变流动方向。 绘制顺序、语音顺序和顺序导航的顺序都不会受到影响。

注意： 根据 justify-content 的值， flex-direction 的反向值可能会影响 既是 弹性容器 又是 滚动容器 的初始滚动位置。 参见 CSS Box Alignment 3 § 5.3 溢出对齐与滚动容器。

5.2. 弹性行换行：flex-wrap 属性

flex-wrap 属性用于控制弹性容器是 单行 还是 多行， 以及 交叉轴 的方向， 该方向决定了新行的堆叠方向。

nowrap

弹性容器为 单行。

wrap

弹性容器为 多行。

wrap-reverse

与 wrap 相同。

对于不是 wrap-reverse 的值， cross-start 方向等同于当前 inline-start 或 block-start 方向（取决于哪个是 交叉轴）， 而 cross-end 方向则与 cross-start 方向相反。 当 flex-wrap 为 wrap-reverse 时， cross-start 和 cross-end 的方向会被交换。

注意： 根据 align-content 的值， wrap-reverse 作为 flex-wrap 的值时， 可能会影响既是 弹性容器 又是 滚动容器 的初始滚动位置。 参见 CSS Box Alignment 3 § 5.3 溢出对齐与滚动容器。

5.3. 弹性方向与换行：flex-flow 简写属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写， 两者共同定义了弹性容器的主轴和交叉轴。

以下是在英文（从左到右、水平书写模式）文档中的一些有效流示例：

div { flex-flow: row; } /* 初始值。主轴为内联方向，不换行。 （项目会缩小以适应或溢出。）*/
div { flex-flow: column wrap; } /* 主轴为块方向（自上而下） 并且行在内联方向（向右）换行。*/
div { flex-flow: row-reverse wrap-reverse; } /* 主轴为内联方向的反方向 （从右到左）。新行向上换行。*/

注意 flex-flow 的方向会受到 书写模式影响。 例如在日文竖排中， row 弹性容器会从上到下排列内容， 如下例所示：

英文	日文
flex-flow: row wrap; writing-mode: horizontal-tb;	flex-flow: row wrap; writing-mode: vertical-rl;

5.4. 重新排序与可访问性：order 属性

弹性项目默认按照它们在源文档中的顺序显示和布局， 这代表了它们的逻辑顺序。 非视觉媒体（如语音）的渲染、 顺序导航模式的默认遍历顺序（比如通过链接循环， 参考 tabindex [HTML]）， 以及内容在非 CSS UA 中的表现， 也都使用这个顺序。

order 属性可以用来改变弹性项目的排序， 改为以 order-modified document order 进行布局， 以使它们在二维视觉画布上的空间排列 与在语音、顺序导航等线性表现中的逻辑顺序不同。 参见 CSS Display 3 § 3 显示顺序：order 属性。[CSS-DISPLAY-3]

注意： 由于视觉感知是二维且非线性的， 所需的盒子顺序并不总与非视觉媒体和非CSS UA使用的逻辑顺序一致。

作者必须仅使用 order 来进行视觉上的内容重排， 而不是逻辑上的重排。 如果样式表使用 order 来实现逻辑重排，则是不符合规范的。

许多网页的标记结构类似， 顶部是页眉， 底部是页脚， 中间是内容区和一个或两个额外的列。 通常， 希望内容在页面源代码中排在首位， 在额外列之前。 然而，这使很多常见设计， 比如让额外列在左侧、内容区在右侧， 变得难以实现。 多年来针对这个问题有很多方案， 当有两个额外列时，常被称为“圣杯布局”。order 让这一实现变得非常简单。 例如，以下是页面代码草图以及期望的布局：

<!DOCTYPE html>
<header>...</header>
<main>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</main>
<footer>...</footer>

使用弹性布局可轻松实现如下：

main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

额外福利是， 所有列默认都会等高， 主内容会根据需要自动撑满屏幕宽度。 此外， 可以结合媒体查询，在窄屏下切换为全竖直布局：

@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: nowrap） 会把所有子元素都布局在一行内， 即使这会导致内容溢出。

• 多行弹性容器（即 flex-wrap: wrap 或 flex-wrap: wrap-reverse） 会将 弹性项目分布到多行， 类似于文本因太宽而换到新行。 当创建了额外的行时， 它们会根据 flex-wrap 属性沿着弹性容器的 交叉轴 堆叠。 每一行至少包含一个 弹性项目， 除非弹性容器本身完全为空。

此示例展示了四个按钮无法横向排成一行， 因此会换行为多行。

#flex {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}
.item {
  width: 80px;
}

<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-flow 属性指定了 多行弹性容器 （因为值里出现了 wrap 关键字）， 这个弹性容器会创建一行来容纳最后一个项目。

一旦内容被分成多行， 每行会独立布局； 弹性长度和 justify-content 以及 align-self 属性只会考虑当前行上的项目。

在 多行 弹性容器（即使只有一行）， 每行的 交叉尺寸都是容纳该行上 弹性项目所需的最小尺寸 （受 align-self 对齐影响）， 并且这些行会通过 align-content 属性在弹性容器中对齐。 在 单行 弹性容器中， 该行的 交叉尺寸就是弹性容器自身的 交叉尺寸， 并且 align-content 无效。 一行的 主尺寸总是与弹性容器内容区的 主尺寸一致。

这是与前面相同的示例， 不同之处在于所有弹性项目都设置了 flex: auto。 第一行有 60px 的剩余空间， 三个项目的弹性相同， 所以这一行的每个项目都会分到 20px 的额外宽度， 最终每个项目宽度为 100px。 剩下的那个项目单独占一行， 会拉伸到该行的全部宽度，即 300px。

7. 弹性

弹性布局的核心特性是让 弹性项目“弹性伸缩”， 通过改变它们的宽度/高度来填满 主维度的可用空间。 这通过 flex 属性完成。 弹性容器会把剩余空间按项目的 flex grow factor 比例分配给项目， 以填满容器， 或根据 flex shrink factor 比例收缩项目以防止溢出。

如果一个 弹性项目 的 flex-grow 和 flex-shrink 都为零， 则称其为 完全无弹性， 否则称为 有弹性。

7.1. flex 简写属性

flex 属性用于指定弹性尺寸的各组成部分： 弹性因子 （grow 和 shrink） 以及 弹性基础值。 当一个盒子为 弹性项目 时，会优先参考 flex，而不是 主尺寸属性， 以决定盒子的 主尺寸。 如果盒子不是 弹性项目，则 flex 没有效果。

注意： flex 各长属性的初始值等同于 flex: 0 1 auto。 这与在 flex 简写属性省略时的默认值不同 （实际上是 1 1 0px）， 这样 flex 简写可以更好地适应 最常见的情况。

<'flex-grow'>

此 <number [0,∞]> 组件设置 flex-grow 长属性并指定 弹性增长因子， 用于决定当分配正剩余空间时， 弹性项目相对于同一弹性容器内其他 弹性项目 的增长比例。 若未指定，则默认为 1。

测试

• flex-grow-interpolation.html （在线测试） （源码）
• flex-001.htm （在线测试） （源码）
• flex-003.htm （在线测试） （源码）
• flex-grow-001.xht （在线测试） （源码）
• flex-grow-002.html （在线测试） （源码）
• flex-grow-003.html （在线测试） （源码）
• flex-grow-004.html （在线测试） （源码）
• flex-grow-005.html （在线测试） （源码）
• flex-grow-006.html （在线测试） （源码）
• flex-grow-007.html （在线测试） （源码）
• flex-grow-008.html （在线测试） （源码）
• flexbox_flex-natural.html （在线测试） （源码）
• flexbox_flex-natural-mixed-basis-auto.html （在线测试） （源码）
• flexbox_flex-natural-mixed-basis.html （在线测试） （源码）
• flexbox_flex-natural-variable-auto-basis.html （在线测试） （源码）
• flexbox_flex-natural-variable-zero-basis.html （在线测试） （源码）
• flexbox_flex-none.html （在线测试） （源码）
• flexbox_flex-none-wrappable-content.html （在线测试） （源码）
• flex-factor-less-than-one.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-0-auto.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-auto.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-initial.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-invalid.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-none.html （在线测试） （源码）
• flexbox_computedstyle_flex-shorthand-number.html （在线测试） （源码）
• flexbox_computedstyle_flex-grow-0.html （在线测试） （源码）
• flexbox_computedstyle_flex-grow-invalid.html （在线测试） （源码）
• flexbox_computedstyle_flex-grow-number.html （在线测试） （源码）
• flexbox_interactive_flex-grow-transitions.html (manual test) （源码）
• flex-grow-computed.html （在线测试） （源码）
• flex-grow-invalid.html （在线测试） （源码）
• flex-grow-valid.html （在线测试） （源码）
• table-item-flex-percentage-min-width.html （在线测试） （源码）
• table-item-flex-percentage-width.html （在线测试） （源码）

Flex 值在 0 到 1 之间时有一些特殊行为： 当该行上的 flex 值总和小于 1 时， 它们只会占据不到 100% 的剩余空间。

项目的 flex-grow 值 实际上是对剩余空间某一比例的请求， 1 表示“请求 100% 剩余空间”； 如果该行上的项目总请求超过 100%， 会按比例重新分配，全部用满剩余空间。 但如果项目请求的总量少于全部剩余空间 （比如三个项目每个都是 flex-grow: .25） 那么每个项目会正好获得它请求的份额 （每个分到 25%，剩下的 25% 空间则不填充）。 详见 § 9.7 解决弹性长度， 了解剩余空间分配的具体细节。

当 flex-grow 趋近于 0 时， 这种模式是为了保证行为连续 （意味着项目想要不占剩余空间）。 如果没有这种模式，flex-grow: 1 的项目会占据全部剩余空间； 而 flex-grow: 0.1 的项目也会如此， flex-grow: 0.01 也是， 依此类推， 直到值非常小以至于下溢为 0， 项目突然完全不占剩余空间。 有了这种行为， 当 flex-grow 小于 1 时， 项目会逐渐减少对剩余空间的占据， 在为零时平滑过渡为不占空间。

除非确实需要“部分填充”行为， 作者应坚持使用 ≥ 1 的值； 例如，使用 1 和 2 通常比用 .33 和 .67 更好， 因为如果项目被添加、移除或换行时更能达到预期效果。

<'flex-shrink'>

此 <number [0,∞]> 组件设置 flex-shrink 长属性并指定 弹性收缩因子， 用于决定当分配负剩余空间时， 弹性项目相对于同一弹性容器内其他 弹性项目 的收缩比例。 若未指定，则默认为 1。

测试

• flex-shrink-interpolation.html （在线测试） （源码）
• flex-002.htm （在线测试） （源码）
• flex-004.htm （在线测试） （源码）
• flex-factor-less-than-one.html （在线测试） （源码）
• flex-shrink-001.html （在线测试） （源码）
• flex-shrink-002.html （在线测试） （源码）
• flex-shrink-003.html （在线测试） （源码）
• flex-shrink-004.html （在线测试） （源码）
• flex-shrink-005.html （在线测试） （源码）
• flex-shrink-006.html （在线测试） （源码）
• flex-shrink-007.html （在线测试） （源码）
• flex-shrink-008.html （在线测试） （源码）
• flex-shrink-large-value-crash.html （在线测试） （源码）
• flexbox_computedstyle_flex-shrink-0.html （在线测试） （源码）
• flexbox_computedstyle_flex-shrink-invalid.html （在线测试） （源码）
• flexbox_computedstyle_flex-shrink-number.html （在线测试） （源码）
• flexbox_interactive_flex-shrink-transitions.html (manual test) （源码）
• flexbox_interactive_flex-shrink-transitions-invalid.html (manual test) （源码）
• flex-shrink-computed.html （在线测试） （源码）
• flex-shrink-invalid.html （在线测试） （源码）
• flex-shrink-valid.html （在线测试） （源码）
• table-item-flex-percentage-min-width.html （在线测试） （源码）
• table-item-flex-percentage-width.html （在线测试） （源码）

注意： 在分配负空间时，flex shrink factor 会与 flex base size 相乘。 这样会按照项目可收缩的程度来分配负空间， 例如，一个较小的项目不会在较大的项目明显变小之前就缩小到零。

测试

• flex-item-max-width-min-content-002.html （在线测试） （源码）

<'flex-basis'>

此组件用于设置 flex-basis 长属性， 用于指定 弹性基础值： 即在根据弹性因子分配剩余空间之前， 弹性项目的初始 主尺寸。

测试

• flex-basis-composition.html （在线测试） （源码）
• flex-basis-content-crash.html （在线测试） （源码）
• flex-basis-interpolation.html （在线测试） （源码）
• dynamic-isize-change-001.html （在线测试） （源码）
• dynamic-isize-change-002.html （在线测试） （源码）
• dynamic-isize-change-003.html （在线测试） （源码）
• dynamic-isize-change-004.html （在线测试） （源码）
• flex-basis-001.html （在线测试） （源码）
• flex-basis-002.html （在线测试） （源码）
• flex-basis-003.html （在线测试） （源码）
• flex-basis-004.html （在线测试） （源码）
• flex-basis-005.html （在线测试） （源码）
• flex-basis-006.html （在线测试） （源码）
• flex-basis-007.html （在线测试） （源码）
• flex-basis-008.html （在线测试） （源码）
• flex-basis-009.html （在线测试） （源码）
• flex-basis-010.html （在线测试） （源码）
• flex-basis-011.html （在线测试） （源码）
• flex-basis-012.html （在线测试） （源码）
• flex-basis-013.html （在线测试） （源码）
• flex-basis-intrinsics-001.html （在线测试） （源码）
• flex-basis-item-margins-001.html （在线测试） （源码）
• flexbox-flex-basis-content-001a.html （在线测试） （源码）
• flexbox-flex-basis-content-001b.html （在线测试） （源码）
• flexbox-flex-basis-content-002a.html （在线测试） （源码）
• flexbox-flex-basis-content-002b.html （在线测试） （源码）
• flexbox-flex-basis-content-003a.html （在线测试） （源码）
• flexbox-flex-basis-content-003b.html （在线测试） （源码）
• flexbox-flex-basis-content-004a.html （在线测试） （源码）
• flexbox-flex-basis-content-004b.html （在线测试） （源码）
• flexbox_flex-basis.html （在线测试） （源码）
• flexbox_flex-basis-shrink.html （在线测试） （源码）
• flex-one-sets-flex-basis-to-zero-px.html （在线测试） （源码）
• flex-shorthand-flex-basis-middle.html （在线测试） （源码）
• flexbox_computedstyle_flex-basis-0.html （在线测试） （源码）
• flexbox_computedstyle_flex-basis-0percent.html （在线测试） （源码）
• flexbox_computedstyle_flex-basis-auto.html （在线测试） （源码）
• flexbox_computedstyle_flex-basis-percent.html （在线测试） （源码）
• flexbox_interactive_flex-basis-transitions.html (manual test) （源码）
• flex-basis-computed.html （在线测试） （源码）
• flex-basis-invalid.html （在线测试） （源码）
• flex-basis-valid.html （在线测试） （源码）
• table-as-item-percent-width-cell-001.html （在线测试） （源码）

<'flex-basis'> 接受与 width 和 height 属性相同的值 （但 auto 的处理方式不同） 以及 content 关键字：

auto

当在 弹性项目 上指定时，auto 关键字 会将 主尺寸属性 的值作为实际使用的 flex-basis。 如果该值本身也是 auto，则实际使用的值为 content。

content

表示一个基于 自动尺寸 的值，依据 弹性项目的内容。 （通常等同于 max-content size， 但会针对 首选宽高比、 固有尺寸约束、 以及正交流作出调整； 具体可参见 详细说明与§ 9 弹性布局算法。)

注意： 此值在 Flexible Box 布局最初发布时并未包含， 因此部分较早的实现可能不支持。 可以通过将 auto 与主尺寸（width 或 height）设为 auto 来实现等效效果。

<'width'>

对于其它值，flex-basis 的解析方式与 width 和 height 一致。

在 flex 简写属性中省略时，其指定值为 0。

none

关键字 none 展开为 0 0 auto。

没有单位的零在未被两个弹性因子前置时，必须被解释为弹性因子。 为避免误解或无效声明， 作者应为 <'flex-basis'> 组件指定带单位的零， 或在其前面加上两个弹性因子。

7.1.1. flex 的基本值

本节仅供参考。

下方列表总结了四个 flex 值的效果， 代表最常用的几种情况：

flex: initial

等价于 flex: 0 1 auto。（这也是初始值。） 项目尺寸由 width/height 属性决定。 （如果项目的 主尺寸属性 计算为 auto， 那么弹性项目的尺寸将由内容决定。） 在有正剩余空间时，使弹性项目不可伸展， 但在空间不足时允许其收缩到最小尺寸。 可以使用 对齐能力或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: <number [1,∞]>

等价于 flex: <number [1,∞]> 1 0。 让弹性项目可伸展，并将 flex basis 设为零， 结果就是项目可获得弹性容器中指定比例的剩余空间。 如果弹性容器中的所有项目都使用此模式， 它们的尺寸会按指定的弹性因子成比例分配。

默认情况下，弹性项目不会缩小到低于其最小内容尺寸 （即最长单词或定尺寸元素的长度）。 如需改变这一行为，可设置 min-width 或 min-height 属性。 （参见 § 4.5 弹性项目的自动最小尺寸。）

7.2. 弹性的组成部分

弹性的各个组成部分可以通过独立的长属性进行控制。

鼓励作者使用 flex 简写属性控制弹性， 而不是直接使用各长属性， 因为简写属性会正确重置未指定的组件， 以适应常见用法。

7.2.1. flex-grow 属性

鼓励作者优先使用 flex 简写属性来控制弹性， 而不是直接使用 flex-grow， 因为简写属性能正确重置未指定的组件， 更好地满足常见用法。

flex-grow 属性将 弹性增长因子 设置为指定的 <number>。 不允许负值。

7.2.2. flex-shrink 属性

鼓励作者优先使用 flex 简写属性来控制弹性， 而不是直接使用 flex-shrink， 因为简写属性能正确重置未指定的组件， 更好地满足常见用法。

flex-shrink 属性将 弹性收缩因子 设置为指定的 <number>。 不允许负值。

7.2.3. flex-basis 属性

鼓励作者使用 flex 简写属性来控制弹性， 而不是直接使用 flex-basis， 因为简写属性会正确重置未指定的组件， 更好地适应常见用法。

flex-basis 属性用于设置 弹性基础值。 它接受与 width 和 height 属性相同的值，以及 content 关键字。

对于除了 auto 和 content（如上定义）以外的所有值， flex-basis 的解析方式与在水平书写模式下 width 的解析方式相同 [CSS2]， 但如果某个值在 width 下会解析为 auto， 那么在 flex-basis 下则解析为 content。 例如，flex-basis 的百分比值， 是根据弹性项目的包含块（即其 弹性容器）进行解析； 如果该包含块的尺寸是 不确定的， 那么 flex-basis 的实际值为 content。 另一个推论是，flex-basis 决定了内容盒子的尺寸， 除非有其它属性（如 box-sizing [CSS3UI]）做了特殊规定。

8. 对齐

当弹性容器的内容完成弹性伸缩，所有弹性项目的尺寸确定后， 就可以在弹性容器内对齐这些项目。

margin 属性可用于对齐项目，其方式与块布局中的外边距类似，但更强大。弹性项目也支持 CSS Box Alignment 的对齐属性， 能够轻松地通过关键字对项目进行主轴 main axis 和交叉轴 cross axis 的对齐。 这些属性让许多常见的对齐类型变得简单， 包括一些在 CSS 2.1 中很难实现的效果， 如水平居中和垂直居中。

注意： 虽然对齐属性定义在 CSS Box Alignment [CSS-ALIGN-3]， 弹性盒布局在此复述了相关属性的定义， 以避免产生规范性依赖，这样有助于规范推进。 这些属性目前仅适用于弹性布局， 直到 CSS Box Alignment Level 3 完成并定义其在其他布局模式下的效果。 此外，Box Alignment 模块中定义的新值也会适用于弹性盒布局； 换言之，一旦 Box Alignment 模块完成， 这里的定义将由其取代。

8.1. 使用 auto 外边距进行对齐

本节为非规范性内容。 关于外边距如何影响弹性项目的规范性定义，请参见 弹性布局算法 一节。

弹性项目上的 auto 外边距的效果与块流中的 auto 外边距非常相似：

• 在计算弹性基础值和弹性长度时，auto 外边距被视为 0。

• 在通过 justify-content 和 align-self 进行对齐之前， 该维度上的所有正剩余空间都会分配给 auto 外边距。

• 溢出的盒子会忽略其 auto 外边距，并在 end 方向溢出。

注意： 如果剩余空间被分配给 auto 外边距， 对齐属性在该方向上将不起作用， 因为外边距会“偷走”弹性分配后留下的所有剩余空间。

nav > ul {
  display: flex;
}
nav > ul > #login {
  margin-left: auto;
}

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

8.2. 轴对齐：justify-content 属性

justify-content 属性用于将 弹性项目 沿弹性容器当前行的 主轴对齐。 此操作会在所有弹性长度和 auto 外边距 都已处理后进行。 一般用于分配当某一行上的所有 弹性项目都不可伸展， 或可伸展但已达到最大尺寸时剩余的自由空间。 还可以在项目溢出到行外时，控制其对齐方式。

flex-start

弹性项目会向该行起始方向排列。 行上第一个 弹性项目 的 main-start 外边距紧贴行的 main-start 边缘， 后续每个 弹性项目都紧贴前一个项目。

测试

• flexbox_justifycontent-start.html （在线测试） （源码）
• flexbox_justifycontent-start-rtl.html （在线测试） （源码）

flex-end

弹性项目会向该行末尾排列。 行上最后一个 弹性项目 的 main-end 外边距紧贴行的 main-end 边缘， 前面的每个 弹性项目都紧贴后一个项目。

测试

• css-box-justify-content.html （在线测试） （源码）
• flexbox_justifycontent-end.html （在线测试） （源码）
• flexbox_justifycontent-end-rtl.html （在线测试） （源码）
• flexbox_justifycontent-flex-end.html （在线测试） （源码）

center

弹性项目会向该行中心排列。 行上的 弹性项目彼此紧贴，并在行中央对齐， 行 main-start 边缘与第一个项目之间， 以及行 main-end 边缘与最后一个项目之间的间距相等。 （如果剩余空间为负，弹性项目会在两个方向上等量溢出。）

测试

• flexbox_justifycontent-center.html （在线测试） （源码）
• flexbox_justifycontent-center-overflow.html （在线测试） （源码）

space-between

弹性项目会在行内均匀分布。 若剩余空间为负或该行只有一个 弹性项目， 则此值会退回为 safe flex-start。 否则， 行上第一个 弹性项目 的 main-start 外边距紧贴行的 main-start 边缘， 行上最后一个 弹性项目 的 main-end 外边距紧贴行的 main-end 边缘， 行内其他 弹性项目均匀分布，相邻项目间距相同。

测试

• flexbox_justifycontent-spacebetween.html （在线测试） （源码）
• flexbox_justifycontent-spacebetween-negative.html （在线测试） （源码）
• flexbox_justifycontent-spacebetween-only.html （在线测试） （源码）

space-around

弹性项目会在行内均匀分布，并且两端的空隙为单个间距的一半。 若剩余空间为负或该行只有一个 弹性项目， 则此值会退回为 safe center。 否则，行上的 弹性项目会分布， 相邻 弹性项目之间间距相同， 第一个、最后一个 弹性项目与弹性容器边缘的间距是项目间距的一半。

测试

• flexbox-column-row-gap-001.html （在线测试） （源码）
• flexbox-column-row-gap-002.html （在线测试） （源码）
• flexbox-column-row-gap-003.html （在线测试） （源码）
• flexbox-column-row-gap-004.html （在线测试） （源码）
• flexbox_columns-flexitems-2.html （在线测试） （源码）
• flexbox_columns-flexitems.html （在线测试） （源码）
• flexbox_justifycontent-spacearound.html （在线测试） （源码）
• flexbox_justifycontent-spacearound-negative.html （在线测试） （源码）
• flexbox_justifycontent-spacearound-only.html （在线测试） （源码）

五个 justify-content 关键字及其对一个三色弹性容器的影响示意图。

8.3. 交叉轴对齐：align-items 和 align-self 属性