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.
Publication as a Last Call Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
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:
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 asfloats andcolumns . In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need. The contents of a flex container:
Here’s an example of a catalog where each item has a title, an photo, a description, and a purchase button. The designer’s intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons aligned at the bottom, regardless of the length of the item’s description. Flex layout makes many aspects of this design easy:
This is the best computer money can buy, if you don’t have much money.
Only capable of printing ASCII art.
An example rendering of the code above.
In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.
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:
Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item.
Specifying visibility:collapse on a flex item causes it to become a collapsed flex itemcross 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.
…
To compute the size of the strut, flex layout is first performed with all items uncollapsed, and then re-run with each collapsed item replaced by a strut that maintains the original cross-size of the item’s original line. See the Flex Layout Algorithm for the normative definition of how visibility:collapse interacts with flex layout.
Note that using visibility:collapse on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It’s recommended that authors continue to use 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.)
To provide a more reasonable default minimum size for flex items , this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1. [CSS21]
Name:
min-width , min-height
New values:
auto
New computed value:
the percentage as specified or the absolute length or a keyword
New initial value:
auto
auto
On a flex item whose overflow is visible in the main axis , when specified on the flex item’s main-axis min-size property, the following table gives the minimum size:
Clamped Size
Transferred Size
Minimum Size
content size
✓
min(clamped size, content size)
✓
min(transferred size, content size)
✓
✓
min(clamped size, content size)
Where:
clamped size
is defined if the item’s flex-basis is main-size and its computed main size property is definite , and is that size (clamped by its max main size property if it’s definite ).
transferred size
is defined if the item has an intrinsic aspect ratio and its computed cross size property is definite , and is that size (clamped by its min and max cross size properties if they are definite ), converted through the aspect ratio.
content size
is the min-content size in the main axis , clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite .
Otherwise, this keyword computes to 0 (unless otherwise defined by a future specification).
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.)
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 hasheight: 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.
The contents of a flex container can be laid out in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the float and clear properties. This functionality is exposed through the flex-direction , flex-wrap , and order properties.
The reordering capabilities of flex layout intentionally affect_only the visual rendering_, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation. See Reordering and Accessibility and the Flex Layout Overview for examples that use this dichotomy to improve accessibility.
Authors must not use 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-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 that flex items are laid out in.
row
The flex container’s main axis has the same orientation as theinline axis of the current writing mode . The main-start and main-end directions are equivalent to theinline-start andinline-end directions, respectively, of the current writing mode .
row-reverse
Same as row , except the main-start and main-end directions are swapped.
column
The flex container’s main axis has the same orientation as theblock axis of the current writing mode . The main-start and main-end directions are equivalent to theblock-start andblock-end directions, respectively, of the current writing mode .
column-reverse
Same as column , except the main-start and main-end directions are swapped.
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.
flex-wrap property 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.
nowrap
The flex container is single-line . 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 .
wrap
The flex container is multi-line . 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 .
wrap-reverse
Same as wrap , except the cross-start and cross-end directions are swapped.
flex-flow shorthand
Name:
flex-flow
Value:
<flex-direction > [|
Initial:
see individual properties
Applies to:
flex containers
Inherited:
see individual properties
Media:
visual
Computed value:
see individual properties
The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.
Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
Note that the flex-flow directions are writing mode sensitive. In vertical Japanese, for example, a row flex container lays out its contents from top to bottom, as seen in this example:
English
Japanese
flex-flow: row wrap;writing-mode: horizontal-tb;
flex-flow: row wrap;writing-mode: vertical-rl;
order propertyFlex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.
Name:
order
Value:
Initial:
0
Applies to:
flex items and absolutely-positioned children of flex containers
Inherited:
no
Media:
visual
Computed value:
specified value
Animatable:
yes
The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single flex item belongs to.
A flex container lays out its content in order-modified document orderpainting order [CSS21] , exactly as if the flex items were reordered in the source document.
The following figure shows a simple tabbed interface, where the tab for the active pane is always first:
This could be implemented with the following CSS (showing only the relevant code):
.tabs {
display: flex;
}
.tabs > * {
min-width: min-content;
/* Prevent tabs from getting too small for their content. /
}
.tabs > .current {
order: -1; / Lower than the default of 0 */
}
Unless otherwise specified by a future specification, this property has no effect on boxes that are not children of a flex container .
The order property does not affect ordering in non-visual media (such as speech ). Likewise, order does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. nav-index [CSS3UI] or tabindex [HTML40] ). Authors must use order only for visual, not logical, reordering of content; style sheets that use order to perform logical reordering are non-conforming.
This is so that non-visual media and non-CSS UAs, which typically present content linearly, can rely on a logical source order, while order is used to tailor the visual order. (Since visual perception is two-dimensional and non-linear, the desired visual order is not always logical.)
Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it’s desirable that the content come first in the page’s source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns.order makes this trivial. For example, take the following sketch of a page’s code and desired layout:
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 items in a flex container are laid out and aligned within flex linessingle-line or multi-line , depending on the flex-wrap property:
A single-line
A multi-lineflex 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 horizontally.
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.
When a flex container has multiple lines, the cross size of each line is the minimum size necessary to contain the flex items on the line (after aligment due to align-self ), and the lines are aligned within the flex container with the align-content property. When a flex container (even a multi-line one) has only one line, the cross size of the line is the cross size of the flex container, and align-content has no effect. The main size of a line is always the same as the main size of the flex container’s content box.
Here’s the same example as the previous, except that the flex items have all been given flex: auto . The first line has 60px of remaining space, and all of the items have the same flexibility, so each of the three items on that line will receives 20px of extra width, ending up 100px wide. The remaining item is on a line of its own and will stretch to the entire width of the line, or 300px.
A rendering of the same as above, but with the items all given flex: auto .
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 , or shrinks them to prevent overflow proportional to their flex shrink factor .
flex Shorthand The flex property specifies the components of a flexible lengthflex grow factor and flex shrink factor , 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.
<‘flex-grow’>
This component sets flex-grow longhand and specifies the flex grow factorflex 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-shrink’>
This component sets flex-shrink longhand and specifies the flex shrink factorflex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.
<‘flex-basis’>
This component, which takes the same values as the width property, sets the flex-basis longhand and specifies the flex basismain size of the flex item , before free space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is 0%.
If the specified flex-basis is main-size , the used flex basis is the computed value of the flex item’s main size property .
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.
auto
The keyword auto expands to 1 1 main-size.
none
The keyword none expands to 0 0 main-size.
The initial values of the flex components are equivalent to flex: 0 1 main-size .
Note that the initial values of flex-grow and flex-basis are different from their defaults when omitted in the flex shorthand. This so that the flex shorthand can better accommodate the most common cases .
A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <‘flex-basis’> component with a unit or precede it by two flex factors.
flex This section is informative.
The list below summarizes the effects of the most common flex values:
flex: 0 main-size
flex: initial
Equivalent to flex: 0 1 main-size . (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 min-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 main-size . 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 main-size . 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 Implied Minimum Size of Flex Items .)
Individual components of flexibility can be controlled by independent longhand properties.
Note: Authors are encouraged to control flexibility using the flex shorthand rather than with component properties, as the shorthand correctly resets any unspecified components to accommodate common uses .
flex-grow property
Name:
flex-grow
Value:
Initial:
0
Applies to:
flex items
Inherited:
no
Media:
visual
Computed value:
specified value
Animatable:
yes
Note: Authors are encouraged to control flexibility using the flex shorthand rather than with component properties, as the shorthand correctly resets any unspecified components to accommodate common uses .
The flex-grow property sets the flex grow factor to the provided
Name:
flex-shrink
Value:
Initial:
1
Applies to:
flex items
Inherited:
no
Media:
visual
Computed value:
specified value
Animatable:
yes
Note: Authors are encouraged to control flexibility using the flex shorthand rather than with component properties, as the shorthand correctly resets any unspecified components to accommodate common uses .
The flex-shrink property sets the flex shrink factor to the provided
Note: Authors are encouraged to control flexibility using the flex shorthand rather than with component properties, as the shorthand correctly resets any unspecified components to accommodate common uses .
The flex-basis property sets the flex basis . It accepts the same values as the width and height property.
The main-sizeflex item , retrieves the value of the main size property .
auto , but that was problematic because it left us with no keyword to represent an automatic flex basis. There were two options for fixing this:
auto for automatic sizing; main-axis for size lookup
The advantage of this is primarily that auto means “automatic” both when it is specified for flex-basis and when it is pulled in from width /height . It has the disadvantage (due to back-compat concerns) that the flex shorthand had to be tweaked to expand flex: auto to flex: auto main-size rather than to flex: 1 auto . It is the currently-implemented option, but may be unshippable due to back-compat constraints.
auto for size lookup; content1 for automatic sizing
The advantage of this is that it will not break existing content: a flex-basis keyword for automatic sizing did not exist in the original CR, so this option adds a new keyword but does not rename existing functionality. It therefore avoids the flex: auto ≠ flex: 1 auto inequality.
The CSSWG is waiting for feedback from implementers on this issue.
1 Alternate keyword suggestions welcome.
The flex basis is resolved the same way as width in horizontal writing modes [CSS21] : percentage values of flex-basis are resolved against the flex item’s containing block, i.e. its flex container, and if that containing block’s size is indefinite , the result is the same as a main size of auto. Similarly, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing [CSS3UI] .
After a flex container’s contents have finished their flexing and the dimensions of all flex items are finalized, they can then be aligned within the flex container.
The margin properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout.Flex items also respect the alignment properties fromCSS 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.
While the alignment properties are defined in CSS Box Alignment , 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.
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.
Note that, if free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.
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.
justify-content property 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.
center
Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)
space-between
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start . Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the 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.
align-items and align-self propertiesFlex 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.
A value of autoalign-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:
flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
flex-end
The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
center
The flex item ’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item , it will overflow equally in both directions.)
baseline
If the flex item ’s inline axis is the same as the cross axis , this value is identical to flex-start .
Otherwise, it participates in baseline alignmentflex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
stretch
If the cross size property of the flex item computes to auto, and either of the cross-axis margins are auto, the flex item is stretchedcross 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.
An illustration of the five align-items keywords and their effects on a flex container with four colored items.
align-content property The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis , similar to how justify-content aligns individual items within the main-axis . Note, this property has no effect when the flex container has only a single line. Values have the following meanings:
flex-start
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
flex-end
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
center
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
space-between
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start . Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the 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 flex containers with multiple lines ever have free space in the cross-axis for lines to be aligned in, because in a flex container with a single line the sole line automatically stretches to fill the space.
An illustration of the align-content keywords and their effects on a multi-line flex container.
The baselines of a flex container are determined as follows (after reordering with order ):
main-axis baseline
If any of the flex items on the flex container’s first lineparticipate in baseline alignment , the flex container’s main-axis baseline is the baseline of those flex items .
Otherwise, if the flex container has at least one flex item , and its first flex item has a baseline parallel to the flex container’s main axis , the flex container’s main-axis baseline is that baseline.
Otherwise, the flex container’s main-axis baseline is synthesized from the first item’s content box, or, failing that, from the flex container’s content box.
cross-axis baseline
If the flex container has at least one flex item , and its first flex item has a baseline parallel to the flex container’s cross axis , the flex container’s cross-axis baseline is that baseline.
Otherwise, the flex container’s cross-axis baseline is synthesized from the first item’s content box, or, failing that, from the flex container’s content box.
When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.
When determining the baseline of a table cell , a flex container provides a baseline just as a line box or table-row does. [CSS21]
See Baseline Rules in [CSS3-ALIGN] for more information on baseline alignment.
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.
Generate anonymous flex items as described in the Flex Items section.Re-order the flex items (and any absolutely positioned flex container children) according to their order . The flex items with the lowest (most negative) order values are first in the ordering. If multiple flex items share an order value, they’re ordered by document order. This effectively changes the order of their boxes in the box-tree, and how the rest of this algorithm deals with the generated flex items.flex item children.
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; 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.available space to a flex item in afloated auto-sized flex container is:
the width of the flex container ’s containing block minus the flex container ’s margin, border, and padding in the horizontal dimension
infinite in the vertical dimension
Determine the flex base size
If the item has a definite used flex basis , that’s the flex base size .
If the flex item has ...
If the used flex basis is auto or depends on its available size, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS21] ), size the item under that constraint. The flex base size is the item’s resulting main size.
Otherwise, if the used flex basis is auto or depends on its available size, the available main size is infinite, and the flex item’s inline axis is parallel to the main axis, lay the item out usingthe rules for a box in an orthogonal flow [CSS3-WRITING-MODES] . The flex base size is the item’s max-content main size.
Otherwise, lay out the item into the available space using its used flex basis in place of its main size , treating a main size of auto as 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) and the flex item ’s cross size is auto and not definite , in this calculation use fit-content as the flex item ’s cross size . The flex base size is the item’s resulting main size .hypothetical main size is the item’s flex base size clamped according to its min and max main size properties.
Determine the main size of the flex container using the rules of the formatting context in which it participates. For this computation, auto margins on flex items are treated as 0.
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 main size, or until a forced break is encountered. If the very first uncollected item wouldn’t fit, collect just it into the line. A break is forced wherever the CSS2.1 page-break-before /page-break-after [CSS21] or the CSS3 break-before /break-after [CSS3-BREAK] properties specify a fragmentation break.hypothetical main size .
Resolve the flexible lengths
Determine the hypothetical cross size by performing layout with the used main size and the available space, treating auto as fit-content.Calculate the cross size of each flex line. flex line (even if it’s a multi-line flex container ) and has a definite cross size , the cross size of the flex line is the flex container ’s inner cross size .
Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline , and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge, and sum these two values.
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.
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 sizecollecting 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.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 min and max cross size properties. Otherwise, the used cross size is the item’s hypothetical cross size .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.
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 .
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:
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 .
Align all flex lines per align-content .
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.Size inflexible items. Freeze, setting its target main sizehypothetical 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 . Distribute free space proportional to the flex factors. remaining free space is zeroflex grow factor target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.flex shrink factor 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 min and max main size properties. 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:Return to the start of this loop.
Set each item’s used main size to its target main size .
For the purposes of these definitions, a definite sizedefinite .
Flexbox has several additional cases where a length can be considered definite :
If a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item ’s min and max cross size ) and is considered definite .
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).
The max-content main sizeflex container is the smallest size the flex container can take while maintaining the max-content contributions of its flex items .
For each flex item , subtract its flex basis from its max-content contribution size, then divide by its flex grow factor , floored at 1, or by its scaled flex shrink factor (if the result was negative, flooring the flex shrink factor at 1 if necessary). This is the item’s max-content flex fraction.
Place all flex items into lines of infinite length.
Within each line, find the largest max-content flex fraction among all the flex items . Add each item’s flex basis 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 result by the max main size property .
The flex container ’s max-content size is the largest sum of the afore-calculated sizes of all items within a single line.
The min-content main sizesingle-line flex container is calculated identically to the max-content main size , except that the flex item’s min-content contribution is used instead of its max-content contribution . For a multi-line container, it is simply the largest min-content contribution of all the flex items in the flex container .
The min-content cross sizemain-axis space and infinite available cross-axis space.
The main-size min-content /max-content contribution of a flex item is its outer hypothetical main size when sized under a min-content /max-content constraint (respectively).
See [CSS3-SIZING] for a definition of the terms in this section.
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.
The following breaking rules refer to the fragmentation container as the “page”. The same rules apply to any other fragmenters. (Substitute “page” with the appropriate fragmenter type as needed.) See the CSS3 Fragmentation Module [CSS3-BREAK] . For readability, in this section the terms "row" and "column" refer to the relative orientation of the flex container with respect to the block flow direction of the fragmentation context, rather than to that of the flex container itself.
The exact layout of a fragmented flex container is not defined in this level of Flexible Box Layout. However, breaks inside a flex container are subject to the following rules:
In a row flex container, the break-before and break-after properties on flex items are propagated to the flex line. The break-before property on the first line and the break-after property on the last line are propagated to the flex container.
In a column flex container, the break-before property on the first item and the break-after property on the last item are propagated to the flex container. Forced breaks on other items are applied to the item itself.
A forced break inside a flex item effectively increases the size of its contents; it does not trigger a forced break inside sibling items.
In a row flex container,Class A break opportunities occur between sibling flex lines, and Class C break opportunities occur between the first/last flex line and the flex container’s content edges. In a column flex container,Class A break opportunities occur between sibling flex items, and Class C break opportunities occur between the first/last flex items on a line and the flex container’s content edges.[CSS3-BREAK]
When a flex container is continued after a break, the space available to its flex items (in the block flow direction of the fragmentation context) is reduced by the space consumed by flex container fragments on previous pages. The space consumed by a flex container fragment is the size of its content box on that page. If as a result of this adjustment the available space becomes negative, it is set to zero.
If the first fragment of the flex container is not at the top of the page, and some of its flex items don’t fit in the remaining space on the page, the entire fragment is moved to the next page.
When a multi-line colum flex container breaks, each fragment has its own "stack" of flex lines, just like each fragment of a multi-column element has its own row of column boxes.
Aside from the rearrangement of items imposed by the previous point, UAs should attempt to minimize distortation of the flex container with respect to unfragmented flow.
This informative section presents a possible fragmentation algorithm for flex containers. Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group .
This algorithm assumes that pagination always proceeds only in the forward direction; therefore, in the algorithms below, alignment is mostly ignored prior to pagination. Advanced layout engines may be able to honor alignment across fragments.
Single-line column flex container
Run the flex layout algorithm (without regards to pagination) through Cross Sizing Determination .
Lay out as many consecutive flex items or item fragments as possible (but at least one or a fragment thereof), starting from the first, until there is no more room on the page or a forced break is encountered.
If the previous step ran out of room and the free space is positive, the UA may reduce the distributed free space on this page (down to, but not past, zero) in order to make room for the next unbreakable flex item or fragment. Otherwise, the item or fragment that does not fit is pushed to the next page. The UA should pull up if more than 50% of the fragment would have fit in the remaining space and should push otherwise.
If there are any flex items or fragments not laid out by the previous steps, rerun the flex layout algorithm from Line Length Determination through Cross Sizing Determination with the next page’s size and all the contents (including those already laid out), and return to the previous step, but starting from the first item or fragment not already laid out.
For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.
It is the intent of this algorithm that column-direction single-line flex containers paginate very similarly to block flow. As a test of the intent, a flex container with justify-content:start and no flexible items should paginate identically to a block with in-flow children with same content, same used size and same used margins.
Multi-line column flex container
Run the flex layout algorithm_with_ regards to pagination (limiting the flex container’s maximum line length to the space left on the page) through Cross Sizing Determination .
Lay out as many flex lines as possible (but at least one) until there is no more room in the flex container in the cross dimension or a forced break is encountered:
Lay out as many consecutive flex items as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered. Forced breaks within flex items are ignored.
If this is the first flex container fragment, this line contains only a single flex item that is larger than the space left on the page, and the flex container is not at the top of the page already, move the flex container to the next page and restart flex container layout entirely.
If there are any flex items not laid out by the first step, rerun the flex layout algorithm from Main Sizing Determination through Cross Sizing Determination using only the items not laid out on a previous line, and return to the previous step, starting from the first item not already laid out.
If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from Line Sizing Determination through Cross Sizing Determination with the next page’s size and only the items not already laid out, and return to the previous step, but starting from the first item not already laid out.
For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.
If a flex item does not entirely fit on a single page, it will not be paginated in multi-line column flex containers.
Single-line row flex container
Run the entire flex layout algorithm (without regards to pagination), except treat any align-self other than start or baseline as start.
If an unbreakable item doesn’t fit within the space left on the page, and the flex container is not at the top of the page, move the flex container to the next page and restart flex container layout entirely.
For each item, lay out as much of its contents as will fit in the space left on the page, and fragment the remaining content onto the next page, rerunning the flex layout algorithm from Line Length Determination through Main-Axis Alignment into the new page size using all the contents (including items completed on previous pages).
For each fragment of the flex container, rerun the flex layout algorithm from Cross-Axis Alignment to its finish. For all fragments besides the first, treat align-self and align-content as being start for all item fragments and lines.
If any item, when aligned according to its original align-self value into the combined cross size of all the flex container fragments, would fit entirely within a single flex container fragment, it may be shifted into that fragment and aligned appropriately.
Multi-line row flex container
Run the flex layout algorithm (without regards to pagination), through Cross Sizing Determination .
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.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.
Thanks for feedback and contributions to
Erik Anderson, Tony Chang, Phil Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston, Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper, Kang-hao Lu, Markus Mielke, Peter Moulder, Robert O’Callahan, Christoph Päper, Ning Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai, Eugene Veselov, Greg Whitworth, Boris Zbarsky.
This section documents the changes since the previous publication. A Disposition of Comments is also available.
The following significant changes were made since the25 March 2014 Last Call Working Draft
11 ,18 ,30 )
On a flex item whose overflow is not visible in the main axis ,
16 and 28 )
On a flex item whose overflow is not visible,the following table gives the minimum size:[see table] this keyword specifies as the minimum size the smaller of:
* the min-content size , or* the computed width /height , if that value is definite .
19 )
… is defined if the item’s flex-basis is main-size and its computed main size property is definite …
27 )
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 hasheight: 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.
main-size keyword to flex-basis so that “lookup from main-size property” and “automatic sizing” behaviors could each be explicitly specified. (Issue 20 )
The main-size keyword, when specified on a flex item, retrieves the value of the main size property.
Except for auto, which retrieves the value of the main size property, …further discussion on this issue and a proposed alternative to solving the same problem.
flex items with a definite flex basis to also be definite in the main axis , allowing resolution of percentage-sized children even when the item itself is flexible. (Issue 26 )
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).
9 )
The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
Resolving Flexible Lengths section (see March 2014 rewrite to create continuity between flex: 0 and flex: 1 ) and reverted the editorial structure to match the old Candidate Recommendation. (Issues 3 ,4 ,8 ,10 ,15 )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 )flex property to accept animations always, now that the discontinuity between 0 and non-0 values has been fixed . (Issue 5 )
The following significant changes were made since the25 March 2014 Last Call Working Draft
12 )
Its The static position of an absolutely-positioned child of a flex container iscalculated 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.
order to absolutely-positioned children of the flex container :
An absolutely-positioned child of a flex container does not participate in flex layoutbeyond the reordering step.However, it does participate in the reordering step (see order ), which has an effect in their painting order.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.
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 …
This section documents the changes since the previous publication. A Disposition of Comments is also available.
The following significant changes were made since the18 September 2012 Candidate Recommendation :
auto initial value of min-width /min-height to
Take into account whether overflow is 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 min-content) on flex items, since they are no longer equivalent (due to above changes).Issue 19 )
auto
When used as the value of a flex item’s min main size property, this keyword indicates a minimum of the min-content size, to help ensure that the item is large enough to fit its contents.
It is intended that this will compute to the min-content keyword when the specification defining it ([CSS3-SIZING] ) is sufficiently mature.
On a flex item whose overflow is not visible, this keyword specifies as the minimum size the smaller of:
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.
Issue 3 )
As a special case for handling stretched flex items , if a single-line flex container has a definite cross size, the outer cross size of any flex items with align-self: stretch is the flex container’s inner cross size (clamped to the flex item ’s min and max cross size ) and is considered definite .
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.
main-size calculation. (Issue 8 )
If the flex item has ...
then the flex base size is calculated from its inner cross size and the flex item ’s intrinsic aspect ratio.
hypothetical main size when the main size depends on the cross size . (Issue 23 )
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) and the flex item ’s cross size is auto and not definite , in this calculation use fit-content as the flex item ’s cross size .
intrinsic sizes of flex containers.
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’.max-content main size of a flex container is the sum of the flex container’s items' max-content contributions in the main axis . The min-content main size of a single-line flex container is the sum of the flex container’s items' min-content contributions in the main axis ; for a multi-line container, it is the largest of those contributions.
The min-content cross size and max-content cross size of a flex container are the cross size of the flex container after performing layout into the given available main-axis space and infinite available cross-axis space.
The main-size min-content /max-content contribution of a flex item is its outer hypothetical main size when sized under a min-content /max-content constraint (respectively).
See [CSS3-SIZING] for a definition of the terms in this section.
single-line flexbox will size to its contents if it doesn’t have a definite size.
If the flex container has only one flex line (even if it’s a multi-line flex container )and has a definite cross size , the cross size of the flex line is the flex container ’s inner cross size .
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.
Issue 18 )
Flex items paint exactly the same as block-level elements in the normal flow inline blocks [CSS21] .
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:
Equivalent to flex: 1 0px0% .
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.
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 .
In the main axis ,
1. If there is a subsequent in-flow flex item on the same flex line , the static position is the outer main-start edge of that flex item .2. Otherwise, if there is a preceding in-flow flex item on the same flex line , the static position is the outer main-end edge of that flex item .3. Otherwise, the static position is determined by the value of justify-content on the flex container as if the static position were represented by a zero-sized flex item.
In the cross axis ,
1. If there is a preceding in-flow flex item , the static position is the cross-start edge of the flex line that item is in.2. Otherwise, the static position is the cross-start edge of the first flex line .
The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow flex-start -aligned flex item that participates in flex layout, the primary difference being that any packing spaces due tojustify-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.
resolving flexible lengths to make behavior continuous as the sum of the flex factors approaches zero. (No change for a sum ≥ 1.) (Issue 30 ) Replaces this section with this one .
The following significant clarifications were also made:
Name:
order
Applies to:
flex items and absolutely-positioned children of flex containers
Re-order the flex items and absolutely positioned flex container children according to their order .
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.
Issue 26 )
However, an anonymous flex item that contains onlywhite space (i.e. characters that can be affected by the white-space property) is not rendered, as if it were display:none.
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.)
overflow applies to flex containers.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 )
stretch
If the cross size property of the flex item is computes to auto, its used value is …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 …
Determine the main size of the flex container using the rules of the formatting context in which it participates its main size property.
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.)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.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.
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 .
A Disposition of Candidate Recommendation Comments is available.
Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.
All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]
Examples in this specification are introduced with the words "for example" or are set apart from the normative text with class="example", like this:
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the normative text with class="note", like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.
Conformance to this specification is defined for three conformance classes:
style sheet
A CSS style sheet .
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.
A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.
A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate ) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.
To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.
Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.
Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.
Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website athttp://www.w3.org/Style/CSS/Test/ . Questions should be directed to thepublic-css-testsuite@w3.org mailing list.
align-content, 8.4
align-items, 8.3
align-self, 8.3
auto
value for min-width, min-height, 4.5
value for flex, 7.1
value for align-self, 8.3
baseline, 8.3
center
value for justify-content, 8.2
value for align-items, align-self, 8.3
value for align-content, 8.4
collapsed, 4.4
collapsed flex item, 4.4
column, 5.1
column-reverse, 5.1
cross axis, 2
cross-axis, 2
cross-axis baseline, 8.5
cross dimension, 2
cross-end, 2
cross size, 2
cross size property, 2
cross-start, 2
definite, 9.8
definite size, 9.8
flex
value for display, 3
(property), 7.1
flex base size, 9.2
flex basis, 7.1
<‘flex-basis’>, 7.1
flex-basis, 7.3.3
flex container, 2
flex-direction, 5.1
flex direction, 2
flex-end
value for justify-content, 8.2
value for align-items, align-self, 8.3
value for align-content, 8.4
flex-flow, 5.3
flex formatting context, 3
flex-grow, 7.3.1
<‘flex-grow’>, 7.1
flex grow factor, 7.1
flexible length, 7.1
flex item, 2
flex layout, 1
flex line, 6
<‘flex-shrink’>, 7.1
flex-shrink, 7.3.2
flex shrink factor, 7.1
flex-start
value for justify-content, 8.2
value for align-items, align-self, 8.3
value for align-content, 8.4
flex-wrap, 5.2
hypothetical cross size, 9.4
hypothetical main size, 9.2
indefinite, 9.8
indefinite size, 9.8
initial free space, 9.7
inline-flex, 3
, 5.4
justify-content, 8.2
main-axis, 2
main axis, 2
main-axis baseline, 8.5
main dimension, 2
main-end, 2
main-size, 7.3.3
main size, 2
main size property, 2
main-start, 2
max-content cross size, 9.9
max-content main size, 9.9
max cross size property, 2
max main size property, 2
min-content cross size, 9.9
min-content main size, 9.9
min cross size property, 2
min main size property, 2
multi-line, 6
none, 7.1
nowrap, 5.2
* value for flex-grow, [7.3.1](#valdef-flex-grow-number "section 7.3.1")
* value for flex-shrink, [7.3.2](#valdef-flex-shrink-number "section 7.3.2")
order, 5.4
order-modified document order, 5.4
participates in baseline alignment, 8.3
remaining free space, 9.7
row, 5.1
row-reverse, 5.1
scaled flex shrink factor, 9.7
single-line, 6
space-around
value for justify-content, 8.2
value for align-content, 8.4
space-between
value for justify-content, 8.2
value for align-content, 8.4
static-position rectangle, 4.1
stretch
value for align-items, align-self, 8.3
value for align-content, 8.4
stretched, 8.3
strut size, 9.4
target main size, 9.7
wrap, 5.2
wrap-reverse, 5.2
Name
Value
Initial
Applies to
Inh.
%ages
Media
Animatable
Canonical order
Computed value
flex-direction row | row-reverse
column
column-reverse
row
flex containers
no
visual
specified value
flex-wrap nowrap | wrap
wrap-reverse
nowrap
flex containers
no
visual
specified value
flex-flow |
see individual properties
flex containers
see individual properties
visual
see individual properties
order 0
flex items and absolutely-positioned children of flex containers
no
visual
yes
specified value
flex none | auto
[ <‘flex-grow’> <‘flex-shrink’>?
<‘flex-basis’> ]
see individual properties
flex items
see individual properties
visual
per grammar
see individual properties
flex-grow 0
flex items
no
visual
yes
specified value
flex-shrink 1
flex items
no
visual
yes
specified value
flex-basis main-size | <‘width’>
main-size
flex items
no
relative to the flex container’s inner main size
visual
as width
as specified, with lengths made absolute
justify-content flex-start | flex-end
center
space-between
space-around
flex-start
flex containers
no
visual
specified value
align-items flex-start | flex-end
center
baseline
stretch
stretch
flex containers
no
visual
specified value
align-self auto | flex-start
flex-end
center
baseline
stretch
auto
flex items
no
visual
auto computes to parent’s align-items value; otherwise as specified
align-content flex-start | flex-end
center
space-between
space-around
stretch
stretch
multi-line flex containers
no
visual
specified value
This value was originally named auto , but that was problematic because it left us with no keyword to represent an automatic flex basis. There were two options for fixing this:
auto for automatic sizing; main-axis for size lookup
The advantage of this is primarily that auto means “automatic” both when it is specified for flex-basis and when it is pulled in from width /height . It has the disadvantage (due to back-compat concerns) that the flex shorthand had to be tweaked to expand flex: auto to flex: auto main-size rather than to flex: 1 auto . It is the currently-implemented option, but may be unshippable due to back-compat constraints.
auto for size lookup; content1 for automatic sizing
The advantage of this is that it will not break existing content: a flex-basis keyword for automatic sizing did not exist in the original CR, so this option adds a new keyword but does not rename existing functionality. It therefore avoids the flex: auto ≠ flex: 1 auto inequality.
The CSSWG is waiting for feedback from implementers on this issue.
1 Alternate keyword suggestions welcome.
↵
BUY NOW
