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…
”
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:
Calculation of the static position of absolutely-positioned flex
items.
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 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：
block layout, designed for laying out documents
块布局 ― 为了呈现文档而设计出来的布局模式
inline layout, designed for laying out text
行内布局 ― 为了呈现文本而设计出来的布局模式
table layout, designed for laying out 2D data in a tabular format
表格布局 ― 为了用格子呈现 2D 数据而设计出来的布局模式
positioned layout, designed for very explicit positioning without much
regard for other elements in the document
定位布局 ― 为了非常直接地定位元素而设计出来的布局模式，定位元素基本与其他元素毫无关
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 应用与复杂的页面所需要的。一个伸缩容器的内容：
can be laid out in any
flow
direction
(leftwards, rightwards, downwards, or even upwards!)
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:
The catalog uses flex layout to lay out rows of items horizontally,
and to ensure that items within a row are all equal-height. Each entry
is then itself a column flex container, laying out its contents
vertically.
Within each entry, the source document content is ordered logically
with the title first, followed by the description and the photo. This
provides a sensible ordering for speech rendering and in non-CSS
browsers. For a more compelling visual presentation, however, ‘
order
’ is used to pull
the image up from later in the content to the top, and ‘
align-self
’ is used
to center it horizontally.
在每一个商品栏里，源码里的内容以逻辑顺序排列：品名、叙述、相片，这为语音、非 CSS 浏览器提供了一个恰当的顺序。在一个视觉浏览器上，可以用「
order
」属性来把相片从内容的后面挪到顶部，并用「
align-self
」将相片水平置中。
An
‘
auto
’
margin
above the purchase button forces it to the bottom within each
entry box, regardless of the height of that item's description.
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.
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.
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.
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.
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 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
.
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:
伸缩容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。特别是：
all of the ‘
column-*
’ properties in the
Multicol module have no effect on a flex container.
多栏模组的所有「
column-*
」属性在伸缩容器上没有作用。
‘
float
’ and ‘
clear
’ have no effect on a
flex item
.
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.
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 ‘
’.
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.
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.
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
.
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.
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
」，则用户代理必须将绝对定位子元素在
主轴起点
边的外边或是在
侧轴起点
边的外边（在垂直轴上的那一个）定位到
静态位置
。
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.
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
.
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.
Though collapsed flex items aren't rendered, they do appear in the
formatting
structure
. Therefore, unlike on ‘
’ 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.
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
@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>
<article id="main">
Interesting Stuff to Read
</article>
<li id="nav-about"><a href="#nav-about">About</a>
<li id="nav-projects"><a href="#nav-projects">Projects</a>
<li><a href="…">Art</a>
<li><a href="…">Architecture</a>
<li><a href="…">Music</a>
<li id="nav-interact"><a href="#nav-interact">Interact</a>
<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.
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 ‘
’ 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.)
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]
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.
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.)
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.
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.
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.
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
.
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
.
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.
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
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.
Some examples of valid flows in an English (left-to-right, horizontal
writing mode) document:
一些合法伸缩流的例子：
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 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
」属性可以用来改变这个顺序。
The ‘
order
’
property controls the order in which flex items appear within their flex
container, by assigning them to ordinal groups.
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.
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
」让这种布局轻而易举。以下面的页面程式码草图与预期布局为例：
#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:
A
single-line
flex container lays out all
of its children in a single line, even if that would cause its contents
to overflow.
单行
的伸缩容器会将其所有子元素在单独的一行上进行布局，即便这可能导致内容溢出。
A
multi-line
flex container breaks its
flex items
across multiple lines, similar to
how text is broken onto a new line when it gets too wide to fit on the
existing line. When additional lines are created, they are stacked in the
flex container along the
cross axis
according to the ‘
flex-wrap
’ property. Every line contains at
least one
flex item
, unless the flex
container itself is completely empty.
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」关键字），伸缩容器会多创建一个伸缩行来放置最后一个项目。
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.
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
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.
This <number> component sets ‘flex-grow’ longhand 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’.
This
<number>
component sets ‘
flex-shrink
’
longhand
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.
This component, which takes the same values as the ‘
width
’ property, sets the ‘
flex-basis
’
longhand
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.
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
」。
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
.
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.
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
.
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.
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.
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
.)
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
.
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]
.
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.
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.
Overflowing elements ignore their auto margins and overflow in the
end/foot direction.
在已要溢出的元素上，自动外边距没有作用，元素会往 “尾”／“脚” 边溢出。
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模式 ― 一个包含多个动作按钮的横条，其中一部分在左边，另一部分在右边。
下图展示了在有溢出的情况下，使用「
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
」进行居中。如果该列放在页面的左边，则边距的行为会更符合预期，因为那个较长的元素将保持完全可读。在其他情况下，真正的居中行为会产生更好的效果。
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.
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 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.
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.)
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 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
」。在其它情况下，
伸缩项目
在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。
An illustration of the five ‘
justify-content
’ keywords and their effects
on a flex container with three colored items.
通过伸缩容器中的三个不同颜色的项目，展示五种「
justify-content
」关键字的效果。
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:
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.)
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.
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.
An illustration of the five ‘
align-items
’
keywords and their effects on a flex container with four colored items.
通过伸缩容器中的四个不同颜色的项目，展示五种「
align-items
」关键字效果
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:
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.
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.
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.)
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.
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.
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.
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.
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.
), size the item under that
constraint. The
flex base size
is
the item's resulting main size.
若伸缩基准值是「
auto
」又或伸缩基准值取决于项目的可用空间，且伸缩容器以最小内容或最大内容限制决定大小（例：进行
自动表格布局
的时候
[CSS21]
），则也使用该限制决定项目的大小。
伸缩基准长度
为这个过程在主轴最后的大小。
Otherwise, lay out the item into the available space using its flex
basis in place of its main size, and treating ‘
auto
’ as ‘
max-content
’.
The
flex base size
is the item's
resulting main size.
否则，使用项目的伸缩基准值当作主轴长度，并将「
auto
」视为是「
max-content
」之后，在可用空间里进行布局。
伸缩基准长度
为这个过程在主轴最后的大小。
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.
决定主轴长度
Collect flex items into flex
lines:
搜集伸缩项目成伸缩行：
If the flex container is single-line, collect all the flex items
into a single flex line.
若伸缩容器为单行，则搜集所有弹性项目至单一个伸缩行。
Otherwise, starting from the first uncollected item, collect as
many consecutive flex items as will fit or until a forced break is
encountered (but collect at least one) into the flex container's inner
main size into a flex line. A break is forced wherever the CSS2.1
‘
page-break-before/after
’
[CSS21]
or the CSS3 ‘
break-before/after
’
[CSS3-BREAK]
properties
specify a fragmentation break.
Repeat until all flex items have been collected into flex lines.
重复直到收集了所有伸缩项目。
Note that items with zero main size will never start a
line unless they're the very first items in the flex container, or
they're preceded by a forced break. The "collect as many" line will
collect them onto the end of the previous line even if the last
non-zero item exactly "filled up" the line.
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
」并使用主轴长度的使用值与可用空间进行布局以找到假定侧轴长度。
计算各伸缩行的侧轴长度。
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.
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
」的所有项目。找出这些项目中基线与假定外-侧轴起点边的最大距离，找出项目基线与假定外-侧轴终点边的最大距离，并将两个值相加。
Among all the items not collected by the previous step, find the
largest outer
hypothetical cross
size
.
The used cross-size of the flex line is the larger of the numbers
found in the previous two steps.
伸缩行侧轴长度的使用值是前两步骤找到的值中较大的那一个。
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.
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.
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 ‘
’) 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
.
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.
主轴对齐
Distribute any remaining free
space.
For each flex line:
分配剩下的空间。
分配剩下的空间。
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
」边界设为零。
Resolve cross-axis ‘
auto
’ margins.
If a flex item has ‘
auto
’ cross-axis margins:
决定侧轴「
auto
」边界。
若某个伸缩项目有「
auto
」侧轴边界：
If its outer cross size (treating those ‘
auto
’ margins as zero) is less than the cross size
of its flex line, distribute the difference in those sizes equally to
the ‘
auto
’ margins.
若其（将「
auto
」边界视为零）外-侧长度小于其伸缩行的侧长度，将长度的差异平均分配给「
auto
」边界。
Otherwise, if the start or head margin (whichever is in the cross
axis) is ‘
auto
’, set it to zero; set the
opposite margin so that the outer cross size of the item equals the
cross size of its flex line.
否则，若始或头边界（在侧轴那边的那一个）是「
auto
」，将之设为零 ― 将相反边的边界设成一个会让项目的外侧长度等于其伸缩行的侧长度的边界。
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
」对齐该伸缩项目。
Determine the flex container's used
cross size:
决定伸缩容器侧长度的使用值
If the cross size property is a
definite
size, use that.
To resolve the flexible lengths of the items within a flex line:
使用以下步骤决定伸缩行里项目的可伸缩长度：
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
.
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.
确认可否配置空间。
若所有目标行里的伸缩项目都要不是被冻结要不是伸缩比率为零，则结束本演算法。
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.
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:
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.
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.
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.
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:
In a row flex container, the ‘
break-before
’ and ‘
break-after
’ properties on flex items are
propagated to the flex line. The ‘
break-before
’ property on the first line and the
‘
break-after
’ property on the last line
are propagated to the flex container.
In a column flex container, the ‘
break-before
’ property on the first item and the
‘
break-after
’ property on the last item
are propagated to the flex container. Forced breaks on other items are
applied to the item itself.
A forced break inside a flex item effectively increases the size of
its contents; it does not trigger a forced break inside sibling items.
When a flex container is continued after a break, the space available
to its
flex items
(in the block flow
direction of the fragmentation context) is reduced by the space consumed
by flex container fragments on previous pages. The space consumed by a
flex container fragment is the size of its content box on that page. If
as a result of this adjustment the available space becomes negative, it
is set to zero.
If the first fragment of the flex container is not at the top of the
page, and some of its flex items don't fit in the remaining space on the
page, the entire fragment is moved to the next page.
When a
multi-line
colum flex
container breaks, each fragment has its own "stack" of flex lines, just
like each fragment of a multi-column element has its own row of column
boxes.
Aside from the rearrangement of items imposed by the previous point,
UAs should attempt to minimize distortation of the flex container with
respect to unfragmented flow.
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.
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.
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.
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.
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
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
.
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:
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.
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.
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.
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.
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
Run the entire flex layout algorithm (without regards to
pagination), except treat any ‘
align-self
’ other than ‘
start
’ or ‘
baseline
’ as ‘
start
’.
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.
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.
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.
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.
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.
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.
For each fragment of the flex container, continue the flex layout
algorithm from
Cross Axis Alignment
to
its finish.
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:
renderer
that interprets the semantics of a style sheet and renders documents that
use them.
authoring tool
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.
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:
implements the specification.
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.
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.
