W3C

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

Abstract

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Status of this document

This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-flexbox” in the subject, preferably like this: “[css3-flexbox] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

The CR period will last at least until 20 March 2013. At the time of publication, no test suite and implementation report have yet been made. They will be made available from the CSS test suites page. See the section “CR exit criteria” for details.

See the section “Changes” for changes made to this specification since the last Working Draft.

The following features are at-risk:

Table of contents

1. 介绍

This section is not normative.

本章节不具有规范叙述。

CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:

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

This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

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

1.1. 概述

This section is not normative.

本章节不具有规范叙述。

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need. The contents of a flex container:

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

Here's an example of a catalog where each item has a title, an photo, a description, and a purchase button. The designer's intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons aligned at the bottom, regardless of the length of the item's description. Flex layout makes many aspects of this design easy:

这时一个产品型录的例子,每个商品有品名、相片、描叙、购买按钮。设计师希望每个产品栏有相同的尺寸,相片要在文字叙述之上,而且不管商品的描叙有多长购买按钮要沿着底部对齐。伸缩布局让这个设计的很多部分的实现起来很简单:

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

打印机

只能打印 ASCII art。

  • 未包含墨水和纸。
An example rendering of the code above. 上面代码的可能渲染结果。

1.2. 模块关系

This module extends the definition of the ‘display’ property [CSS21], adding a new block-level and new inline-level display type, and defining a new type of formatting context along with properties to control its layout. It also defines a new initial value for ‘min-width’ and ‘min-height’. None of the properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements.

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

1.3. 取值

This specification follows the CSS property definition conventions from [CSS21]. Value types not defined in this specification are defined in CSS Level 2 Revision 1 [CSS21]. Other CSS modules may expand the definitions of these value types: for example [CSS3VAL], when combined with this module, expands the definition of the <length> value type as used in this specification.

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

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.

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

2. 伸缩布局模型

An element with ‘display:flex’ or ‘display:inline-flex’ is a flex container. Children of a flex container are called flex items and are laid out using the flex layout model.

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

Unlike block and inline layout, whose layout calculations are biased to the block and inline flow directions, flex layout is biased to the flex flow directions. To make it easier to talk about flex layout, this section defines a set of flex flow–relative terms. The ‘flex-flow’ value determines how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).

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

alt
An illustration of the various directions and sizing terms as applied to a ‘row’ flex container. 一个「row」伸缩容器中各种方向与大小术语的示意图。
main axis
main dimension
主轴、主轴方向
The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
使用者代理沿着一个伸缩容器的主轴配置伸缩项目主轴主轴方向的延伸。
main-start
main-end
主轴起点、主轴终点
The flex items are placed within the container starting on the main-start side and going toward the main-end side.
伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
main size
main size property
主轴长度、主轴长度属性
A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度伸缩项目主轴长度属性是「width」或「height」属性,由哪一个对着主轴方向决定。
cross axis
cross dimension
侧轴、侧轴方向
The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
主轴垂直的轴称作侧轴,是侧轴方向的延伸。
cross-start
cross-end
侧轴起点、侧轴终点
Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
cross size
cross size property
侧轴长度、侧轴长度属性
The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.
伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度伸缩项目侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

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

名称: display
新值flex | inline-flex
flex
This value causes an element to generate a block-level flex container box.
这个值让元素产生块级伸缩容器盒。
inline-flex
This value causes an element to generate a inline-level flex container box.
这个值让元素产生行内级伸缩容器盒。

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout: floats do not intrude into the flex container, and the flex container's margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21]

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

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don't apply in the context of flex layout. In particular:

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

If an element's specified ‘display’ is ‘inline-flex’ and the element is floated or absolutely positioned, the computed value of ‘display’ is flex. The table in CSS 2.1 Chapter 9.7 is thus amended to contain an additional row, with ‘inline-flex’ in the "Specified Value" column and flex in the "Computed Value" column.

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

4. 伸缩项目

The contents of a flex container consists of zero or more flex items: each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item element. However, an anonymous flex item that contains only white space is not rendered, as if it were ‘display:none’.

一个伸缩容器的内容具有零个以上的伸缩项目 ― 伸缩容器的每一个子元素(除了需要盒修复的元素之外)都会成为一个伸缩项目,且使用者代理会将任何直接在伸缩容器里的连续文字块包起来成无名伸缩项目。然而,若无名伸缩项目仅包含空白,则使用者代理不会渲染该伸缩项目,如同将之视为「display: none」。

Authors reading this spec may want to skip past these box-generation details.

A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its ‘display’ value, as usual. The computed ‘display’ of a flex item is determined by applying the table in CSS 2.1 Chapter 9.7. However, flex items are flex-level boxes, not block-level boxes: they participate in their container's flex formatting context, not in a block formatting context.

伸缩项目为其内容建立一个新的格式化上下文,这个格式化上下文的种类由项目「display」的值决定。使用者代理使用 CSS 2.1 章节 9.7 的表格决定伸缩项目display」的计算值。

The ‘display’ computation on flex items as defined here is expected to be superseded by a future specification that defines a new ‘display’ value specific to flex items.

CSS 工作组预计会在未来的规范里为伸缩项目引入新的「display」值,以取代这条叙述。

Examples of flex items:

伸缩项目范例

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

Some values of ‘display’ trigger the generation of anonymous boxes. For example, a misparented ‘table-cell’ child is fixed up by generating anonymous ‘table’ and ‘table-row’ elements around it. [CSS21] This fixup must occur before a flex container's children are promoted to flex items. For example, given two contiguous child elements with ‘display:table-cell’, an anonymous table wrapper box around them becomes the flex item.

有些「display」会触发无名盒的生成,举例来说,使用者代理会在单独的「table-cell」盒周围生成「table」与「table-row」元素[CSS21] 这种修复必须在伸缩容器的子元素变成伸缩项目「之前」发生 ― 举例来说,若有两个相邻的「display: table-cell」子元素,两个元素周围的无名表格包裹盒会变成伸缩项目

Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins). It is intended that flex item determination run after these operations.

本规范预期让未来生成无名容器(如「display:ruby」)或会搅动盒树(「display:run-in」)的显示型态造成的变化在决定伸缩项目之前发生。

On a flex item with ‘display: table’, the table wrapper box becomes the flex item, and the ‘order’ and ‘align-self’ properties apply to it. The contents of any caption boxes contribute to the calculation of the table wrapper box's min-content and max-content sizes. However, like ‘width’ and ‘height’, the ‘flex’ longhands apply to the table box as follows: the flex item's final size is calculated by performing layout as if the distance between the table wrapper box's edges and the table box's content edges were all part of the table box's border+padding area, and the table box were the flex item.

4.1. 绝对定位的伸缩子元素

An absolutely-positioned child element of a flex container does not participate in flex layout beyond the reordering step. However, if both ‘left’ and ‘right’ or both ‘top’ and ‘bottom’ are ‘auto’, then the used value of those properties are computed from its static position, as follows:

伸缩容器的绝对定位子元素不参与伸缩布局的重新排序步骤之后的所有步骤。但是,若「left」和「right」的值均为「auto」或者「top」和「bottom」的值均为「auto」,则这些属性的使用值由绝对定位子元素的静态位置得来,如下:

If both ‘left’ and ‘right’ are ‘auto’, the absolutely-positioned child must be positioned so that its main-start or cross-start edge (whichever is in the horizontal axis) is aligned with the static position. If both ‘top’ and ‘bottom’ are ‘auto’, the absolutely-positioned child must be positioned so that its main-start or cross-start edge (whichever is in the vertical axis) is aligned with the static position.

若「left」和「right」的值均为「auto」,则用户代理必须将绝对定位子元素在主轴起点边的外边或是在侧轴起点边的外边(在水平轴上的那一个)定位到静态位置。若「top」和「bottom」的值均为「auto」,则用户代理必须将绝对定位子元素在主轴起点边的外边或是在侧轴起点边的外边(在垂直轴上的那一个)定位到静态位置

In the main axis,

对于主轴方向:

  1. If there is a subsequent flex item on the same flex line, the static position is the outer main-start edge of that flex item.
  2. Otherwise, if there is a preceding flex item on the same flex line, the static position is the outer main-end edge of that flex item.
  3. Otherwise, the static position is determined by the value of ‘justify-content’ on the flex container as if the static position were represented by a zero-sized flex item.
  1. 伸缩容器里没有伸缩项目,则静态位置伸缩容器上的「justify-content」的值来决定,位置为假设一个大小为零的伸缩项目在此伸缩容器里的时候的位置。
  2. 否则,若绝对定位子元素的前一个伸缩项目不存在或者前一个伸缩项目与后一个伸缩项目在同一行,则静态位置是后一个伸缩项目主轴起点边的外边。
  3. 否则,静态位置是前一个伸缩项目主轴终点边的外边。

In the cross axis,

对于侧轴方向:

  1. If there is a preceding flex item, the static position is the cross-start edge of the flex-line that item is in.

    若绝对定位子元素的前一个伸缩项目存在,则静态位置是该项目所在伸缩行的侧轴起点边。

  2. Otherwise, the static position is the cross-start edge of the first flex line.

    否则,静态位置是第一行伸缩行的侧轴起点边。

The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow flex-start’-aligned flex item that participates in flex layout, the primary difference being that any packing spaces due to ‘justify-content: space-around’ or ‘justify-content: space-between’ are suppressed around the hypothetical item: between it and the next item if there is a real item after it, else between it and the previous item (if any) if there isn't.

这个定义的意图是要让静态位置差不多是一个匿名 0x0 的流内、以「flex-start」对齐的伸缩项目参与伸缩布局后的位置,主要的差别在于假想项目周围由「justify-content: space-around」与「justify-content: space-between」分配的空间被抑制了:假想项目跟下一个真项目(如果存在)间的空白,又或是假想项目跟前一个真项目(如果下一个真项目不存在)间的空白(被抑制了)。

4.2. 伸缩项目的边界

The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with ‘auto’ margins.

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

4.3. Flex Item Painting

Flex items paint exactly the same as block-level elements in the normal flow, except that z-index values other than ‘auto’ create a stacking context even if ‘position’ is ‘static’.

Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item.

4.4. 折叠项目

Specifying ‘visibility:collapse’ on a flex item causes it to become a collapsed flex item, producing an effect similar to ‘visibility:collapse’ on a table-row or table-column: the collapsed element is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line's cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items is guaranteed to have no effect on the flex container's cross size and won't cause the rest of the page's layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.

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

Though collapsed flex items aren't rendered, they do appear in the formatting structure. Therefore, unlike on ‘display:none’ items [CSS21], effects that depend on an element appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.

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

In the following example, a sidebar is sized to fit its content. ‘Visibility: collapse’ is used to dynamically hide parts of a navigation sidebar without affecting its width, even though the widest item (“Architecture”) is in a collapsed section.

Sample rendering for example code below

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

To compute the size of the strut, flex layout is first performed with all items uncollapsed, and then re-run with each collapsed item replaced by a strut that maintains the original cross-size of the item's original line. See the Flex Layout Algorithm for the normative definition of how ‘visibility:collapse’ interacts with flex layout.

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

Note that using ‘visibility:collapse’ on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It's recommended that authors continue to use ‘display:none’ to hide items if the items will not be dynamically collapsed and uncollapsed, as that is more efficient for the layout engine. (Since only part of the steps need to be repeated when ‘visibility’ is changed, however, ‘visibility: collapse’ is still recommended for dynamic cases.)

请注意在任何伸缩项目上使用「visibility: collpase」会让使用者代理执行伸缩布局演算法的时候重复最费时的几个步骤。若项目不会需要动态折叠、取消折叠,本规范建议网页作者继续使用「display: none」来隐藏项目,因为对于布局引擎来说这样比较有效率

4.5. 伸缩项目的默认最小长度

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the ‘min-width’ and ‘min-height’ properties defined in CSS 2.1. [CSS21]

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

名称: min-width, min-height
新值auto
新初始值: auto
新计算值: 指定的百分比率或绝对长度或关键字
auto

When used as the value of a flex item's min main size property, this keyword indicates a minimum of the min-content size, to help ensure that the item is large enough to fit its contents.

当使用在伸缩项目的最小主轴长度属性的时候,本关键词代表最小主轴长度是最小内容长度,以帮助确保项目够大到足以容纳其内容。

It is intended that this will compute to the ‘min-content’ keyword when the specification defining it (Writing Modes Appendix D) is sufficiently mature.

CSS 工作组预计在定义「min-content」关验字(书写模式附录 D)的规范足够成熟时,在这种情况让「auto」的计算值成为「min-content」。

Otherwise, this keyword computes to ‘0’ (unless otherwise defined by a future specification).

否则,(除非未来规范描述别的行为)本关键字的计算值为「0」。

Note that while a content-based minimum size is often appropriate, and helps prevent content from overlapping or spilling outside its container, in some cases it is not:

请注意虽然基于内容的最小尺寸通常可以避免内容重叠或是内容溢出伸缩项目,但在某些情况这是不适当的:

In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as ‘min-width: 12em’. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read.

如果要在文档的主要内容区域使用伸缩布局,最好也设置相对于字体的最小宽度,如「min-width: 12em」。基于内容的最小宽度会导致网页里有大型表格或图像的时候,整个内容区域扩展以至于溢出窗口,使得一行文本过长、难读。

Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)

请也注意在含有大量内容的项目上设置基于内容的最小尺寸会让布局引擎必须遍历项目的所有内容方可找到项目的最小尺寸,而在网页作者设置明确的最小值时不须要这种遍历程序。(然而,对于含有小量内容的伸缩项目,这种遍历并不会造成效能问题。)

5. 排序与方向

The contents of a flex container can be laid out in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the ‘float’ and ‘clear’ properties. This functionality is exposed through the ‘flex-direction’, ‘flex-wrap’, and ‘order’ properties.

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

The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation. See Reordering and Accessibility and the Flex Layout Overview for examples that use this dichotomy to improve accessibility.

Authors must not use these techniques as a substitute for correct source ordering, as that can ruin the accessibility of the document.

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

名称: flex-direction
取值row | row-reverse | column | column-reverse
初始: row
适用于: 伸缩容器
继承:
计算值: 同指定值
媒介:动画: 视觉
动画:
正规顺序 照文法

The ‘flex-direction’ property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction that flex items are laid out in.

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

row
The flex container's main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current writing mode.
伸缩容器的主轴与当前书写模式的行内轴(文字布局的主要方向)同向。主轴起点主轴终点方向分别等同于当前书写模式方向。
row-reverse
Same as ‘row’, except the main-start and main-end directions are swapped.
除了主轴起点主轴终点方向交换以外同「row」。
column
The flex container's main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the before/head and after/foot directions, respectively, of the current writing mode.
伸缩容器的主轴与当前书写模式的块轴(块布局的主要方向)同向。主轴起点主轴终点方向分别等同于当前书写模式方向。
column-reverse
Same as ‘column’, except the main-start and main-end directions are swapped.
除了主轴起点主轴终点方向交换以外同「column」。

The reverse values do not reverse box ordering; like ‘writing-mode’ and ‘direction[CSS3-WRITING-MODES], they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

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

名称: flex-wrap
取值nowrap | wrap | wrap-reverse
初始: nowrap
适用于: 伸缩容器
继承:
计算值: 同指定值
媒介: 视觉
动画:
正规顺序 照文法

The ‘flex-wrap’ property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

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

nowrap
The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.
伸缩容器为单行侧轴起点方向等同于当前书写模式起点/头在侧轴的那一边,而侧轴终点方向是侧轴起点的相反方向。
wrap
The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.
伸缩容器为多行侧轴起点方向等同于当前书写模式起点/头在侧轴的那一边,而侧轴终点方向是侧轴起点的相反方向。
wrap-reverse
Same as ‘wrap’, except the cross-start and cross-end directions are swapped.
除了侧轴起点侧轴终点方向交换以外同「wrap」。

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

名称: flex-flow
取值<‘flex-direction’> || <‘flex-wrap’>
初始: 参见各属性
适用于: 伸缩容器
继承: 参见各属性
计算值: 参见各属性
媒介: 视觉
动画:
正规顺序 照文法

The ‘flex-flow’ property is a shorthand for setting the ‘flex-direction’ and ‘flex-wrap’ properties, which together define the flex container's main and cross axes.

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

Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:

一些合法伸缩流的例子:


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

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

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

Note that the ‘flex-flow’ directions are writing-mode sensitive. In vertical Japanese, for example, a ‘row’ flex container lays out its contents from top to bottom, as seen in this example:

请注意「flex-flow」决定的方向取决于书写模式。举例来说,在日文竖排里,「row」伸缩容器从上到下配置其内容。

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

5.4. 显示顺序 ―「order」属性

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The ‘order’ property can be used to change this ordering.

预设状态下,使用者代理会用伸缩项目出现在来源文件的次序配置这些伸缩项目。「order」属性可以用来改变这个顺序。

名称: order
取值<integer>
初始: 0
适用于: 伸缩项目与伸缩容器的绝对定位子元素
继承:
计算值: 同指定值
媒介: 视觉
动画: yes
正规顺序 照文法

The ‘order’ property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

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

A flex container will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the elements were reordered in the document.

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

The following figure shows a simple tabbed interface, where the tab for the active pane is always first:

下图的简单标签介面中,一个使用中的模板总是显示在最前面:

alt

The following figure shows a simple tabbed interface, where the tab for the active pane is always first:

这可以由以下 CSS 实作(仅显示部份相关程式码):

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

Unless otherwise specified by a future specification, this property has no effect on elements that are not flex items.

除非有别的规范说明,本属性在不是伸缩项目或伸缩容器的绝对定位子元素的元素上没有效果。

5.4.1. Reordering and Accessibility

The ‘order’ property does not affect ordering in non-visual media (such as speech). Likewise, ‘order’ does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. ‘nav-index[CSS3UI] or tabindex [HTML40]). Authors must use ‘order’ only for visual, not logical, reordering of content; style sheets that use ‘order’ to perform logical reordering are non-conforming.

This is so that non-visual media and non-CSS UAs, which typically present content linearly, can rely on a logical source order, while ‘order’ is used to tailor the visual order. (Since visual perception is two-dimensional and non-linear, the desired visual order is not always logical.)

Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it's desirable that the content come first in the page's source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. ‘order’ makes this trivial. For example, take the following sketch of a page's code and desired layout:

很多 Web 页面在 HTML 里有很相似的构造,在上面有一个标题,下面一个注解,一个内容区块跟一个或两个在中间的额外栏位。一般来说,内容出现在页面原始码的前面(在额外的栏位之前)比较好。然而,这让很多一般的设计很难达成,像是把栏位摆在内容区块的两边。多年以来这种俗称「圣杯布局」的两个额外栏位的布局已经有很多种方法完成了,然而「order」让这种布局轻而易举。以下面的页面程式码草图与预期布局为例:

<!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer>
In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left.

This layout can be easily achieved with flex layout:

这种布局可以很简单地由伸缩布局达成:

#main { display: flex; }
#main > article { flex:1;         order: 2; }
#main > nav     { width: 200px;   order: 1; }
#main > aside   { width: 200px;   order: 3; }

As an added bonus, the columns will all be equal-height by default, and the main content will be as wide as necessary to fill the screen. Additionally, this can then be combined with media queries to switch to an all-vertical layout on narrow screens:

更棒的是,预设下这些栏位是等高的,而且主要内容会根据荧幕大小尽可能宽。另外,也可以跟媒体查询结合,在窄荧幕的状况下使用垂直布局:

@media all and (max-width: 600px) {
	/* 要放三个栏位太窄了 */
	#main { flex-flow: column; }
	#main > article, #main > nav, #main > aside {
		/* 回到文件顺序 */
		order: 0; width: auto;
	}
}

(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)

(用多行伸缩容器实现智慧换行就当作是给读者的习题。)

6. 伸缩行

A flex container can be either single-line or multi-line, depending on the ‘flex-wrap’ property:

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

This example shows four buttons that do not fit horizontally.

在本示例中的四个按钮如果完全并排会放不下。

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

Since the container is 300px wide, only three of the items fit onto a single line. They take up 240px, with 60px left over of remaining space. Because the ‘flex-flow’ property specifies a multi-line flex container (due to the ‘wrap’ keyword appearing in its value), the flex container will create an additional line to contain the last item.

由于容器的宽度是 300px,同一行上仅能放得下三个项目,这三个项目占用了 240px,剩余空间为 60px。由于「flex-wrap」属性让伸缩容器变为多行伸缩容器(因为使用了「wrap」关键字),伸缩容器会多创建一个伸缩行来放置最后一个项目。

An example rendering of the multi-line flex container. 多行伸缩容器的渲染示例。

Once content is broken into lines, each line is laid out independently; flexible lengths and the ‘justify-content’ and ‘align-self’ properties only consider the items on a single line at a time.

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

When a flex container has multiple lines, the cross size of each line is the minimum size necessary to contain the flex items on the line (after aligment due to ‘align-self’), and the lines are aligned within the flex container with the ‘align-content’ property. When a flex container (even a multi-line one) has only one line, the cross size of the line is the cross size of the flex container, and ‘align-content’ has no effect. The main size of a line is always the same as the main size of the flex container's content box.

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

Here's the same example as the previous, except that the flex items have all been given ‘flex: auto’. The first line has 60px of remaining space, and all of the items have the same flexibility, so each of the three items on that line will receives 20px of extra width, ending up 100px wide. The remaining item is on a line of its own and will stretch to the entire width of the line, or 300px.

这一示例与上一示例相同,唯一的区别是伸缩项目拥有「flex: auto」样式。因为第一行的剩余空间为 60px 且所有项目有相同的可伸缩性,所以三個項目均額外獲得寬度 20px 而變為寬度 100px。由于剩余的项目自己单独在一行伸缩行中,它会扩展到整个伸缩行,即宽度 300px。

A rendering of the same as above, but with the items all given ‘flex: auto’. 与上一示例相同,但所有项目设有「flex: auto」。

7. Flexibility

The defining aspect of flex layout is the ability to make the flex items "flex", altering their width or height to fill the available space. This is done with the ‘flex’ property. A flex container distributes free space to its items proportional to their flex grow factor, or shrinks them to prevent overflow proportional to their flex shrink factor.

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

7.1. flex」缩写

名称: flex
取值none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
初始: 参见各属性
适用于: 伸缩项目
继承: 参见各属性
计算值: 参见各属性
媒介: 视觉
动画: 参见各属性
正规顺序 照文法

The ‘flex’ property specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. When an element is a flex item, ‘flex’ is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, ‘flex’ has no effect.

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

<‘flex-grow’>
This <number> component sets ‘flex-growlonghand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to ‘1’.
<number> 部件可以用来设置「flex-grow长写并指定扩展比率,也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略了此部件,则它会被设为「1」。
<‘flex-shrink’>
This <number> component sets ‘flex-shrinklonghand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to ‘1’. The flex shrink factor is multiplied by the flex basis when distributing negative space.
<number> 部件可以用来设置「flex-shrink长写并指定收缩比率,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略了此部件,则它会被设为「1」。在收缩的时候收缩比率会以伸缩基准值加权。
<‘flex-basis’>

This component, which takes the same values as the ‘width’ property, sets the ‘flex-basislonghand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. When omitted from the ‘flex’ shorthand, its specified value is the length zero.

与「width」属性使用相同的值的此部件可以用来设置「flex-basis长写并指定伸缩基准值,也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。

If the specified ‘flex-basis’ is auto, the used flex basis is the value of the element's main size property. (This can itself be the keyword ‘auto’, which sizes the element based on its contents.)

若「flex-basis」的指定值是「auto」,则伸缩基准值的指定值是元素主轴长度属性的值。(这个值可能是关键字「auto」,代表元素的长度取决于其内容。)

A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item's content size). The three items have flex factors of ‘1’, ‘1’, and ‘2’, respectively. 一个显示「绝对」伸缩(以零为基准值开始)与「相对」伸缩(以项目的内容大小为基准值开始)差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2」。
none
The keyword ‘none’ computes to ‘0 0 auto’.
关键字「none」的计算值为「0 0 auto」。

The initial values of the ‘flex’ components are equivalent to flex: 0 1 auto.

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

Note that the initial values of ‘flex-grow’ and ‘flex-basis’ are different from their defaults when omitted in the ‘flex’ shorthand. This so that the ‘flex’ shorthand can better accommodate the most common cases.

请注意「flex-grow」与「flex-basis」的初始值与他们在「flex」缩写被省略时的 默认值不同。这里的设计是为了让「flex」缩写在最常见的情景下比较好用。

A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <flex-basis> component with a unit or precede it by two flex factors.

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

7.2. flex」的常见值

This section is informative.

本章节不具备规范意义。

The list below summarizes the effects of the most common ‘flex’ values:

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

flex: 0 auto
flex: initial
Equivalent to ‘flex: 0 1 auto’. (This is the initial value.) Sizes the item based on the ‘width’/‘height’ properties. (If the item's main size property computes to ‘auto’, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum when there is insufficient space. The alignment abilities or auto’ margins can be used to align flex items along the main axis.
与「flex: 0 1 auto」相同。(这也就是初始值。)根据「width」/「height」属性决定元素的尺寸。(如果项目的主轴长度属性的计算值为「auto」,则会根据其内容来决定元素尺寸。)当剩余空间为正值时,伸缩项目无法伸缩,但当空间不足时,伸缩项目可收缩至其最小值。网页作者可以用对齐相关的属性以及margin」属性的「auto」值控制伸缩项目沿着主轴的对齐方式。
flex: auto
Equivalent to ‘flex: 1 1 auto’. Sizes the item based on the ‘width’/‘height’ properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either ‘flex: auto’, ‘flex: initial’, or ‘flex: none’, any positive free space after the items have been sized will be distributed evenly to the items with ‘flex: auto’.
与「flex: 1 1 auto」相同。根据「width」/「height」属性决定元素的尺寸,但是完全可以伸缩,会吸收主轴上剩下的空间。如果所有项目均为「flex: auto」、「flex: initial」或「flex: none」,则在项目尺寸决定后,剩余的正空间会被平分给是「flex: auto」的项目。
flex: none
Equivalent to ‘flex: 0 0 auto’. This value sizes the item according to the ‘width’/‘height’ properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.
与「flex: 0 0 auto」相同。根据「width」/「height」属性决定元素的尺寸,但是完全不可伸缩。其效果与「initial」类似,但即使在空间不够而溢出的情况下,伸缩项目也不能收缩。
flex: <positive-number>
Equivalent to ‘flex: <positive-number> 1 0px’. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.
与「flex: 1 0px」相同。该值使元素可伸缩,并将伸缩基准值设置为零,导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器里的所有项目都使用此模式,则它们的尺寸会正比于指定的伸缩比率。

By default, flex items won't shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the ‘min-width’ or ‘min-height’ property. (See Implied Minimum Size of Flex Items.)

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

7.3. 可伸缩性的部件

Individual components of flexibility can be controlled by independent longhand properties.

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

Authors are encouraged to control flexibility using the ‘flex’ shorthand rather than with component properties, as the shorthand correctly resets any unspecified components to accommodate common uses.

本规范鼓励网页作者使用「flex」缩写来控制可伸缩性,而不是使用单独的属性,因为「flex」缩写会在最常见的情景正确的重置未指定的部件值。

7.3.1. flex-grow」属性

名称: flex-grow
取值<number>
初始: 0
适用于: 伸缩项目
继承:
计算值: 同指定值
媒介: 视觉
动画: 是,除了在「0」与其他值之间转变以外。
正规顺序 照文法

The ‘flex-grow’ property sets the flex grow factor. Negative numbers are invalid.

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

7.3.2. flex-shrink」属性

名称: flex-shrink
取值<number>
初始: 1
适用于: 伸缩项目
继承:
计算值: 同指定值
媒介: 视觉
动画: 是,除了在「0」与其他值之间转变以外。
正规顺序 照文法

The ‘flex-shrink’ property sets the flex shrink factor. Negative numbers are invalid.

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

7.3.3. flex-basis」属性

名称: flex-basis
取值<'width'>
初始: auto
适用于: 伸缩项目
继承:
计算值: 除了将长度边为绝对长度以外,同指定值。
百分比: 相对与伸缩容器的内-主轴长度
媒介: 视觉
动画: 是,只要「width」是可动画的。
正规顺序 照文法

The ‘flex-basis’ property sets the flex basis. Negative lengths are invalid.

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

Except for auto, which retrieves the value of the main size property, ‘flex-basis’ is resolved the same way as width in horizontal writing modes [CSS21]: percentage values of ‘flex-basis’ are resolved against the flex item's containing block, i.e. its flex container, and if that containing block's size is indefinite, the result is undefined. Similarly, ‘flex-basis’ determines the size of the content box, unless otherwise specified such as by ‘box-sizing[CSS3UI].

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

8. 对齐

After a flex container's contents have finished their flexing and the dimensions of all flex items are finalized, they can then be aligned within the flex container.

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

The ‘margin’ properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. Flex items also respect the alignment properties from the Box Alignment spec, which allow easy keyword-based alignment of items in both the main axis and cross axis. These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.

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

While the alignment properties are defined in the Box Alignment spec, Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until Box Alignment is finished and defines their effect for other layout modes.

虽然对齐相关的属性是在《盒对齐》规范中定义的,但是《可伸缩盒布局》为避免对《盒对齐》产生依赖从而减缓标准的进步速度,在这里重新定义了相关属性。在《盒对齐》完成并定义这些属性用于其他类型的布局模式时的效果前,本标准定义的这些属性将只用于伸缩布局

8.1. 用「auto」边界对齐

This section is non-normative. The normative definition of how margins affect flex items is in the Flex Layout Algorithm section.

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

Auto margins on flex items have an effect very similar to auto margins in block flow:

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

Note that, if free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

需要注意的是,如果空间被自动外边距平均分配了,则对齐相关的属性在这一维度上没有作用,因为外边距偷走了伸缩后所有的可用空间。

One use of ‘auto’ margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.

一种比较常见的使用 「auto」作为「margin」属性的值的场景是,将可伸缩项分为多个独立的 “组”。以下示例展示了使用这一方案来实现一个常用的UI模式 ― 一个包含多个动作按钮的横条,其中一部分在左边,另一部分在右边。

Sample rendering of the code below. 下面是代码示例。
<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>

The figure below illustrates the difference in cross-axis alignment in overflow situations between using auto’ margins and using the alignment properties.

下图展示了在有溢出的情况下,使用「auto」值作为「margin」,以及使用对齐相关属性控制跨轴的对齐时的差异。

关于
伟大的作者大人
博客
关于
伟大的作者大人
博客
The items in the figure on the left are centered with margins, while those in the figure on the right are centered with ‘align-self’. If this column flex container was placed against the left edge of the page, the margin behavior would be more desirable, as the long item would be fully readable. In other circumstances, the true centering behavior might be better. 左图中的元素使用边距进行居中,而右图的则使用「align-self」进行居中。如果该列放在页面的左边,则边距的行为会更符合预期,因为那个较长的元素将保持完全可读。在其他情况下,真正的居中行为会产生更好的效果。

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

名称: justify-content
取值flex-start | flex-end | center | space-between | space-around
初始: flex-start
适用于: 伸缩容器
继承:
计算值: 同指定值
媒介: 视觉
动画:
正规顺序 照文法

The ‘justify-content’ property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

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

flex-start
Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.
伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目主轴起点边的外边距与该行在主轴起点的边对齐,同时所有后续的伸缩项目与其前一个项目对齐。
flex-end
Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.
伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目主轴终点边的外边距与该行在主轴终点的边对齐,同时所有前面的伸缩项目与其后一个项目对齐。
center
Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)
伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐,同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离(如果剩余空间是负数,则保持两端溢出的长度相等)。
space-between
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the empty space between any two adjacent items is the same.
伸缩项目会平均地分布在行里。如果剩余空间是负数,或该行只有一个伸缩项目,则此值等效于「flex-start」。在其它情况下,第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐,同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐,而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the empty space between any two adjacent flex items on the line is the same, and the empty space before the first and after the last flex items on the line are half the size of the other empty spaces.
伸缩项目会平均地分布在行里,两端保留一半的空间。如果剩余空间是负数,或该行只有一个伸缩项目,则该值等效于「center」。在其它情况下,伸缩项目在确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。
alt

An illustration of the five ‘justify-content’ keywords and their effects on a flex container with three colored items.通过伸缩容器中的三个不同颜色的项目,展示五种「justify-content」关键字的效果。

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

名称: align-items
取值flex-start | flex-end | center | baseline | stretch
初始: stretch
适用于: 伸缩容器
继承:
计算值: 同指定值
媒介: 视觉
动画:
正规顺序 照文法
名称: align-self
取值auto | flex-start | flex-end | center | baseline | stretch
初始: auto
适用于: flex items
继承:
计算值: 如果值为「auto」,则计算值为父元素的「align-items」值,否则为指定值。
媒介: 视觉
动画:
正规顺序 照文法

Flex items can be aligned in the cross axis of the current line of the flex container, similar to ‘justify-content’ but in the perpendicular direction. ‘align-items’ sets the default alignment for all of the flex container's items, including anonymous flex items. ‘align-self’ allows this default alignment to be overridden for individual flex items. (For anonymous flex items, ‘align-self’ always matches the value of ‘align-items’ on their associated flex container.)

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

If either of the flex item's cross-axis margins are ‘auto’, ‘align-self’ has no effect.

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

A value of auto for ‘align-self’ computes to the value of ‘align-items’ on the element's parent, or stretch if the element has no parent. The alignments are defined as:

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

flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
伸缩项目侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end
The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
伸缩项目侧轴终点边的外边距靠住该行在侧轴终点的边 。
center
The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)
伸缩项目的外边距盒在该行的侧轴上居中放置。(如果伸缩行的尺寸小于伸缩项目,则伸缩项目会向两个方向溢出相同的量)。
baseline

If the flex item's inline axis is the same as the cross axis, this value is identical to flex-start.

如果伸缩项目的行内轴与侧轴为同一条,则该值怀「flex-start」等效

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

其它情况下,该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列:首先将这些伸缩项目的基线进行对齐,随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。

stretch

If the cross size property of the flex item is ‘auto’, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by ‘min/max-width/height’.

如果侧轴长度属性的值为「auto」,则此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

Note that if the flex container's height is constrained this value may cause the contents of the flex item to overflow the item.

注意:如果伸缩伸缩的高度有限制,此可能导致伸缩项目的内容溢出该项目。

The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

伸缩项目在侧轴起点边的外边距会紧靠住该行在侧轴起点的边。

alt

An illustration of the five ‘align-items’ keywords and their effects on a flex container with four colored items.通过伸缩容器中的四个不同颜色的项目,展示五种「align-items」关键字效果

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

名称: align-content
取值: flex-start | flex-end | center | space-between | space-around | stretch
初始: stretch
适用于: 多行伸缩容器
继承:
计算值: 同指定值
媒介: 视觉
动画:
正规顺序 照文法

The ‘align-content’ property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how ‘justify-content’ aligns individual items within the main-axis. Note, this property has no effect when the flex container has only a single line. Values have the following meanings:

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

flex-start
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边,之后的每一行都紧靠住前面一行。
flex-end
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边,之前的每一行都紧靠住后面一行。
center
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐,保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。(如果剩下的空间是负数,则行的堆叠会向两个方向溢出的相等距离。)
space-between
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the empty space between any two adjacent lines is the same.
各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行,该值等效于「flex-start」。在其它情况下,第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边,最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边,剩余的行在保持两两之间的空间相等的状况下排列。
space-around
Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces.
各行在伸缩容器中平均分布,在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行,该值等效于「center」。在其它情况下,各行会在保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。
stretch
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.
各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于「flex-start」。在其它情况下,剩余空间被所有行平分,扩大各行的侧轴尺寸。

Note: Only flex containers with multiple lines ever have free space in the cross-axis for lines to be aligned in, because in a flex container with a single line the sole line automatically stretches to fill the space.

注意:只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐,因为仅包含一行的伸缩容器中,唯一的一行会自动伸展填充全部的空间。

alt

An illustration of the ‘align-content’ keywords and their effects on a multi-line flex container.展示「align-content」各关键字对多行的伸缩容器的效果。

8.5. Flex Baselines

The baselines of a flex container are determined as follows (after reordering with ‘order’):

一个伸缩容器的基线由以下步骤决定(顺序是经过「order」重新排序之后的顺序):

main-axis baseline
  1. If any of the flex items on the flex container's first line participate in baseline alignment, the flex container's main-axis baseline is the baseline of those flex items.

  2. Otherwise, if the flex container has at least one flex item, and its first flex item has a baseline parallel to the flex container's main axis, the flex container's main-axis baseline is that baseline.

  3. Otherwise, the flex container's main-axis baseline is synthesized from the first item's content box, or, failing that, from the flex container's content box.

cross-axis baseline
  1. If the flex container has at least one flex item, and its first flex item has a baseline parallel to the flex container's cross axis, the flex container's cross-axis baseline is that baseline.

  2. Otherwise, the flex container's cross-axis baseline is synthesized from the first item's content box, or, failing that, from the flex container's content box.

When calculating the baseline according to the above rules, if the box contributing a baseline has an ‘overflow’ value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.

When determining the baseline of a table cell, a flex container provides a baseline just as a line box or table-row does. [CSS21]

CSS 2.1 did not define the baseline of block or table boxes. It is expected that they will be defined consistent with those of table cells, as follows:

block
list-item

The inline-axis baseline of a block is the baseline of the first in-flow line box in the block, or the first in-flow block-level child in the block that has a baseline, whichever comes first. If there is no such line box or child, then the block has no baseline. For the purposes of finding a baseline, in-flow boxes with a scrolling mechanisms (see the ‘overflow’ property) must be considered as if scrolled to their origin position.

A block has no block-axis baseline.

table

The inline-axis baseline of a table box is the baseline of its first row. However, when calculating the baseline of an inline-block, table boxes must be skipped.

The block-axis baseline of a table is undefined.

9. 伸缩布局演算法

This section contains normative algorithms detailing the exact layout behavior of a flex container and its contents. The algorithms here are written to optimize readability and theoretical simplicity, and may not necessarily be the most efficient. Implementations may use whatever actual algorithms they wish, but must produce the same results as the algorithms described here.

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

This section is mainly intended for implementors. Authors writing web pages should generally be served well by the individual property descriptions, and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.

本章节的目标读者为实作者。除非某网页作者具有追根究柢的企图心,了解神秘的 CSS 布局的渴望,否则网页作者应该可以从各个单独的属性解释找到要查的东西。

For the purposes of these definitions, a definite size is one that can be determined without measuring content, i.e. is a <length>, a size of the initial containing block, or a <percentage> that is resolved against a definite size. An indefinite size is one that is not definite.

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

The following sections define the algorithm for laying out a flex container and its contents.

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

9.1. 起始设定

  1. Generate anonymous flex items as described in the Flex Items section.

    生成无名伸缩项目:《伸缩项目》小节的描述。

  2. Re-order the flex items and absolutely positioned flex container children according to their ‘order’. The elements with the lowest (most negative) ‘order’ values are first in the ordering. If multiple elements share an ‘order’ value, they're ordered by document order. This affects the order in which the elements generate boxes in the box-tree, and how the rest of this algorithm deals with the generated flex items.

    根据「order」重新排序伸缩项目。有最小(负值最大)「order」的伸缩项目排在第一个。若有多个项目有相同的「order」值,这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序,也影响了后面的演算法如何处理各项目。

9.2. 决定一行长度

  1. Determine the available main and cross space for the flex items. For each dimension, if that dimension of the flex container is a definite size, use that; otherwise, subtract the flex container's margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

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

  2. Determine the flex base size and hypothetical main size of each item:

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

    The hypothetical main size is the item's flex base size clamped according to its min and max main size properties.

    项目的伸缩基准长度截至其最大、最小值(透过最大、最小主轴长度属性)即为假定主轴长度

  3. Determine the main size of the flex container using its main size property. In this calculation, the min content main size of the flex container is the maximum of the flex container's items' min-content size contributions, and the max content main size of the flex container is the sum of the flex container's items' max-content size contributions. The min-content/max-content main size contribution of an item is its outer hypothetical main size when sized under a min-content/max-content constraint (respectively). For this computation, ‘auto’ margins on flex items are treated as ‘0’.

    决定伸缩容器的主轴长度:使用其主轴长度属性。在本计算中,伸缩容器的最小内容主轴长度是所有伸缩容器里伸缩项目的「最小内容长度贡献」的最大值,伸缩容器的最大内容主轴长度是所有伸缩容器里伸缩项目的「最大内容长度贡献」的和。一个项目的「最小/最大内容长度贡献」是当项目以最小内容或最大内容限制决定大小时,项目的外-假定主轴长度。在这个计算中,使用者代理会将「auto」边界视为「0」。

9.3. 决定主轴长度

  1. Collect flex items into flex lines:

    搜集伸缩项目成伸缩行:

  2. Resolve the flexible lengths of all the flex items to find their used main size (see section 9.7.).

    决定可伸缩长度决定所有伸缩项目的可伸缩长度以找到项目主轴长度的使用值。

9.4. 决定侧轴长度

  1. Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating ‘auto’ as ‘fit-content’.

    决定每个项目的假定侧轴长度将「auto」当作「fit-content」并使用主轴长度的使用值与可用空间进行布局以找到假定侧轴长度。

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

    If the flex container has only a single line (even if it's a multi-line flex container), the cross size of the flex line is the flex container's inner cross size.

    若伸缩容器仅有单一行(尽管容器是多行伸缩容器),则伸缩行的侧轴长度是伸缩容器的内-侧轴长度。

    Otherwise, for each flex line:

    否则,对于各伸缩行:

    1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose ‘align-self’ is baseline, and whose cross-axis margins are both non-‘auto’. Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge, and sum these two values.

      搜集所有行内轴与主轴平行,且「align-self」是「baseline」,且侧轴的边界都不为「auto」的所有项目。找出这些项目中基线与假定外-侧轴起点边的最大距离,找出项目基线与假定外-侧轴终点边的最大距离,并将两个值相加。

    2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.

      在所有没被前一个步骤搜集的项目中,找出最大的外-假定侧轴长度

    3. The used cross-size of the flex line is the larger of the numbers found in the previous two steps.

      伸缩行侧轴长度的使用值是前两步骤找到的值中较大的那一个。

  3. Handle ‘align-content: stretch’. If the flex container has a definite cross size, ‘align-content’ is stretch, and the sum of the flex lines' cross sizes is less than the flex container's inner cross size, increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container's inner cross size.

    处理「align-content: stretch」。若伸缩容器具有明确的侧轴长度,且「align-content」为「stretch」,且伸缩行侧轴长度的总和小于伸缩容器的内-侧轴长度,则给各伸缩行增加相同的侧轴长度,使得侧轴长度的总和刚好与伸缩容器的内-侧轴长度相等。

  4. Collapse ‘visibility:collapse’ items. If any flex items have ‘visibility: collapse’, note the cross size of the line they're in as the item's strut size, and restart layout from the beginning.

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

    In this second layout round, when collecting items into lines, treat the collapsed items as having zero main size. For the rest of the algorithm following that step, ignore the collapsed items entirely (as if they were ‘display:none’) except that after calculating the cross size of the lines, if any line's cross size is less than the largest strut size among all the collapsed items in the line, set its cross size to that strut size.

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

    Skip this step in the second layout round.

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

  5. Determine the used cross size of each flex item. If a flex item has ‘align-self: stretch’, its cross size property is ‘auto’, and neither of its cross-axis margins are ‘auto’, the used outer cross size is the used cross size of its flex line, clamped according to the item's min and max cross size properties. Otherwise, the used cross size is the item's hypothetical cross size.

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

9.5. 主轴对齐

  1. Distribute any remaining free space. For each flex line:

    分配剩下的空间。分配剩下的空间。

    1. If the remaining free space is positive and at least one main-axis margin on this line is ‘auto’, distribute the free space equally among these margins. Otherwise, set all ‘auto’ margins to zero.

      若剩下的空间为正且在这行中至少有一个主轴边界是「auto」,将剩下的空间平均分配给这些边界。否则,将所有「auto」边界设为零。

    2. Align the items along the main-axis per ‘justify-content’.

      按照「justify-content」进行沿着主轴的项目对齐。

9.6. 侧轴对齐

  1. Resolve cross-axis ‘auto’ margins. If a flex item has ‘auto’ cross-axis margins:

    决定侧轴「auto」边界。 若某个伸缩项目有「auto」侧轴边界:

  2. Align all flex items along the cross-axis per ‘align-self’, if neither of the item's cross-axis margins are ‘auto’.

    沿着侧轴对齐所有的伸缩项目:若项目的两个侧轴边界都不为「auto」,按照「align-self」对齐该伸缩项目。

  3. Determine the flex container's used cross size:

    决定伸缩容器侧长度的使用值

  4. Align all flex lines per ‘align-content’.

    对齐所有伸缩行:按照「align-content」对齐所有伸缩行。

9.7. 决定可伸缩长度

To resolve the flexible lengths of the items within a flex line:

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

  1. Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. If the sum is less than the flex container's inner main size, use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor.

    决定使用哪个伸缩比例。先求目标行里所有项目外-假定主轴长度的总和。若总和小于伸缩容器的内主轴长度,则在本演算法之后的部份使用扩展比率。否则,使用收缩比率

  2. Size inflexible items. For any items that have a flex factor of zero, set their used main size to their hypothetical main size.

    决定不可伸缩项目的大小。对于任何伸缩比率为零的项目,设项目主轴长度的使用值为项目的假定主轴长度

  3. Check that you can distribute any space. If all the flex items on the line are either frozen or have a flex factor of zero, exit the algorithm.

    确认可否配置空间。若所有目标行里的伸缩项目都要不是被冻结要不是伸缩比率为零,则结束本演算法。

  4. Calculate free space. Sum the outer flex base sizes of all items on the line, and subtract this from the flex container's inner main size. This is the free space.

    计算可配置空间。先求目标行里所有项目外-伸缩基准长度的总和,将伸缩容器的内主轴长度剪掉总和,即为可配置空间。

  5. Distribute free space proportional to the flex factors. If the sign of the free space is positive and the algorithm is using the flex grow factor, or if the sign of the free space is negative and the algorithm is using the flex shrink factor, distribute the free space to each flexible item's main size in proportion to the item's flex factor:

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

    If the free space is positive
    若可配置空间为正
    Find the ratio of the item's flex grow factor to the sum of the flex grow factors of all items on the line. Set the item's main size to its flex base size plus a fraction of the free space proportional to the ratio.
    找出项目扩展比率与目标行里项目的扩展比率总和的比率。将项目的主轴长度设为伸缩基准长度加可配置空间里占有的部份(使用前面算出的比率)。
    If the free space is negative
    若可配置空间为负
    For every item on the line, multiply its flex shrink factor by its outer flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item's scaled flex shrink factor to the sum of the scaled flex shrink factors of all items on the line. Set the item's main size to its flex base size minus a fraction of the absolute value of the free space proportional to the ratio. Note this may result in a negative inner main size; it will be corrected in the next step.
    对于每一个在目标行的项目,将收缩比率乘上外-伸缩基准长度,将这个值记为正规化收缩比率。找出项目正规化收缩比率与目标行里项目的正规化收缩比率总和的比率。将项目的主轴长度设为伸缩基准长度减可配置空间里占有的部份(使用前面算出的比率)。请注意得到的内主轴长度可能是负的 ― 下一个步骤会校正这个问题。
  6. Fix min/max violations. Clamp each item's main size by its min and max main size properties. If the item's main size was made smaller by this, it's a max violation. If the item's main size was made larger by this, it's a min violation.

    修复最大、最小违规。将项目的主轴长度截至其最大、最小值(透过主轴长度属性)。若项目的主轴长度变小,则这是最大违规。若项目的主轴长度变大,则这是最小违规。

  7. The total violation is the sum of the adjustments from the previous step (clamped size - unclamped size). If the total violation is:

    总违规事前一个步骤所有调整的总和(截至其最大、最小后的长度 - 未截至其最大、最小后长度)。若总违规为:

    Zero
    Exit the algorithm.
    离开演算法
    Positive
    Freeze all the items with min violations, reset all other items to their size upon entering this algorithm, and return to step 2 of this algorithm.
    冻结所有最小违规,重设所以其它项目到进入本演算法的大小,并回到本演算法的步骤 2。
    Negative
    Freeze all the items with max violations, reset all other items to their size upon entering this algorithm, and return to step 2 of this algorithm.
    冻结所有最大违规,重设所以其它项目到进入本演算法的大小,并回到本演算法的步骤 2。

10. Fragmenting Flex Layout

Flex containers can break across pages between items, between lines of items (in multi-line mode), and inside items. The ‘break-*’ properties apply to flex containers as normal for block-level or inline-level boxes. This section defines how they apply to flex items and elements inside flex items.

The following breaking rules refer to the fragmentation container as the “page”. The same rules apply to any other fragmenters. (Substitute “page” with the appropriate fragmenter type as needed.) See the CSS3 Fragmentation Module [CSS3-BREAK]. For readability, in this section the terms "row" and "column" refer to the relative orientation of the flex container with respect to the block flow direction of the fragmentation context, rather than to that of the flex container itself.

The exact layout of a fragmented flex container is not defined in this level of Flexible Box Layout. However, breaks inside a flex container are subject to the following rules:

10.1. Sample Flex Fragmentation Algorithm

This informative section presents a possible fragmentation algorithm for flex containers. Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group.

This algorithm assumes that pagination always proceeds only in the forward direction; therefore, in the algorithms below, alignment is mostly ignored prior to pagination. Advanced layout engines may be able to honor alignment across fragments.

Single-line column flex container
  1. Run the flex layout algorithm (without regards to pagination) through Cross Sizing Determination.

  2. Lay out as many consecutive flex items or item fragments as possible (but at least one or a fragment thereof), starting from the first, until there is no more room on the page or a forced break is encountered.

  3. If the previous step ran out of room and the free space is positive, the UA may reduce the distributed free space on this page (down to, but not past, zero) in order to make room for the next unbreakable flex item or fragment. Otherwise, the item or fragment that does not fit is pushed to the next page. The UA should pull up if more than 50% of the fragment would have fit in the remaining space and should push otherwise.

  4. If there are any flex items or fragments not laid out by the previous steps, rerun the flex layout algorithm from Line Length Determination through Cross Sizing Determination with the next page's size and all the contents (including those already laid out), and return to the previous step, but starting from the first item or fragment not already laid out.

  5. For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.

It is the intent of this algorithm that column-direction single-line flex containers paginate very similarly to block flow. As a test of the intent, a flex container with ‘justify-content:start’ and no flexible items should paginate identically to a block with in-flow children with same content, same used size and same used margins.

Multi-line column flex container
  1. Run the flex layout algorithm with regards to pagination (limiting the flex container's maximum line length to the space left on the page) through Cross Sizing Determination.

  2. Lay out as many flex lines as possible (but at least one) until there is no more room in the flex container in the cross dimension or a forced break is encountered:

    1. Lay out as many consecutive flex items as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered. Forced breaks within flex items are ignored.

    2. If this is the first flex container fragment, this line contains only a single flex item that is larger than the space left on the page, and the flex container is not at the top of the page already, move the flex container to the next page and restart flex container layout entirely.

    3. If there are any flex items not laid out by the first step, rerun the flex layout algorithm from Main Sizing Determination through Cross Sizing Determination using only the items not laid out on a previous line, and return to the previous step, starting from the first item not already laid out.

  3. If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from Line Sizing Determination through Cross Sizing Determination with the next page's size and only the items not already laid out, and return to the previous step, but starting from the first item not already laid out.

  4. For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.

If a flex item does not entirely fit on a single page, it will not be paginated in multi-line column flex containers.

Single-line row flex container
  1. Run the entire flex layout algorithm (without regards to pagination), except treat any ‘align-self’ other than ‘start’ or ‘baseline’ as ‘start’.

  2. If an unbreakable item doesn't fit within the space left on the page, and the flex container is not at the top of the page, move the flex container to the next page and restart flex container layout entirely.

  3. For each item, lay out as much of its contents as will fit in the space left on the page, and fragment the remaining content onto the next page, rerunning the flex layout algorithm from Line Length Determination through Main-Axis Alignment into the new page size using all the contents (including items completed on previous pages).

    Any flex items that fit entirely into previous fragments still take up space in the main axis in later fragments.

  4. For each fragment of the flex container, rerun the flex layout algorithm from Cross-Axis Alignment to its finish. For all fragments besides the first, treat ‘align-self’ and ‘align-content’ as being ‘start’ for all item fragments and lines.

  5. If any item, when aligned according to its original ‘align-self’ value into the combined cross size of all the flex container fragments, would fit entirely within a single flex container fragment, it may be shifted into that fragment and aligned appropriately.

Multi-line row flex container
  1. Run the flex layout algorithm (without regards to pagination), through Cross Sizing Determination.

  2. Lay out as many flex lines as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered.

    If a line doesn't fit on the page, and the line is not at the top of the page, move the line to the next page and restart the flex layout algorithm entirely, using only the items in and following this line.

    If a flex item itself causes a forced break, rerun the flex layout algorithm from Main Sizing Determination through Main-Axis Alignment, using only the items on this and following lines, but with the item causing the break automatically starting a new line in the line breaking step, then continue with this step. Forced breaks within flex items are ignored.

  3. If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from Line Length Determination through Main-Axis Alignment with the next page's size and only the items not already laid out. Return to the previous step, but starting from the first line not already laid out.

  4. For each fragment of the flex container, continue the flex layout algorithm from Cross Axis Alignment to its finish.

11. Conformance

11.1. Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

11.2. Conformance classes

Conformance to CSS Flexible Box Layout Module is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to CSS Flexible Box Layout Module if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to CSS Flexible Box Layout Module if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by CSS Flexible Box Layout Module by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to CSS Flexible Box Layout Module if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

11.3. Partial implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

11.4. Experimental implementations

To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.

11.5. Non-experimental implementations

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group's website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

11.6. CR exit criteria

For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:

independent
each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.
interoperable
passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.
implementation
a user agent which:
  1. implements the specification.
  2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or “nightly build”). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
  3. is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward).

The specification will remain Candidate Recommendation for at least six months.


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. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[CSS3-BREAK]
Rossen Atanassov; Elika J. Etemad. CSS Fragmentation Module Level 3. 23 August 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-break-20120823/
[CSS3-WRITING-MODES]
Elika J. Etemad; Koji Ishii. CSS Writing Modes Module Level 3. 1 May 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

Other references

[CSS3UI]
Tantek Çelik. CSS Basic User Interface Module Level 3 (CSS3 UI). 17 January 2012. W3C Working Draft. (Work in progress.) URL: 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. 28 August 2012. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-values-20120828/
[HTML40]
Ian Jacobs; David Raggett; Arnaud Le Hors. HTML 4.0 Specification. 24 April 1998. W3C Recommendation. URL: http://www.w3.org/TR/1998/REC-html40-19980424

Changes

The following significant changes were made since the 21 September 2012 Candidate Recommendation:

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