Title: CSS Flexible Box Layout Module Level 1
Shortname: css-flexbox
Level: 1
Status: ED
Work Status: Testing
Group: csswg
ED: https://drafts.csswg.org/css-flexbox/
TR: https://www.w3.org/TR/css-flexbox-1/
Previous Version: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/
Previous Version: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181108/
Previous Version: https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/
Previous Version: https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/
Previous Version: https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/
Previous Version: https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
Previous Version: https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
Previous Version: https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
Previous Version: https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Previous Version: https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/
Previous Version: https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
Previous Version: https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/
Previous Version: https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
Previous Version: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
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.
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
Former Editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Former Editor: Neil Deakin, Mozilla Corporation, enndeakin@gmail.com
Former Editor: Ian Hickson, formerly of Opera Software, ian@hixie.ch
Former Editor: David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
!Issues List: https://drafts.csswg.org/css-flexbox-1/issues
Ignored Terms: auto, first formatted line, first letter, static position
Ignored Vars: item’s own max-content, maximum min-content among all items
WPT Path Prefix: css/css-flexbox/
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:
* 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
* 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.
Overview
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 web apps and complex web pages often need.
The contents of a flex container:
* can be laid out in any flow direction
(leftwards, rightwards, downwards, or even upwards!)
* can have their display order reversed or
'order|rearranged' at the style layer
(i.e., visual order can be independent of source and speech order)
* can be laid out linearly along a single (main) axis or
wrapped into multiple lines along a secondary (cross) axis
* can “flex” their sizes
to respond to the available space
* can be aligned with respect to their container or each other on the secondary (cross)
* can be dynamically collapsed or uncollapsed
along the main axis while preserving the container's cross size
Here's an example of a catalog where each item has a title, a 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 are 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.
* 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.
<section id="deals">
<section class="sale-item">
<h1>Computer Starter Kit</h1>
<p>This is the best computer money can buy, if you don’t have much money.
<ul>
<li>Computer
<li>Monitor
<li>Keyboard
<li>Mouse
</ul>
<img src="images/computer.jpg"
alt="You get: a white computer with matching peripherals.">
<button>BUY NOW</button>
</section>
<section class="sale-item">
…
</section>
…
</section>
Computer Starter Kit
This is the best computer money can buy,
if you don't have much money.
Computer
Monitor
Keyboard
Mouse
Printer
Only capable of printing
ASCII art.
Paper and ink not included.
An example rendering of the code above.
Module interactions
This module extends the definition of the 'display' property [[!CSS2]],
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.
None of the properties defined in this module apply to the ''::first-line'' or ''::first-letter'' pseudo-elements.
The CSS Box Alignment Module
extends and supersedes the definitions of the alignment properties
('justify-content', 'align-items', 'align-self', 'align-content')
introduced here.
Value Definitions
This specification follows the CSS property definition conventions from [[!CSS2]]
using the value definition syntax from [[!CSS-VALUES-3]].
Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the CSS-wide keywords as their property value.
For readability they have not been repeated explicitly.
Flex Layout Box Model and Terminology
A flex container is the box generated by an element with a
computed 'display' of ''flex'' or ''inline-flex''.
In-flow 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 directions.
To make it easier to talk about flex layout,
this section defines a set of flex flow–relative terms.
The 'flex-flow' value and the writing mode
determine how these terms map
to physical directions (top/right/bottom/left),
axes (vertical/horizontal), and sizes (width/height).
An illustration of the various directions and sizing terms as applied to a ''row'' flex container.
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
The main size of a [=flex container=] or [=flex item=]
refers to its [=width=] or [=height=],
whichever is in the [=main dimension=].
Its main size property
is either its 'width' or 'height' property,
whichever is in the [=main dimension=].
Likewise, its min and
max main size properties
are its 'min-width'/'max-width' or 'min-height'/'max-height' properties,
whichever are in the main dimension,
and determine its min/max main size.
In [=flex layout=], the [=main size=] is controlled by the 'flex' property
rather than directly by the [=main size property=].
Note: This means any references to a flex item's used size in the [=main dimension=]
([=width=], [=height=], [=inline size=], [=block size=])
refers to its post-flexing [=main size=].
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 cross size of a [=flex container=] or [=flex item=]
refers to its [=width=] or [=height=],
whichever is in the [=cross dimension=].
Its cross size property
is either its 'width' or 'height' property,
whichever is in the [=cross dimension=].
Likewise, its min and
max cross size properties
are its 'min-width'/'max-width' or 'min-height'/'max-height' properties,
whichever are in the cross dimension,
and determine its min/max cross size.
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.
For example, 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. [[!CSS2]]
The 'overflow' property applies to flex containers.
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:
* 'float' and 'clear' do not create floating or clearance of flex item,
and do not take it out-of-flow.
* 'vertical-align' has no effect on a flex item.
* the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to flex containers,
and flex containers do not contribute a first formatted line or first letter
to their ancestors.
If an element's specified 'display' is ''inline-flex'',
then its 'display' property computes to ''flex''
in certain circumstances:
the table in CSS 2.1 Section 9.7
is amended to contain an additional row,
with ''inline-flex'' in the "Specified Value" column
and ''flex'' in the "Computed Value" column.
Flex Items
Loosely speaking, the flex items of a flex container
are boxes representing its in-flow contents.
Each in-flow child of a flex container
becomes a flex item,
and each contiguous sequence of child text runs
is wrapped in an anonymousblock containerflex item.
However, if the entire sequence of child text runs contains only
[=document white space characters=]
(i.e. characters that can be affected by the 'white-space' property)
it is instead not rendered (just as if its text nodes were ''display:none'').
anonymous-flex-item-001.html
anonymous-flex-item-002.html
anonymous-flex-item-003.html
anonymous-flex-item-004.html
anonymous-flex-item-005.html
anonymous-flex-item-006.html
Flex items determined from above code block
Note that the inter-element white space disappears:
it does not become its own flex item,
even though the inter-element text does get wrapped in an anonymous flex item.
Note also that the anonymous item's box is unstyleable,
since there is no element to assign style rules to.
Its contents will however inherit styles (such as font settings) from the flex container.
A flex item [=establishes an independent formatting context=] for its contents.
However, flex items themselves are flex-level boxes, not block-level boxes:
they participate in their container's flex formatting context,
not in a block formatting context.
Note: Authors reading this spec may want to
skip past the following box-generation and static position details.
If the [=computed value|computed=] 'display' value of an element's nearest ancestor element
(skipping ''display:contents'' ancestors)
is ''flex'' or ''inline-flex'',
the element's own 'display' value is [=blockified=].
(See CSS2.1§9.7 [[!CSS2]]
and [[css-display-3#transformations]]
for details on this type of 'display' value conversion.)
Note: Blockification still occurs even when the ''flex'' or ''inline-flex'' element does not end up generating a [=flex container=] box,
e.g. when it is [=replaced element|replaced=]
or in a ''display: none'' subtree.
Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.
If such a box is a flex item,
it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous flex items with ''display: table-cell''
will become two separate ''display: block'' flex items,
instead of being wrapped into a single anonymous table.
In the case of flex items with ''display: table'',
the table wrapper box becomes the flex item,
so the 'align-self' property applies 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.
Absolutely-Positioned Flex Children
As it is out-of-flow,
an absolutely-positioned child of a flex container does not participate in flex layout.
The [=cross-axis=] edges of the [=static-position rectangle=]
of an absolutely-positioned child of a flex container
are the [=content edges=] of the [=flex container=]
The [=main-axis=] edges of the [=static-position rectangle=]
are where the [=margin edges=] of the child would be positioned
if it were the sole flex item in the flex container,
assuming both the child and the flex container
were fixed-size boxes of their used size.
(For this purpose,
''margin/auto'' margins are treated as zero.)
abspos/abspos-autopos-htb-ltr.html
abspos/abspos-autopos-htb-rtl.html
abspos/abspos-autopos-vlr-ltr.html
abspos/abspos-autopos-vlr-rtl.html
abspos/abspos-autopos-vrl-ltr.html
abspos/abspos-autopos-vrl-rtl.html
The effect of this is that if you set, for example,
''align-self: center;'' on an absolutely-positioned child of a flex container,
auto offsets on the child will center it in the flex container'scross axis.
Flex Item Margins and Paddings
The margins of adjacent flex items do not
collapse.
Percentage margins and paddings on flex items,
like those on block boxes,
are resolved against the inline size of their containing block,
e.g. left/right/top/bottom percentages
all resolve against their containing block’s width
in horizontal writing modes.
Auto margins expand to absorb extra space in the corresponding dimension.
They can be used for alignment,
or to push adjacent flex items apart.
See Aligning with auto margins.
Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks [[!CSS2]],
except that 'order'-modified document order is used in place of raw document order,
and 'z-index'
values other than ''z-index/auto'' create a stacking context
even if 'position' is ''static''
(behaving exactly as if 'position' were ''relative'').
Note: Descendants that are positioned outside a flex item still participate
in any stacking context established by the flex item.
Collapsed Items
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 flex item=] 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
may change the flex container's main size, but
is guaranteed to have no effect on its 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 ''display:none'' items [[!CSS2]],
effects that depend on a box 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 live rendering for example code below
Hover over the menu to the left:
each section expands to show its sub-items.
In order to keep the sidebar width (and this main area width) stable,
''visibility: collapse'' is used instead of ''display: none''.
This results in a sidebar that is always wide enough for the word “Architecture”,
even though it is not always visible.
@media (min-width: 60em) {
/* two column layout only when enough room (relative to default text size) */
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 targeted */
nav > ul > li:not(:target):not(:hover) > ul {
visibility: collapse;
}
To compute the size of the strut, flex layout is first performed with all items uncollapsed,
and then re-run with each [=collapsed flex 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: 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.)
Automatic Minimum Size of Flex Items
Note: The ''min-width/auto'' keyword,
representing an automatic minimum size,
is the new initial value of the 'min-width' and 'min-height' properties.
The keyword was previously defined in this specification,
but is now defined in the [[!CSS-SIZING-3|CSS Sizing]] module.
To provide a more reasonable default minimum size for flex items,
the used value of a main axisautomatic minimum size
on a flex item that is not a scroll container
is its [=content-based minimum size=];
for scroll containers the automatic minimum size is zero, as usual.
The content-based minimum size of a [=flex item=]
is the smaller of its [=specified size suggestion=] and its [=content size suggestion=]
if its [=specified size suggestion=] exists;
otherwise, the smaller of its [=transferred size suggestion=] and its [=content size suggestion=]
if the element is [=replaced element|replaced=]
and its [=transferred size suggestion=] exists;
otherwise its [=content size suggestion=].
In all cases, the size is clamped by the [=maximum size|maximum=] [=main size=] if it's definite.
The content size suggestion, specified size suggestion, and transferred size suggestion
used in this calculation account for the relevant min/max/preferred size properties
so that the content-based minimum size does not interfere with any author-provided constraints,
and are defined below:
specified size suggestion
If the item’s [=preferred size|preferred=] [=main size=] is definite and not [=automatic size|automatic=],
then the specified size suggestion is that size.
It is otherwise undefined.
transferred size suggestion
If the item has a [=preferred aspect ratio=]
and its [=preferred size|preferred=] [=cross size=] is definite,
then the transferred size suggestion is that size
(clamped by its [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] if they are definite),
converted through the aspect ratio.
It is otherwise undefined.
content size suggestion
The content size suggestion is the min-content size in the main axis,
clamped, if it has a [=preferred aspect ratio=],
by any definite [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] converted through the aspect ratio.
Note: The [=content-based minimum size=] is a type of [=intrinsic size contribution=],
and thus the cyclic percentage provisions in [[css-sizing-3#intrinsic-contribution]] apply.
For the purpose of calculating an intrinsic size of the box
(e.g. the box’s min-content size),
a content-based minimum size causes the box’s size in that axis to become indefinite
(even if e.g. its 'width' property specifies a definite size).
Note this means that percentages calculated against this size
will [=behave as auto=].
For any purpose other than calculating intrinsic sizes,
a [=content-based minimum size=]
(unlike an explicit ''min-content''/etc [=minimum size=])
does not force the box's size to become indefinite.
However, if a percentage resolved against the box's size before this minimum was applied,
it must be re-resolved against the new size after it is applied.
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.)
Ordering and Orientation
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.
Note: 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 [[css-display-3#order-accessibility]]
and the Flex Layout Overview for examples
that use this dichotomy to improve accessibility.
Advisement:
Authors must not use 'order' or the ''*-reverse'' values of 'flex-flow'/'flex-direction'
as a substitute for correct source ordering,
as that can ruin the accessibility of the document.
Flex Flow Direction: the 'flex-direction' property
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 in which flex items are laid out.
Same as ''column'',
except the main-start and main-end directions are swapped.
Note: 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.
Note: Depending on the value of 'justify-content',
the reverse values of 'flex-direction' can alter the initial scroll position
on [=flex containers=] that are also [=scroll containers=].
See [[css-align-3#overflow-scroll-position]].
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.
For the values that are not ''wrap-reverse'',
the cross-start direction is equivalent to either
the inline-start or block-start direction of the current writing mode
(whichever is in the cross axis)
and the cross-end direction is the opposite direction of cross-start.
When 'flex-wrap' is ''wrap-reverse'',
the cross-start and cross-end directions
are swapped.
Note: Depending on the value of 'align-content',
the ''wrap-reverse'' value of 'flex-wrap' can alter the initial scroll position
on [=flex containers=] that are also [=scroll containers=].
See [[css-align-3#overflow-scroll-position]].
Flex Direction and Wrap: the 'flex-flow' shorthand
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:
div { flex-flow: row; }
/* Initial value. Main-axis is inline, no wrapping.
(Items will either shrink to fit or overflow.) */
div { flex-flow: column wrap; }
/* Main-axis is block-direction (top to bottom)
and lines wrap in the inline direction (rightwards). */
div { flex-flow: row-reverse wrap-reverse; }
/* Main-axis is the opposite of inline direction
(right to left). New lines wrap upwards. */
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:
English
Japanese
flex-flow: row wrap; writing-mode: horizontal-tb;
flex-flow: row wrap; writing-mode: vertical-rl;
Item Reordering: the 'order' property
Flex items are, by default, displayed and laid out
in the same order as they appear in the source document,
which represents their logical ordering.
This same order is used in rendering to non-visual media
(such as speech),
in the default traversal order of sequential navigation modes
(such as cycling through links,
see e.g. tabindex [[HTML]]),
and when content is represented in non-CSS UAs.
The 'order' property can be used to change flex items’ ordering,
laying them out in [=order-modified document order=] instead,
in order to make their spatial arrangement on the 2D visual canvas
differ from their logical order in linear presentations
such as speech and sequential navigation.
See [[CSS-DISPLAY-3#order-property]].
[[!CSS-DISPLAY-3]]
Note: Since visual perception is two-dimensional and non-linear,
the desired box order is not always the same logical order
used by non-visual media and non-CSS UAs.
Advisement:
Authors must use 'order' only for visual, not logical, reordering of content.
Style sheets that use 'order' to perform logical reordering are non-conforming.
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:
This layout can be easily achieved with flex layout:
main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav { order: 1; width: 200px; }
main > aside { order: 3; width: 200px; }
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) {
/* Too narrow to support three columns */
main { flex-flow: column; }
main > article, main > nav, main > aside {
/* Return them to document order */
order: 0; width: auto;
}
}
(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)
Flex Lines
Flex items in a flex container are laid out and aligned
within flex lines,
hypothetical containers used for grouping and alignment by the layout algorithm.
A flex container can be either single-line or multi-line,
depending on the 'flex-wrap' property:
* A single-line flex container
(i.e. one with ''flex-wrap: nowrap'')
lays out all of its children in a single line,
even if that would cause its contents to overflow.
* A multi-line flex container
(i.e. one with ''flex-wrap: wrap'' or ''flex-wrap: wrap-reverse'')
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.
This example shows four buttons that do not fit side-by-side horizontally,
and therefore will wrap into multiple lines.
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.
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.
In a multi-lineflex container (even one with only a single line),
the cross size of each line
is the minimum size necessary to contain the flex items on the line
(after alignment due to 'align-self'),
and the lines are aligned within the flex container with the 'align-content' property.
In a single-lineflex container,
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-content-001.htm
align-content-002.htm
align-content-003.htm
align-content-004.htm
align-content-005.htm
align-content-006.htm
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 receive 20px of extra width,
each ending up 100px wide.
The remaining item is on a line of its own
and will stretch to the entire width of the line, i.e. 300px.
A rendering of the same as above,
but with the items all given ''flex: auto''.
Flexibility
The defining aspect of flex layout is the ability to make the flex items “flex”,
altering their width/height to fill the available space in the main dimension.
This is done with the 'flex' property.
A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container,
or shrinks them (proportional to their flex shrink factor) to prevent overflow.
A flex item is fully inflexible
if both its 'flex-grow' and 'flex-shrink' values are zero,
and flexible otherwise.
The 'flex' Shorthand
Name: flex
Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
Initial: 0 1 auto
Applies to: flex items
Inherited: no
Animation type: by computed value type
The 'flex' property specifies the components of a flexible size:
the flex factors
(grow and shrink)
and the flex basis.
When a box is a flex item,
'flex' is consulted instead of the main size property
to determine the main size of the box.
If a box is not a flex item,
'flex' has no effect.
Note: The initial values of the 'flex' longhands are equivalent to
flex: 0 1 auto.
This differs from their defaults when omitted in the 'flex' shorthand
(effectively ''1 1 0px'')
so that the 'flex' shorthand can better accommodate
the most common cases.
<<'flex-grow'>>
This <> 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''.
flex-001.htm
flex-003.htm
Flex values between 0 and 1 have a somewhat special behavior:
when the sum of the flex values on the line is less than 1,
they will take up less than 100% of the free space.
An item’s 'flex-grow' value
is effectively a request for some proportion of the free space,
with ''1'' meaning “100% of the free space”;
then if the items on the line are requesting more than 100% in total,
the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
However, if the items request less than the full amount
(such as three items that are each ''flex-grow: .25'')
then they'll each get exactly what they request
(25% of the free space to each,
with the final 25% left unfilled).
See [[#resolve-flexible-lengths]] for the exact details
of how free space is distributed.
This pattern is required for continuous behavior as 'flex-grow' approaches zero
(which means the item wants none of the free space).
Without this, a ''flex-grow: 1'' item would take all of the free space;
but so would a ''flex-grow: 0.1'' item,
and a ''flex-grow: 0.01'' item,
etc.,
until finally the value is small enough to underflow to zero
and the item suddenly takes up none of the free space.
With this behavior,
the item instead gradually takes less of the free space
as 'flex-grow' shrinks below ''1'',
smoothly transitioning to taking none of the free space at zero.
Unless this “partial fill” behavior is specifically what's desired,
authors should stick to values ≥ 1;
for example, using ''1'' and ''2'' is usually better
than using ''.33'' and ''.67'',
as they're more likely to behave as intended
if items are added, removed, or line-wrapped.
<<'flex-shrink'>>
This <> 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''.
flex-002.htm
flex-004.htm
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space.
This distributes negative space in proportion to how much the item is able to shrink,
so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced.
<<'flex-basis'>>
This component sets the 'flex-basis' longhand,
which specifies the flex basis:
the initial main size of the flex item,
before free space is distributed according to the flex factors.
<<'flex-basis'>> accepts the same values as the 'width' and 'height' properties
(except that ''flex-basis/auto'' is treated differently)
plus the ''content'' keyword:
auto
When specified on a flex item, the ''flex-basis/auto'' keyword
retrieves the value of the main size property as the used 'flex-basis'.
If that value is itself ''auto'', then the used value is ''flex-basis/content''.
content
Indicates an [=automatic size=]
based on the flex item’s content.
(This is typically equivalent to the max-content size,
but with adjustments to handle [=preferred aspect ratios=],
intrinsic sizing constraints,
and orthogonal flows;
see details in [[#layout-algorithm]].)
Note: This value was not present in the initial release of Flexible Box Layout,
and thus some older implementations will not support it.
The equivalent effect can be achieved by using ''flex/auto''
together with a main size ('width' or 'height') of ''width/auto''.
<<'width'>>
For all other values,
'flex-basis' is resolved the same way as for 'width' and 'height'.
When omitted from the 'flex' shorthand, its specified value is ''0''.
none
The keyword ''flex/none'' expands to ''0 0 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:
notice that the item with a flex factor of ''2'' grows twice as fast as the others.
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.
Basic Values of 'flex'
This section is informative.
The list below summarizes the effects of the four 'flex' values
that represent most commonly-desired effects:
''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 size when there is insufficient space.
The alignment abilities or auto margins
can be used to align flex items along the main axis.
''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: 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: <>''
Equivalent to ''flex: <> 1 0''.
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 [[#min-size-auto]].)
Components of Flexibility
Individual components of flexibility can be controlled by independent longhand properties.
Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
rather than with its longhand properties directly,
as the shorthand correctly resets any unspecified components
to accommodate common uses.
The 'flex-grow' property
Name: flex-grow
Value: <>
Initial: 0
Applies to: flex items
Inherited: no
Computed value: specified number
Animation type: by computed value type
Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
rather than with 'flex-grow' directly,
as the shorthand correctly resets any unspecified components
to accommodate common uses.
The 'flex-grow' property sets the flex grow factor
to the provided <>.
Negative values are not allowed.
The 'flex-shrink' property
Name: flex-shrink
Value: <>
Initial: 1
Applies to: flex items
Inherited: no
Computed value: specified value
Animation type: number
Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
rather than with 'flex-shrink' directly,
as the shorthand correctly resets any unspecified components
to accommodate common uses.
The 'flex-shrink' property sets the flex shrink factor
to the provided <>.
Negative values are not allowed.
The 'flex-basis' property
Name: flex-basis
Value: content | <<'width'>>
Initial: auto
Applies to: flex items
Inherited: no
Percentages: relative to the flex container's inner main size
Computed value: specified keyword or a computed <> value
Animation type: by computed value type
Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
rather than with 'flex-basis' directly,
as the shorthand correctly resets any unspecified components
to accommodate common uses.
The 'flex-basis' property sets the flex basis.
It accepts the same values as the 'width' and 'height' property, plus ''content''.
For all values other than ''flex-basis/auto'' and ''content'' (defined above),
'flex-basis' is resolved the same way as 'width' in horizontal writing modes [[!CSS2]],
except that if a value would resolve to ''width/auto'' for 'width',
it instead resolves to ''content'' for 'flex-basis'.
For example, 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 used value for 'flex-basis' is ''content''.
As another corollary,
'flex-basis' determines the size of the content box,
unless otherwise specified
such as by 'box-sizing' [[CSS3UI]].
Alignment
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 CSS Box Alignment,
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.
Note: While the alignment properties are defined in CSS Box Alignment [[!CSS-ALIGN-3]],
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 CSS Box Alignment Level 3 is finished
and defines their effect for other layout modes.
Additionally, any new values defined in the Box Alignment module
will apply to Flexible Box Layout;
in other words, the Box Alignment module, once completed,
will supersede the definitions here.
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:
* During calculations of flex bases and flexible lengths, auto margins are treated as ''0''.
* Prior to alignment via 'justify-content' and 'align-self',
any positive free space is distributed to auto margins in that dimension.
* Overflowing boxes ignore their auto margins and overflow in the end direction.
auto-margins-001.html
Note: 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 ''margin/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.
Sample rendering of the code below.
The figure below illustrates the difference in cross-axis alignment in overflow situations between
using auto margins
and using the alignment properties.
About
Authoritarianism
Blog
About
Authoritarianism
Blog
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.
Axis Alignment: the 'justify-content' property
Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around
Initial: flex-start
Applies to: flex containers
Inherited: no
Computed value: specified keyword
Animation type: discrete
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-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.
css-box-justify-content.html
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 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 spacing between any two adjacent items is the same.
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 spacing between any two adjacent flex items on the line is the same,
and the spacing between the first/last flex items and the flex container edges
is half the size of the spacing between flex items.
An illustration of the five 'justify-content' keywords and their effects on a flex container with three colored items.
Cross-axis Alignment: the 'align-items' and 'align-self' properties
Name: align-items
Value: flex-start | flex-end | center | baseline | stretch
Initial: stretch
Applies to: flex containers
Inherited: no
Computed value: specified keyword
Animation type: discrete
Name: align-self
Value: auto | flex-start | flex-end | center | baseline | stretch
Initial: auto
Applies to: flex items
Inherited: no
Computed value: specified keyword
Animation type: discrete
align-self-013.html
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.)
If either of the flex item's cross-axis margins are auto,
'align-self' has no effect.
Values have the following meanings:
auto
Defers cross-axis alignment control
to the value of 'align-items' on the parent box.
(This is the initial value of 'align-self'.)
align-self-007.html
align-self-008.html
align-self-009.html
align-self-011.html
align-self-012.html
flex-start
The cross-start margin edge of the flex item
is placed flush with the cross-start edge of the line.
align-items-002.htm
align-items-006.html
align-self-001.html
flex-end
The cross-end margin edge of the flex item
is placed flush with the cross-end edge of the line.
align-items-003.htm
align-self-002.html
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.)
align-items-001.htm
align-self-003.html
baseline
The flex item 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 item does not have a baseline in the necessary axis,
then one is synthesized
from the flex item’s border box.
align-items-004.htm
stretch
If the cross size property of the flex item computes to ''width/auto'',
and neither of the cross-axis margins are ''margin/auto'',
the flex item is stretched.
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-height'/'min-width'/'max-height'/'max-width'.
Note: 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.
align-items-005.htm
align-self-004.html
align-self-005.html
css-flexbox-height-animation-stretch.html
An illustration of the five 'align-items' keywords and their effects on a flex container with four colored items.
Packing Flex Lines: the 'align-content' property
Name: align-content
Value: flex-start | flex-end | center | space-between | space-around | stretch
Initial: stretch
Applies to: multi-lineflex containers
Inherited: no
Computed value: specified keyword
Animation type: discrete
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 on a single-lineflex container.
Values have the following meanings:
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 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
or there is only a single flex line in the flex container,
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 spacing between any two adjacent lines is the same.
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 spacing between any two adjacent lines is the same,
and the spacing between the first/last lines and the flex container edges
is half the size of the spacing between flex lines.
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 multi-lineflex containers
ever have free space in the cross-axis for lines to be aligned in,
because in a single-line flex container
the sole line automatically stretches to fill the space.
An illustration of the 'align-content' keywords and their effects on a multi-line flex container.
Flex Container Baselines
In order for a flex container to itself participate in baseline alignment
(e.g. when the flex container is itself a flex item in an outer flex container),
it needs to submit the position of the baselines that will best represent its contents.
To this end,
the baselines of a flex container are determined as follows
(after reordering with 'order',
and taking 'flex-direction' into account):
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. [[!CSS2]]
See [[css-writing-modes-3#intro-baselines]]
and [[css-align-3#baseline-rules]]
for more information on baselines.
Flex Layout Algorithm
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.
Note: 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.
The following sections define the algorithm for laying out a flex container and its contents.
Note: Flex layout works with the flex items in order-modified document order,
not their original document order.
Initial Setup
Generate anonymous flex items
as described in [[#flex-items]].
Line Length Determination
Determine the available main and cross space for the flex items.
For each dimension,
if that dimension of the flex container’s content box is a definite size, use that;
if that dimension of the flex container is being sized under a min or max-content constraint,
the available space in that dimension is that constraint;
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.
If the used flex basis is ''content'' or depends on its available space,
and the flex container is being sized under a min-content or max-content constraint
(e.g. when performing automatic table layout [[!CSS2]]),
size the item under that constraint.
The flex base size is the item's resulting main size.
Otherwise,
if the used flex basis is ''content'' or depends on its available space,
the available main size is infinite,
and the flex item's inline axis is parallel to the main axis,
lay the item out using
the rules for a box in an orthogonal flow [[!CSS3-WRITING-MODES]].
The flex base size is the item's max-content main size.
Note: This case occurs, for example,
in an English document (horizontal writing mode)
containing a column flex container
containing a vertical Japanese (vertical writing mode) flex item.
Otherwise,
size the item into the available space
using its used flex basis in place of its main size,
treating a value of ''content'' as ''width/max-content''.
If a cross size is needed to determine the main size
(e.g. when the flex item’s main size is in its block axis,
or when it has a [=preferred aspect ratio=])
and the flex item’s cross size is ''auto'' and not definite,
in this calculation use ''width/fit-content'' as the flex item’s cross size.
The flex base size is the item's resulting main size.
css-flexbox-img-expand-evenly.html
When determining the flex base size,
the item’s min and max main sizes are ignored
(no clamping occurs).
Furthermore, the sizing calculations that floor the content box size at zero
when applying 'box-sizing' are also ignored.
(For example, an item with a specified size of zero,
positive padding, and ''box-sizing: border-box''
will have an outer flex base size of zero--
and hence a negative inner flex base size.)
The hypothetical main size is the item's flex base size
clamped according to its used min and max main sizes
(and flooring the content box size at zero).
Determine the main size of the flex container
using the rules of the formatting context in which it participates.
The [=automatic block size=] of a [=block-level=] [=flex container=]
is its [=max-content size=].
The Block Layout spec should define this equivalency, but it doesn't exist yet.
Main Size Determination
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 consecutive items one by one
until the first time that the next collected item
would not fit into the flex container's [=inner size|inner=] main size
(or until a forced break is encountered,
see [[#pagination]]).
If the very first uncollected item wouldn't fit,
collect just it into the line.
For this step,
the size of a flex item is its [=outer size|outer=] hypothetical main size.
(Note: This can be negative.)
Repeat until all flex items have been collected into flex lines.
Note that the "collect as many" line will collect zero-sized flex items
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 as if it were an [=in-flow=] [=block-level box=]
with the used [=main size=] and the given available space,
treating auto as ''fit-content''.
Collect all the flex items whose inline-axis is parallel to the main-axis,
whose 'align-self' is ''align-self/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.
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 largest of the numbers found in the previous two steps and zero.
If the flex container is single-line,
then clamp the line's cross-size to be within
the container's computed min and max cross sizes.
Note that if CSS 2.1's definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
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 ''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.
Skip this step in the second layout round.
Determine the used cross size of each flex item.
If a flex item has ''align-self: stretch'',
its computed 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 used min and max cross sizes.
Otherwise,
the used cross size is the item's hypothetical cross size.
If the flex item has ''align-self: stretch'',
redo layout for its contents,
treating this used size as its definite cross size
so that percentage-sized children can be resolved.
Note that this step does not affect the main size of the flex item,
even if it has a [=preferred aspect ratio=].
Main-Axis Alignment
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.
Align the items along the main-axis per 'justify-content'.
Cross-Axis Alignment
Resolve cross-axis auto margins.
If a flex item has auto cross-axis margins:
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.
Otherwise,
if the block-start or inline-start 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.
Align all flex items along the cross-axis per 'align-self',
if neither of the item's cross-axis margins are auto.
Determine the flex container's used cross size
using the rules of the [=formatting context=] in which it participates.
If a content-based [=cross size=] is needed,
use the sum of the [=flex lines=]' [=cross sizes=].
Align all flex lines per 'align-content'.
Resolving Flexible Lengths
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.
Each item in the flex line has a target main size,
initially set to its [=flex base size=].
Each item is initially unfrozen
and may become frozen.
Note: An item’s [=target main size=] doesn’t change after freezing.
Size inflexible items.
Freeze,
setting its [=target main size=]
to its hypothetical main size…
Calculate initial free space.
Sum the outer sizes of all items on the line,
and subtract this from the flex container's inner main size.
For frozen items, use their outer target main size;
for other items, use their outer flex base size.
Loop:
Check for flexible items.
If all the flex items on the line are frozen,
free space has been distributed;
exit this loop.
Calculate the remaining free space
as for initial free space, above.
If the sum of the unfrozen flex items’ flex factors is less than one,
multiply the initial free space by this sum.
If the magnitude of this value is less than the magnitude of the remaining free space,
use this as the remaining free space.
If the [=remaining free space=] is non-zero,
distribute it proportional to the flex factors:
For every unfrozen item on the line,
find the ratio of the item's flex grow factor
to the sum of the flex grow factors of all unfrozen items on the line.
Set the item's target main size to its flex base size
plus a fraction of the remaining free space proportional to the ratio.
For every unfrozen item on the line,
multiply its flex shrink factor by its inner 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 unfrozen items on the line.
Set the item's target main size to its flex base size
minus a fraction of the absolute value of the remaining 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 non-frozen item's target main size by
its used min and max main sizes
and floor its content-box size at zero.
If the item's target main size was made smaller by this,
it's a max violation.
If the item's target main size was made larger by this,
it's a min violation.
Freeze over-flexed items.
The total violation is the sum of the adjustments from the previous step
∑(clamped size - unclamped size).
If the total violation is:
Zero
Freeze all items.
Positive
Freeze all the items with min violations.
Negative
Freeze all the items with max violations.
Note: This freezes at least one item,
ensuring that the loop makes progress and eventually terminates.
Although CSS Sizing [[!CSS-SIZING-3]] defines definite and indefinite lengths,
Flexbox has several additional cases where a length can be considered definite:
1. If the [=flex container=] has a [=definite=] [=main size=],
then the post-flexing [=main sizes=]
of its [=flex items=]
are treated as [=definite=].
2. If a [=flex item’s=] [=flex basis=] is [=definite=],
then its post-flexing [=main size=] is also [=definite=].
3. If a single-lineflex container has a definite cross size,
the [=automatic size|automatic=] [=preferred size|preferred=] [=outer size|outer=] [=cross size=]
of any stretchedflex items
is the flex container's inner cross size
(clamped to the flex item’s min and max cross size)
and is considered definite.
4. Once the cross size of a flex line has been determined,
the cross sizes of items in auto-sized flex containers
are also considered definite for the purpose of layout;
see step 11.
Note: This means that within [=flex layout=],
“definite” sizes can require performing layout.
This was done to allow percentages inside of [=flex items=]
to resolve where authors expected them to resolve.
Intrinsic Sizes
The intrinsic sizing of a flex container is used
to produce various types of content-based automatic sizing,
such as shrink-to-fit logical widths (which use the ''fit-content'' formula)
and content-based logical heights (which use the max-content size).
For these computations, auto margins on flex items are treated as ''0''.
See [[!CSS-SIZING-3]] for a definition of the terms in this section.
Flex Container Intrinsic Main Sizes
The max-contentmain size of a flex container
is, fundamentally, the smallest size the flex container can take
such that when flex layout is run with that container size,
each [=flex item=] ends up at least as large as
its [[#intrinsic-item-contributions|max-content contribution]],
to the extent allowed by the items’ flexibility.
It is calculated,
considering only non-[=collapsed=] [=flex items=],
by:
For each flex item,
subtract its outer flex base size from its [[#intrinsic-item-contributions|max-content contribution]] size.
If that result is positive,
divide it by the item's flex grow factor
if the flex grow factor is ≥ 1,
or multiply it by the flex grow factor
if the flex grow factor is < 1;
if the result is negative,
divide it by the item's scaled flex shrink factor
(if dividing by zero, treat the result as negative infinity).
This is the item's desired flex fraction.
Place all flex items into lines of infinite length.
Within each line,
find the greatest (most positive)
desired flex fraction
among all the flex items.
This is the line’s chosen flex fraction.
If the chosen flex fraction is positive,
and the sum of the line’s flex grow factors
is less than 1,
divide the chosen flex fraction by that sum.
If the chosen flex fraction is negative,
and the sum of the line’s flex shrink factors
is less than 1,
multiply the chosen flex fraction by that sum.
The flex container’s max-content size is
the largest sum (among all the lines)
of the afore-calculated sizes of all items within a single line.
The min-contentmain size of a single-line flex container
is calculated identically to the max-contentmain size,
except that the flex items’ [[#intrinsic-item-contributions|min-content contributions]] are used
instead of their [[#intrinsic-item-contributions|max-content contributions]].
However, for a multi-line container,
the [=min-content=] [=main size=] is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
of all the non-[=collapsed=] flex items in the flex container.
For this purpose,
each item's contribution
is capped by the item’s [=flex base size=] if the item is not growable,
floored by the item’s [=flex base size=] if the item is not shrinkable,
and then further clamped by the item's min and max main sizes.
Implications of this algorithm when the sum of flex is less than 1
The above algorithm is designed to give the correct behavior for two cases in particular,
and make the flex container’s size continuous as you transition between the two:
1. If all items are inflexible,
the flex container is sized to the sum of their flex base size.
(An inflexible flex base size basically substitutes for a 'width'/'height',
which, when specified, is what a max-content contribution is based on in Block Layout.)
2. When all items are flexible with flex factors ≥ 1,
the flex container is sized to the sum of the max-content contributions of its items
(or perhaps a slightly larger size,
so that every flex item is at least the size of its max-content contribution,
but also has the correct ratio of its size to the size of the other items,
as determined by its flexibility).
For example, if a flex container has a single flex item
with ''flex-basis: 100px;'' but a max-content size of ''200px'',
then when the item is ''flex-grow: 0'', the flex container (and flex item) is ''100px'' wide,
but when the item is ''flex-grow: 1'' or higher, the flex container (and flex item) is ''200px'' wide.
There are several possible ways to make the overall behavior continuous between these two cases,
but all of them have drawbacks.
We chose one we feel has the least bad implications;
unfortunately, it "double-applies" the flexibility in cases with [=flex factors=] that are < 1.
In the above example, if the item has ''flex-grow: .5'',
then the flex container ends up ''150px'' wide,
but the item then sizes normally into that available space,
ending up ''125px'' wide.
Even more involved notes on the specific behavior chosen
Principles:
1. Don't explode any sizes, whether growing or shrinking, as inputs approach zero.
2. When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
3. Items with a zero flex shouldn't affect the sizes at all.
4. Keep it continuous over variance of flex factors and item sizes.
5. Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
6. When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size.
To get these all to work together,
we have to apply some correction when either flex factors
or the sum of flex factors on a line
is < 1.
For shrink our behavior is somewhat easier;
since the explosive case of 0 shrink
results in a negative infinity desired fraction
which we'll never choose (since we always take the largest),
we can just apply the correction at the line level,
giving us double-application only when the sum is < 1.
For positives it's more complicated.
0 grow naively explodes into *positive* infinity,
which we'd choose,
so we need to apply the correction at the individual item level.
We do that by multiplying the space by the factor when factor is <1.
Leaving it at that would result in a double-application for items < 1
but sum >= 1,
but a *triple*-application when the sum is < 1.
To avoid *that* ridiculousness,
we apply a *reverse* correction when the sum is 1,
dividing by the sum instead.
This leaves us with a double correction in all cases for items with factors < 1.
We can't eliminate the double-applications entirely
without giving up other, more important principles
(in particular, principle 3 --
try to come up with rules that don't double-apply
when you have two items with ''flex-grow: .5'',
but also don't give a ''flex-grow: 0'' item any power
over a ''flex-grow: 1'' sibling;
you can't, as far as we can tell.)
Flex Container Intrinsic Cross Sizes
The min-content/max-contentcross size of a single-lineflex container
is the largest min-content contribution/max-content contribution (respectively)
of its flex items.
For a multi-lineflex container,
the behavior depends on whether it's a row or column flexbox:
: ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross-size=]
:: The min-content/max-contentcross size
is the sum of the flex line cross sizes
resulting from sizing the flex container
under a cross-axismin-content constraint/max-content constraint (respectively).
: ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross-size=]
:: The [=min-content=] [=cross size=]
is the largest [=min-content contribution=] among all of its [=flex items=].
Note: This heuristic effectively assumes a single flex line,
in order to guarantee that the [=min-content size=]
is smaller than the [=max-content size=].
If the flex container has a height constraint,
this will result in overflow,
but if the [=flex container=] is also a [=scroll container=],
it will at least be large enough to fit
any given column entirely within its [=scrollport=].
The [=max-content=] [=cross size=] is the sum of the [=flex line=] [=cross sizes=]
resulting from sizing the [=flex container=]
under a cross-axismax-content constraint,
using the largest max-contentcross-size contribution among the flex items
as the available space in the cross axis
for each of the flex items during layout.
Note: This heuristic gives a reasonable approximation
of the size that the flex container should be,
with each [=flex item=] laid out at its [=max-content contribution=] or larger,
and each flex line no larger than its largest flex item.
It's not a perfect fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.
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 the contents of flex items.
See the CSS Fragmentation Module
for more context [[!CSS3-BREAK]].
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
(interpreted using order-modified document order):
In a row flex container,
the 'break-before' and 'break-after' values on flex items
are propagated to the flex line.
The 'break-before' values on the first line
and the 'break-after' values on the last line
are propagated to the flex container.
Note: Break propagation
(like 'text-decoration' propagation)
does not affect computed values.
In a column flex container,
the 'break-before' values on the first item
and the 'break-after' values 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 none of its flex items fit in the remaining space on the page,
the entire fragment is moved to the next page.
When a multi-line column flex container breaks,
each fragment has its own "stack" of flex lines,
just like each fragment of a multi-column container
has its own row of column boxes.
Aside from the rearrangement of items imposed by the previous point,
UAs should attempt to minimize distortion of the flex container
with respect to unfragmented flow.
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.
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.
Run the entire flex layout algorithm (without regards to pagination),
except treat any 'align-self' other than ''align-self/flex-start'' or ''baseline''
as ''align-self/flex-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 ''align-self/flex-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.
Appendix A: Axis Mappings
This appendix is non-normative.
Axis Mappings for ''ltr'' + ''horizontal-tb'' Writing Mode (e.g. English)
This appendix is normative.
Advisement: These aliases are deprecated
and authors should not use them
unless their content needs to support actively-used legacy UAs.
For compatibility with general Web content,
UAs that are Web browsers must and other UAs may
implement the following [=legacy name aliases=]:
Alias
Standard
-webkit-align-content
align-content
-webkit-align-items
align-items
-webkit-align-self
align-self
-webkit-flex
flex
-webkit-flex-basis
flex-basis
-webkit-flex-direction
flex-direction
-webkit-flex-flow
flex-flow
-webkit-flex-grow
flex-grow
-webkit-flex-shrink
flex-shrink
-webkit-flex-wrap
flex-wrap
-webkit-justify-content
justify-content
-webkit-order
order
Acknowledgments
Thanks for feedback and contributions to
Erik Anderson,
Christian Biesinger,
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,
Peter Moulder,
Robert O'Callahan,
Christoph Päper,
Ning Rogers,
Peter Salas,
Elliott Sprehn,
Morten Stenshorne,
Christian Stockwell,
Ojan Vafai,
Eugene Veselov,
Greg Whitworth,
Boris Zbarsky.
Changes
This section documents the changes since previous publications.
Use the [=content edges=] of the [=flex container=]
for determining the [=static position rectangle=] of flex container children,
rather than doing extra layout work.
This will result in ignoring 'align-content' on the flex container,
but allow 'align-self' on the box itself to still take effect.
(Issue 5843)
Correctly ignore ''width/auto'' [=preferred sizes=]
in both min and max size contribution calculations.
(It was accidentally omitted from the max,
though it shows up correctly
in the changelog...)
(Issue 6455)
Moved the 'order' property definition to [[CSS-DISPLAY-3]].
See [[#order-property]] for remaining explanation.
(Issue 5865)
Made [=main size=] always [=definite=] for [=flex items=] with a [=definite=] [=flex basis=],
to match implementations.
(Issue 4311)
If the [=flex container=] has a [=definite=] [=main size=],
then the post-flexing [=main sizes=]
of its [=flex items=]
are treated as [=definite=]
a flex item’s post-flexing main size
is treated as definite,
even though it can rely on the indefinite sizes
of any flex items in the same line.
If a [=flex item’s=] [=flex basis=] is [=definite=],
then its post-flexing [=main size=] is also [=definite=].
Note: This means that within [=flex layout=],
“definite” sizes can require performing layout.
This was done to allow percentages inside of [=flex items=]
to resolve where authors expected them to resolve.
Updated value syntax in property definition tables
to use newer CSS bracketed range notation
reflecting the prose restrictions on negative values.
(Editorial.)
Updated aspect ratio terminology to use the term [=preferred aspect ratio=],
and clarify any uses that are specific to [=replaced elements=],
in order to accommodate forthcoming 'aspect-ratio' property.
Explicitly excluded [=collapsed flex items=]
from the [[#intrinsic-main-sizes|intrinsic main size calculations]].
(Issue 5985)
The max-contentmain size of a flex container
is the smallest size the flex container can take
while maintaining the [[#intrinsic-item-contributions|max-content contributions]] of its flex items,
insofar as allowed by the items’ own flexibility.
Considering only non-[=collapsed=] [=flex items=]:
However, for a multi-line container,
it is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
of all the non-[=collapsed=] flex items in the flex container.
Clarified that the [=flex base size=] calculations
rely on the used [=cross size=].
(Issue 3736)
… then the flex base size is calculated from
its used inner cross size
and the flex item’s intrinsic aspect ratio.
Slightly restructured the prose in [[#resolve-flexible-lengths]]
to fix errors.
(Issue 5179)
Clarified that “performing layout” means using the block-level layout rules.
(Issue 5188)
Determine the hypothetical cross size of each item
by performing layout as if it were an [=in-flow=] [=block-level box=]
with the used main size and the given available space …
Rewrote flex-contain cross-sizing step
to depend on the rules of whatever formatting context it's in,
rather than assuming block-layout rules.
(Issue 5190)
Determine the flex container's used cross size
using the rules of the [=formatting context=] in which it participates.
If a content-based [=cross size=] is needed,
use the sum of the [=flex lines=]' [=cross sizes=].
Otherwise,
use the sum of the flex lines' cross sizes,
clamped by the used min and max cross sizes
of the flex container.
Removed explicit mention of which box to use for calculating aspect-ratio,
to allow for behavior introduced by the new 'aspect-ratio' property in [[css-sizing-4]].
(Issue 5246)
then the flex base size is calculated from
its used inner cross size
and the flex item’s intrinsic aspect ratio.
Clarified that the [=content-based minimum size=] of a flex item
is a type of [=intrinsic size contribution=],
and thus impacted by associated rules in [[CSS-SIZING-3]].
(Issue 5665)
Note: The [=content-based minimum size=] is a type of [=intrinsic size contribution=],
and thus the provisions in [[css-sizing-3#intrinsic-contribution]] apply.
Redrafted the definition of [=content-based minimum size=]
for easier reading. (Editorial)
Added [[#webkit-aliases]] to document -webkit- aliases of flex layout properties
that are necessary for Web-compat.
(Issue 5634)
Rephrased blockification rules in terms of [=computed values=].
(Issue 4065)
Removed the option for flex-item block-axis margins and paddings
to be resolved against the block dimension;
they must be resolved against the inline dimension, as for blocks.
(Issue 2085)
Added some (effectively informative) prose and a cross-reference
to more clearly define ''flex-basis: content''.
Indicates automatic sizing an automatic size
based on the flex item’s content.
(It is typically equivalent to the max-content size,
but with adjustments to handle aspect ratios,
intrinsic sizing constraints,
and orthogonal flows;
see details in [[#layout-algorithm]].)
Moved the definition of the ''min-width/auto'' keyword for 'min-width' and 'min-height'
to [[!CSS-SIZING-3]].
The definition of what an automatic minimum size for flex items is remains here.
(Issue 1920,
Issue 2103)
Altered the computation of ''min-width/auto'' in 'min-width' and 'min-height'
such that it always computes to itself--
although its resolved value remains zero on CSS2 display types.
(Issue 2230,
Issue 2248)
Clarified that min/max clamping is according to the used value
of the min/max size properties--
which in the case of tables with ''table-layout/auto'' layout,
is floored by the table’s min-content size.
(Issue 2442)
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
(interpreted using order-modified document order):
In a row flex container,
the 'break-before' and 'break-after' values on flex items
are propagated to the flex line.
The 'break-before' values on the first line
and the 'break-after' values on the last line
are propagated to the flex container.
Note: Break propagation
(like 'text-decoration' propagation)
does not affect computed values.
For the purpose of calculating an intrinsic size of the element
(e.g. the element's min-content size),
this value a content-based minimum size
causes the element's size in that axis to become indefinite
(even if e.g. its 'width' property specifies a definite size).
To allow flex factors to actually represent absolute ratios of flex item sizes
as was originally intended (see various examples),
removed the flooring of content-box sizes at zero
for the purpose of finding the item’s flex base size,
since this type of ratio requires a flex base size of zero,
which would otherwise only be possible if margins, borders, and padding are also all zero.
(The flooring remains in effect,
alongside the min and max size constraints,
in calculating the hypothetical and final sizes of the item.)
(Issue 316)
When determining the flex base size,
the item’s min and max main size properties are ignored
(no clamping occurs).
Furthermore, the sizing calculations that floor the content box size at zero
when applying 'box-sizing' are also ignored.
(For example, an item with a specified size of zero,
positive padding, and ''box-sizing: border-box''
will have an outer flex base size of zero--
and hence a negative inner flex base size.)
The hypothetical main size is the item's flex base size
clamped according to its min and max main size properties
(and flooring the content box size at zero).
Fix min/max violations.
Clamp each non-frozen item's target main size by its min and max main size properties
and floor its content-box size at zero.
If the item's target main size was made smaller by this,
it's a max violation.
If the item's target main size was made larger by this,
To prevent empty flex items in shrink-to-fit containers
from collapsing to zero even when given a specified size,
the specified size is now accounted for in calculating
its max-content contribution in .
(Issue 1435)
Since at least two implementations ended up
allowing percentages inside flex items with indefinite flex basis to resolve anyway,
removed the condition requiring definite flex basis.
(Issue 1679)
For ease of implementation, ''align-self/auto'' value of 'align-self' now computes to itself always.
See related previous change
requiring this computation for absolutely-positioned elements.
(Issue 440,
Issue 644)
Computed value:
auto computes to parent's 'align-items' value; otherwise as specified
…
On absolutely positioned elements,
a value of ''align-self/auto'' computes to itself.
On all other elements, a value of ''align-self/auto'' for 'align-self'
computes to the value of 'align-items' on the element’s parent,
or ''align-self/stretch'' if the element has no parent.
Change flex items in orthogonal flows and flex items without a baseline
to both synthesize their alignment baseline from the flex item’s border box.
(Issue 373)
In the case of flex items 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.
Clarified that auto margins are treated as zero
for the purpose of calculating a absolutely-positioned flex container child’s static position.
(Issue 665)
For this purpose,
a value of ''align-self: auto'' is treated identically to ''align-self/start'',
and ''margin/auto'' margins are treated as zero.
Within each line,
find the largest max-content flex fraction
among all the flex items.
Add each item’s flex base size
to the product of its flex grow factor
(or scaled flex shrink factor, if the chosen max-content flex fraction was negative)
and the chosen max-content flex fraction,
then clamp that resulting item size according to by
the max and min main size propertyies.
Added missing edits for change
that made 'order' not apply to absolutely-positioned children of a flex container.
(Issue 1439)
The 'order' property controls the order in which
children of a flex container flex items
appear within the flex container,
by assigning them to ordinal groups.
…
Absolutely-positioned children of a flex container
are treated as having ''order: 0''
for the purpose of determining their painting order relative to flex items.
Unless otherwise specified by a future specification,
this property has no effect on boxes that are not
children of a flex containerflex items.
Take 'flex-direction' into account when determining first/last baseline of the flex container.
(Issue 995)
To this end,
the baselines of a flex container are determined as follows
(after reordering with 'order',
and taking 'flex-direction' into account):
Define ''align-content: space-between'' handling of a single flex line
as equivalent to ''align-content/start''.
(Issue 718)
Lines are evenly distributed in the flex container.
If the leftover free-space is negative
or there is only a single flex line in the flex container,
this value is identical to flex-start.
Tweaked final clarifying sentence of note about spatial navigation.
(Issue 1677)
User agents, including browsers, accessible technology, and extensions,
may offer spatial navigation features.
This section does not preclude respecting the 'order' property
when determining element ordering in such spatial navigation modes;
indeed it would need to be considered for such a feature to work.
However a UA that uses 'order' in determining sequential navigation,
but does not otherwise account for spatial relationships among elements
(as expressed by the various layout features of CSS including and not limited to flex layout),
is non-conforming.
But 'order' is not the only (or even the primary) CSS property
that would need to be considered for such a spatial navigation feature.
A well-implemented spatial navigation feature would need to consider
all the layout features of CSS that modify spatial relationships.
For the purpose of calculating an intrinsic size of the element
(e.g. the element's min-content size),
this value causes the element's size in that axis to become indefinite
(even if e.g. its 'width' property specifies a definite size).
Note this means that percentages calculated against this size
will be treated as ''height/auto''.
Nonetheless,
although this may require an additional layout pass to re-resolve percentages in some cases,
this value
(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS-SIZING-3]])
does not prevent the resolution of percentage sizes within the item.
Switched definite and indefinite to refer to the (more correct) definitions in [[!CSS-SIZING-3]]
instead of defining them inline in this module.
(Issue 10)
Abspos children of a flexbox no longer respond to the 'order' property.
(Issue 12)
Clarify that spatial navigation modes are allowed to handle 'order'.
(Issue 1)
User agents, including browsers, accessible technology, and extensions,
may offer spatial navigation features.
This section does not preclude respecting the 'order' property
when determining element ordering in such spatial navigation modes;
indeed it would need to be considered for such a feature to work.
However a UA that uses 'order' in determining sequential navigation,
but does not otherwise account for spatial relationships among elements
(as expressed by the various layout features of CSS including and not limited to flex layout),
is non-conforming.
Cross-reference an additional case of definiteness in
(Issue 2)
Once the cross size of a flex line has been determined,
items in auto-sized flex containers are also considered
definite for the purpose of layout; see step 11.
Improve wording for how unresolveable percentage flex basis values
transmute to ''content''.
(Issue 6)
For all values other than ''flex-basis/auto'' and ''content'' (defined above),
'flex-basis' is resolved the same way as 'width' in horizontal writing modes [[!CSS2]],
except that if a value would resolve to ''width/auto'' for 'width',
it instead resolves to ''content'' for 'flex-basis'.
For example, 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 the same as a main size of auto
(which in this case is treated as ''content'')
the used value for 'flex-basis' is ''content''.
Reworded definition of the ''min-width/auto'' value to be easier to understand.
(Issue 9)
On a flex item whose 'overflow' is ''overflow/visible'' in the main axis,
when specified on the flex item's main-axis min-size property,
the following table gives the minimum size …
specifies an automatic minimum size.
Revert 'flex' shorthand change
of omitted 'flex-basis' back to ''0'',
since that was a hacky way of solving an intrinsic size problem,
and isn't needed (and gives bad results)
given a correct implementation of [[#intrinsic-sizes]].
(Issue 13)
When omitted from the 'flex' shorthand, its specified value is ''0%''.
''flex: <positive-number>''
Equivalent to ''flex: <positive-number> 1 0%''.
Changed flex item determination to operate on each element directly,
and not on its anonymous wrapper box, if any.
(Issue 6)
'float' and 'clear' have no effect on a flex item,
'float' and 'clear' do not create floating or clearance of flex item,
and do not take it out-of-flow.
However, the 'float' property can still affect box generation
by influencing the 'display' property's computed value.
Some values of 'display' trigger the creation of anonymous boxes around the original box.
It's the outermost box—the direct child of the flex container box—that
becomes a flex item.
For example, given two contiguous child elements with ''display: table-cell'',
the anonymous table wrapper box generated around them [[!CSS2]]
becomes the flex item.
In the case of flex items 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.
Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.
If such a box is a flex item,
it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous flex items with ''display: table-cell''
will become two separate ''display: block'' flex items,
instead of being wrapped into a single anonymous table.
Defined that any size adjustment imposed by a box’s ''min-height/min-width: auto''
is consulted when percentage-sizing any of its contents.
(Issue 3)
In order to prevent cycling sizing,
the ''auto'' value of 'min-height' and 'max-height'
does not factor into the percentage size resolution of the box’s contents.
For example, a percentage-height block whose flex item parent has
''height: 120em; min-height: auto''
will size itself against ''height: 120em'' regardless of the impact
that 'min-height' might have on the used size of the flex item.
Although this may require an additional layout pass to re-resolve percentages in some cases,
the ''min-width/auto'' value of 'min-width' and 'min-height'
(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS-SIZING-3]])
does not prevent the resolution of percentage sizes within the item.
Correct intrinsic sizing rules to handle inflexible items.
(Issue 1)
This heuristic for ''column wrap'' flex containers
gives a reasonable approximation of the size that the flex container should be,
with each flex item ending up as min(item’s own max-content, maximum min-content among all items),
and each flex line no larger than its largest flex item.
It's not a perfect fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.
Add explicit conformance criteria on authoring tools
to keep presentation and DOM order in sync
unless author explicitly indicates a desire to make them out-of-sync.
(Issue 8)
In order to preserve the author's intended ordering in all presentation modes,
authoring tools—including WYSIWYG editors as well as Web-based authoring aids--
must reorder the underlying document source
and not use 'order' to perform reordering
unless the author has explicitly indicated that the underlying
document order (which determines speech and navigation order) should be
out-of-sync with the visual order.
For example, a tool might offer both drag-and-drop reordering of flex items
as well as handling of media queries for alternate layouts per screen size range.
Since most of the time, reordering should affect all screen ranges
as well as navigation and speech order,
the tool would perform drag-and-drop reordering at the DOM layer.
In some cases, however, the author may want different visual orderings per screen size.
The tool could offer this functionality by using 'order' together with media queries,
but also tie the smallest screen size's ordering to the underlying DOM order
(since this is most likely to be a logical linear presentation order)
while using 'order' to determine the visual presentation order in other size ranges.
This tool would be conformant, whereas a tool that only ever used 'order'
to handle drag-and-drop reordering
(however convenient it might be to implement it that way)
would be non-conformant.
Defined that an 'align-self' or 'justify-self' value of ''align-self/auto''
computes to itself on absolutely-positioned elements,
for consistency with future extensions of these properties in [[CSS-ALIGN-3]].
(Issue 5)
On absolutely positioned elements,
a value of ''align-self/auto'' computes to itself.
On all other elements, a A value of ''align-self/auto'' for 'align-self'
computes to the value of 'align-items' on the element’s parent,
or ''align-self/stretch'' if the element has no parent.
Revert change to make percentage margins and padding relative to their own axes;
instead allow both behaviors.
(Issue 11,
Issue 16)
Percentage margins and paddings on flex items are always resolved against their respective dimensions;
unlike blocks, they do not always resolve against the inline dimension of their containing block.
Percentage margins and paddings on flex items can be resolved against either:
their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
the inline axis (left/right/top/bottom percentages all resolve against width)
A user agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world
(no consensus among implementations, and no consensus within the CSSWG).
It is the CSSWG's intention that browsers will converge on one of the behaviors,
at which time the spec will be amended to require that.
Authors should avoid using percentages in paddings or margins on flex items entirely,
as they will get different behavior in different browsers.
Handle min/max constraints in sizing flex items.
Determine the available main and cross space for the flex items.
For each dimension,
if that dimension of the flex container’s content box is a definite size, use that;
if that dimension of the flex container is being sized under a min or max-content constraint,
the available space in that dimension is that constraint;
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.
Correct negation in flex container fragmentation rule:
previous definition implied ''break-inside: avoid'' behavior in all cases.
(Issue 5)
If the first fragment of the flex container is not at the top of the page,
and somenone of its flex items don't fit in the remaining space on the page,
the entire fragment is moved to the next page.
Clarifications
Miscellaneous minor editorial improvements and fixes to errors in examples.
Reverted ''flex-basis: auto'' to its original meaning.
Added ''flex-basis: content'' keyword to explicitly specify automatic content-based sizing.
(Issue 10)
Made applicability of 'align-content' depend on wrappability rather than number of resulting flex lines.
(Issue 4)
When a flex container has multiple lines,
In a multi-lineflex container (even one with only a single line),
the cross size of each line is the minimum size necessary [...]
When a flex container (even a multi-line one) has only one line,
In a single-lineflex container,
the cross size of the line is the cross size of the flex container,
and 'align-content' has no effect.
Note, this property has no effect
when the flex container has only a single line.
on a single-lineflex container.
Only flex containers with multiple linesmulti-lineflex containers
ever have free space in the cross-axis for lines to be aligned in,
because in a flex container with a single linesingle-line flex container
the sole line automatically stretches to fill the space.
If the flex container has only one flex line
(even if it's a multi-line flex container),
is single-line,
then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
Removed text that asserted forced breaking behavior,
replaced with reference to fragmentation section.
This resolves a conflict in the spec.
(Issue 18)
collect consecutive items one by one
until the first time that the next collected item would not fit into the flex container’s inner main size,
(or until a forced break is encountered, see [[#pagination]]).
[...]
A break is forced wherever the CSS2.1 'page-break-before'/'page-break-after' [[CSS2]]
or the CSS3 'break-before'/'break-after' [[CSS3-BREAK]] properties specify a fragmentation break.
For every unfrozen item on the line,
multiply its flex shrink factor by its outer inner flex base size,
and note this as its scaled flex shrink factor.
Remove the requirement that the flex basis be ''content'' for the specified size to be defined.
The specified size should always win if it is smaller than the intrinsic size.
This is particularly important to maintain author expectations for,
e.g. <img src="…" width=40 height=40 title="100x100 image">.
(Issue 25)
Remove the requirement that anonymous block creation (for things like ''display: table-cell'')
occur beforeflex item blockification.
(Instead, all children now blockify immediately,
consistent with abspos/float behavior.)
Restored normative status of note about table wrapper boxes normative;
it had been accidentally changed in the previous draft.
(Issue 2)
Removed references to 'display' property longhands,
since they will be removed from CSS Display Level 3.
Change wording to not imply an unnecessary layout pass.
(Issue 22)
Otherwise,
lay outsize the item into the available space
using its used flex basis in place of its main size,
treating a value of ''content'' as ''width/max-content''.
Renamed “clamped size” to “specified size” in the definition of ''min-width/height: auto''.
Fixed errors (missing negation, unspecified axis) in definition of ''min-height/min-width: auto''.
(Issues 11,
18,
30)
On a flex item whose 'overflow' is not ''overflow/visible'' in the main axis,
Expanded and rewrote definition of ''min-height/min-width: auto''
to add special handling of items with intrinsic ratios.
(Issues 16
and 28)
On a flex item whose 'overflow' is not ''overflow/visible'',
the following table gives the minimum size:
[see table] this keyword specifies as the minimum size the smaller of:
the computed 'width'/'height', if that value is definite.
Adjusted ''min-height/min-width: auto''
to only apply the computed main size as a minimum
in cases where the flex basis was retrieved from the main size property.
(Issue 19)
… is defined if the item’s computed flex-basis is ''auto'' and
its computed main size property is definite …
Defined that any size adjustment imposed by a box’s ''min-height/min-width: auto''
is not consulted when percentage-sizing any of its contents.
(Issue 27)
This change was later reverted with an opposite definition.
In order to prevent cycling sizing,
the ''auto'' value of 'min-height' and 'max-height'
does not factor into the percentage size resolution of the box’s contents.
For example, a percentage-height block whose flex item parent has
''height: 120em; min-height: auto''
will size itself against ''height: 120em'' regardless of the impact
that 'min-height' might have on the used size of the flex item.
Introduced extra ''main-size'' keyword to 'flex-basis'
so that “lookup from main-size property” and “automatic sizing” behaviors
could each be explicitly specified.
(Issue 20)
This change was later reverted with an alternative proposal solving the same problem
by instead introducing the ''content'' keyword.
If a percentage is going to be resolved against a flex item’s main size,
and the flex item has a definite flex basis,
the main size must be treated as definite for the purpose of resolving the percentage,
and the percentage must resolve against the flexed main size of the flex item
(that is, after the layout algorithm below has been completed for the flex item’s flex container,
and the flex item has acquired its final size).
Clamp a single line flexbox's line cross size to the container's own min/max,
even when the container's size is indefinite.
(Issue 9)
The used cross-size of the flex line is
the largest of the numbers found in the previous two steps
and zero.
If the flex container has only one flex line
(even if it's a multi-line flex container),
then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
Note that if CSS 2.1's definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
Fixed max-content sizing of flex containers
to account for flexing behavior
by normalizing per flex fraction rather than merely summing the max-content sizes of the flex items.
(Issue 39)
Updated 'flex' property to accept animations always,
now that the discontinuity between 0 and non-0 values has been fixed.
(Issue 5)
Clarified how the static position of an absolutely-positioned child of a flex container
is calculated by introducing an explanation of the effect more closely tied
with CSS2.1 concepts and terminology.
(Issue 12)
Its The static position of an absolutely-positioned child of a flex container
is calculated by first doing full flex layout without the absolutely-positioned children,
then positioning each absolutely-positioned child
determined such that the child is positioned
as if it were the sole flex item in the flex container,
assuming both the child and the flex container were fixed-size boxes of their used size.
In other words, the static position of an absolutely positioned child of a flex container
is determined after flex layout
by setting the child’s static-position rectangle to the flex container’s content box,
then aligning the absolutely positioned child within this rectangle
according to the 'justify-content' value of the flex container and the 'align-self' value of the child itself.
Clarified application of 'order' to absolutely-positioned children of the flex container.
(Note, this behavior was later rescinded.)
An absolutely-positioned child of a flex container does not participate in flex layout
beyond the reordering step.
However, it does participate in the reordering step (see 'order'),
which has an effect in their painting order.
The order property controls the order in which flex items
children of a flex container
appear within their flex container…
Unless otherwise specified by a future specification,
this property has no effect on boxes that are not flex items
children of a flex container.
Note: Absolutely-positioned children of a flex container
do not participate in flex layout, but are reordered
together with any flex item children.
Clarified what a stretched flex item is
for the purposes of special behavior (like definiteness).
(Issue 25)
If the cross size property of the flex item computes to auto,
and either of the cross-axis margins are auto, the flex item is stretched. Its
its used value …
Changes since the 18 September 2012 Candidate Recommendation
Changed the behavior of the new ''min-width/auto'' initial value of 'min-width'/'min-height' to
Take into account whether 'overflow' is ''overflow/visible'',
since when 'overflow' is explicitly handled, it is confusing (and unnecessary)
to force enough size to show all the content.
Take into account the specified 'width'/'height',
so that the implied minimum is never greater than the specified size.
Compute to itself (not to ''width/min-content'') on flex items,
since they are no longer equivalent (due to above changes).
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 ''width/min-content'' keyword
when the specification defining it ([[CSS-SIZING-3]]) is sufficiently mature.
On a flex item whose 'overflow' is not ''overflow/visible'',
this keyword specifies as the minimum size the smaller of:
the computed 'width'/'height', if that value is definite.
Specified that percentage margins/paddings on flex items
are resolved against their respective dimensions,
not the inline dimension of the containing block like blocks do.
(Issue 16)
Percentage margins and paddings on flex items
are always resolved against their respective dimensions;
unlike blocks, they do not always resolve against
the inline dimension of their containing block.
Pass definiteness of a single-line flex container's size through to any stretched items.
(Issue 3)
Allow percentages inside a stretched auto-height flex item to resolve by requiring a relayout pass.
(Issue 3)
If the flex item has ''align-self: stretch'', redo layout for its contents,
treating this used size as its definite cross size
so that percentage-sized children can be resolved.
Note that this step does not affect the main size of the flex item,
even if it has an intrinsic aspect ratio.
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’.
Flex lines have their size floored at 0.
(Issue 2)
The used cross-size of the flex line is the larger largest
of the numbers found in the previous two steps and zero.
Flex items paint like inline blocks rather than blocks.
(Issue 18)
Flex items paint exactly the same as block-level elements in the normal flow inline blocks [[!CSS2]].
An omitted 'flex-basis' component of the 'flex' shorthand
now resolves to ''0%'' instead of ''0px''.
Because percentages resolved against indefinite sizes behave as ''auto'',
this gives better behavior in shrink-wrapped flex containers.
(Issue 20)
When omitted from the 'flex' shorthand, its specified value is ''0%'' the length zero.
''flex: <positive-number>''
Equivalent to ''flex: <positive-number> 1 0px0%''.
Defined that an unresolvable percentage flex base size is treated as auto.
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 the same as a main size of auto.
Simplified the static position of abspos children of flex containers to be consistent with Grid Layout.
(Issue 6)
An absolutely-positioned child 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:
If both 'left' and 'right' are ''auto'',
the flex item 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 flex item must be positioned so that
its main-start or cross-start edge
(whichever is in the vertical axis)
is aligned with the static position.
The static position is intended to more-or-less match the position of
an anonymous 0×0 in-flow ''align-self/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.
Its static position is calculated by first doing full flex layout
without the absolutely-positioned children,
then positioning each absolutely-positioned child
as if it were the sole flex item in the flex container,
assuming both the child and the flex container
were fixed size boxes of their used size.
For example, by default, the static position of
an absolutely positioned child aligns it to the main-start/cross-start corner,
corresponding to the default values of 'justify-content' and 'align-content' on the flex container.
Setting ''justify-content:center'' on the flex container, however,
would center it in the main axis.
Re-order the flex items and absolutely positioned flex container children according to their 'order'.
Clarified that 'float' still affects the computed 'display'
(which may affect box-fixup rules that run prior to flex item determination).
(Issue 7)
'float' and 'clear' have no effect on a flex item,
and do not take it out-of-flow.
However, the 'float' property can still affect box generation
by influencing the 'display' property's computed value.
Clarify what is meant by “white space”. (Issue 26)
However, an anonymous flex item that contains only
white space
(i.e. characters that can be affected by the 'white-space' property)
is not rendered, as if it were ''display:none''.
Clarified that table anonymous box generation occurs
in place of computed value conversion for internal table elements.
Clarified interaction of flex item determination with display-inside / display-outside
(the new longhands of 'display' defined in the CSS Display Module Level 3).
If the specified display-outside of an in-flow child of an element that generates a flex container
is ''inline-level'',
it computes to ''block-level''.
(This effectively converts any inline 'display' values to their block equivalents.)
Clarified that 'overflow' applies to flex containers.
Clarified that ''::first-line'' and ''::first-letter'' pseudo-elements
do not apply to flex containers (because they are not block containers).
Clarify that stretch checks for the computed
value of the cross-size property being auto,
which means that percentage cross-sizes that behave as auto
(because they don't resolve against definite sizes) aren't stretched.
(Issue 5)
Determine the used cross size of each flex item.
If a flex item has ''align-self: stretch'',
its computed cross size property is auto,
and …
Clarify that the rules of the formatting context are used for determining the flex container's main size.
Determine the main size of the flex container
using the rules of the formatting context in which it participates its main size property.
Clarified that 'order'-modified document order is used instead of raw document order when painting.
(This was already stated in the 'order' section, but not in the section explicitly about painting order.)
Clarified line-breaking to precisely handle negatively-sized flex items and zero-size items at the end of a line.
(Issue 1)
Otherwise,
starting from the first uncollected item,
collect consecutive items one by one
until the first time that the next collected item
would not fit into the flex container's inner main size,
or until a forced break is encountered.
If the very first uncollected item wouldn't fit,
collect just it into the line
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.
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 zero-sized flex items
onto the end of the previous line
even if the last non-zero item exactly "filled up" the line.
Clarified that flex container cross sizes are still clamped by the flex container's min/max properties.
(Issue 24)
If the cross size property is a definite size,
use that,
clamped by the min and max cross size properties of the flex container.
Otherwise,
use the sum of the flex lines' cross sizes,
clamped by the min and max cross size properties of the flex container.
Privacy and Security Considerations {#priv-sec}
===============================================
Flexbox introduces no new privacy leaks,
or security considerations beyond "implement it correctly".
