Editor’s Draft, 15 May 2026
More details about this documentCopyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
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.
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.
Please send feedback by filing issues in GitHub (preferred), including the spec code “css-flexbox” in the title, like this: “[css-flexbox] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org.
This document is governed by the 18 August 2025 W3C Process Document.
This section is not normative.
Flexbox Level 1 defined a new layout mode: flex layout. Flex layout is a powerful, flexible layout mode for laying out a flex container’s children (flex items) across one or several lines, either horizontally or vertically, and aligning or stretching the items within their line in various ways that are generally useful for application or whole-page layouts.
This level extends the flex layout model in a number of ways:
flex-wrap: balance allows for flex items to be balanced across lines, so each line is as similar in length as possible, avoiding "jagged" lines, particularly on the last line.
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
if multi-line, can be packed tightly onto each line (similar to standard text line-breaking) or balanced across the lines (similar to text-wrap:pretty)
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
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.
This is the best computer money can buy, if you don’t have much money.
Only capable of printing ASCII art.
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.
TestsThis 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.
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.Additional sizing terminology used in this specification is defined in CSS Intrinsic and Extrinsic Sizing. [CSS-SIZING-3]
Tests| display |
| flex | inline-flex |
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.
TestsFlex 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.
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 child text sequence is wrapped in an anonymous block container flex item. However, if the entire text sequences 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).
TestsExamples of flex items:
<div style="display:flex"> <!-- flex item: block child --> <div id="item1">block</div> <!-- flex item: floated element; floating is ignored --> <div id="item2" style="float: left;">float</div> <!-- flex item: anonymous block box around inline content --> anonymous item 3 <!-- flex item: inline child --> <span> item 4 <!-- flex items do not split around blocks --> <q style="display: block" id=not-an-item>item 4</q> item 4 </span> </div> Flex items determined from above code blockNote 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 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 § 2.7 Automatic Box Type 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 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.
TestsAs 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, the child’s auto margins are treated as zero.)
TestsThe 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.
TestsFlex 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 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.
TestsSpecifying 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.
TestsTo 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.)
Note: The 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 module.
To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item whose computed overflow value is non-scrollable 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 differs depending on whether the flex item is replaced or not:
For replaced elementsUse the smaller of the content size suggestion and the transferred size suggestion (if one exists), capped by the specified size suggestion (if one exists).
For non-replaced elementsUse the larger of the content size suggestion and the transferred size suggestion (if one exists), capped by the specified size suggestion (if one exists).
In either case, the size is clamped by the maximum main size if it’s definite.
TestsThe 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 main size is definite and not 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 cross size is definite, then the transferred size suggestion is that size (clamped by its minimum and 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 and maximum cross sizes converted through the aspect ratio. TestsNote: The content-based minimum size is a type of intrinsic size contribution, and thus the cyclic percentage provisions in CSS Sizing 3 § 5.2 Intrinsic Contributions 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.
In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as min-width: 12em. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read.
Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)
The contents of a flex container can be laid out in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the float and clear properties. This functionality is exposed through the flex-direction, flex-wrap, and order properties.
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 § 3.1 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 |
| row | row-reverse | column | column-reverse |
| row |
| flex containers |
| no |
| n/a |
| specified keyword |
| per grammar |
| discrete |
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.
row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. TestsNote: 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 Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containers.
Tests| flex-wrap |
| nowrap | [ wrap | wrap-reverse ] || balance |
| nowrap |
| flex containers |
| no |
| n/a |
| specified keyword |
| per grammar |
| discrete |
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. wrap The flex container is multi-line. wrap-reverse The flex container is multi-line, but the lines are stacked "in reverse" (see below). balance The flex container is multi-line, and attempts to balance the lengths of the flex lines to be as similar as possible.balance can be combined with wrap or wrap-reverse to dictate which direction the flex lines are stacked in. If neither are specified, it behaves as if wrap was specified.
By default, the cross-start direction of the flex container is either the inline-start or block-start direction of the flex container’s writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. If wrap-reverse is specified, 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 Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containers.
Tests| flex-flow |
| <'flex-direction'> || <'flex-wrap'> |
| see individual properties |
| see individual properties |
| see individual properties |
| see individual properties |
| see individual properties |
| see individual properties |
| per grammar |
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.
| 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. */ |
|
flex-flow: row wrap; writing-mode: horizontal-tb; |
flex-flow: row wrap; writing-mode: vertical-rl; |
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 § 3 Display Order: the 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.
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 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 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.
Additionally, a multi-line flexbox can be a balanced flex container, meaning it carefully chooses its linebreaks to make the line lengths as similar as possible. (Otherwise, it simply fills the first line, then the second, etc.)
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-line flex 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-line flex 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.
TestsThis can have more dramatic effects when flexing items to fill the line, as the items are more likely to flex similar amounts, rather than the final line’s items flexing a lot more:
The same example, but now with flex: auto.| flex-line-count |
| <integer [1,∞]> |
| 1 |
| multi-line flex containers |
| no |
| n/a |
| the specified integer, computed |
| per grammar |
| as integer |
By default, a balance flexbox will create as many lines as a normal multi-line flexbox, then rebalance how the flex items are assigned across that many lines. In some situations, an author might want to ensure there are always a certain number of lines, or might be using a flexbox in a way where there is no limit to the line length (the standard for a column flexbox, with unlimited available height) and so the "default" line number calculation is useless. The flex-line-count property specifies a minimum flex line count that the flex container should create to balance the items across.
TestsThe minimum flex line count is clamped from above by the number of flex items in the flex container; it will only create as many lines as there are flex items. (That is, if you specify flex-line-count: 3 but only have two flex items, the minimum flex line count is 2, instead.)
Note: There is no maximum flex line count; the flex container will always contain enough lines to hold all of its flex items, which might be more than what flex-line-count specifies.
Unused lines (ones with no flex items assigned to them) are discarded and do not affect layout. This only affects non-balance flexboxes. A balance flexbox will always assign at least one flex item to each line, and if it has less items than flex-line-count, that’s handled specially, above.
In addition to setting a minimum number of lines that are used by balance, flex-line-count changes the available space in the cross axis for flex items: subtracting the size of N-1 gaps from the normal available space, then dividing the leftover by N, where N is the flex-line-count value. This uses the actual flex-line-count value, not the minimum flex line count or the actual number of generated lines (which can be higher or lower than what is specified).
Note: This available space adjustment is the only effect flex-line-count has on non-balance flexboxes.
Percentages continue to resolve as normal, unaffected by this available space adjustment. (To have a flex item fill the cross-axis available space, use height: stretch, rather than height: 100%.)
If the flex container is single-line (aka, flex-wrap: nowrap), this property has no effect.
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.
Tests| flex |
| none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |
| 0 1 auto |
| flex items |
| no |
| see individual properties |
| see individual properties |
| by computed value type |
| per grammar |
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 <number [0,∞]> 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. TestsAn 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 § 9.8 Resolving 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 <number [0,∞]> 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. TestsNote: 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.
Tests <'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. Tests<'flex-basis'> accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword:
auto When specified on a flex item, the 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 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 § 9 Flex 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 auto together with a main size (width or height) of 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 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.
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: <number [1,∞]> Equivalent to flex: <number [1,∞]> 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. TestsBy 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 § 4.5 Automatic Minimum Size of Flex Items.)
Individual components of flexibility can be controlled by independent longhand properties.
Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
| flex-grow |
| <number [0,∞]> |
| 0 |
| flex items |
| no |
| n/a |
| specified number |
| per grammar |
| by computed value type |
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 <number>. Negative values are not allowed.
| flex-shrink |
| <number [0,∞]> |
| 1 |
| flex items |
| no |
| n/a |
| specified value |
| per grammar |
| number |
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 <number>. Negative values are not allowed.
| flex-basis |
| content | <'width'> |
| auto |
| flex items |
| no |
| relative to the flex container’s inner main size |
| specified keyword or a computed <length-percentage> value |
| per grammar |
| by computed value type |
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 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 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].
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.
TestsThis 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: 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.
| justify-content |
| flex-start | flex-end | center | space-between | space-around |
| flex-start |
| flex containers |
| no |
| n/a |
| specified keyword |
| per grammar |
| 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. TestsAn illustration of the five justify-content keywords and their effects on a flex container with three colored items.
| align-items |
| flex-start | flex-end | center | baseline | stretch |
| stretch |
| flex containers |
| no |
| n/a |
| specified keyword |
| per grammar |
| discrete |
| align-self |
| auto | flex-start | flex-end | center | baseline | stretch |
| auto |
| flex items |
| no |
| n/a |
| specified keyword |
| per grammar |
| discrete |
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.) TestsNote: 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.
TestsAn illustration of the five align-items keywords and their effects on a flex container with four colored items.
| align-content |
| flex-start | flex-end | center | space-between | space-around | stretch |
| stretch |
| multi-line flex containers |
| no |
| n/a |
| specified keyword |
| per grammar |
| 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-line flex 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 falls back to safe 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 falls back to safe 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 falls back to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.Note: Only multi-line flex 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.
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):
first/last main-axis baseline set When the inline axis of the flex container matches its main axis, its baselines are determined as follows:If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.
Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)
Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s cross axis, then one is first synthesized from its border edges.)
Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
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 § 4.1 Introduction to Baselines and CSS Box Alignment 3 § 9 Baseline Alignment Details for more information on baselines.
TestsThis 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.
TestsIf the available space in the cross axis is definite, then additionally modify it based on flex-line-count.
For example, the available space to a flex item in a 'float|floated' auto-sized flex container is:
the width of the flex container containing block minus the flex container’s margin, border, and padding in the horizontal dimension
infinite in the vertical dimension
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.
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).
TestsThe Block Layout spec should define this equivalency, but it doesn’t exist yet.
For this step, the size of a flex item is its 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.
If the flex container is multi-line and balancing, First determine how many flex lines will be produced by the non-balancing algorithm, above. For this purpose, floor the outer hypothetical main size of each flex item at zero. This can, if the items have large negative margins, result in a higher line count than a non-balancing flexbox. Let the balancing line count be the larger of this line count and the minimum flex line count.Then, balance flex items across balancing line count number of lines.
If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.
Otherwise, for each flex line:
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.
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.
TestsIf the flex item’s cross size changed as a result, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
TestsNote: This step does not affect the main size of the flex item, even if it has a preferred aspect ratio.
To balance flex items for a flex container across a number of flex lines line count, divide its flex items into exactly line count numbers of contiguous sequences, under the following conditions:
At least one flex item is assigned to each sequence.
The sum of the flex item sizes of all the flex items in the sequence (the line size) do not exceed the inner main size of the flex container (unless it’s a single overflowing item).
If a flex item’s size is zero, the preceding sequence was not overflowing, and it could be assigned either to the end of the preceding sequence or the beginning of the next sequence, it is assigned to the end of the preceding sequence. Otherwise, it’s assigned to the beginning of the next sequence.
Calling the difference between the line size and the flex container’s inner main size a sequence’s error, the sum of the squared error across all sequences is minimized.
For the purpose of this algorithm, a flex item’s size is its outer hypothetical main size, floored at 0.
If multiple possible sequence assignments have equal minimum error, select the sequence that assigns the most items to the first line; if multiple sequences tie by that metric, select the sequence among them that assigns the most items to the second line; etc.
Assign each sequence of flex items to the corresponding flex line.
Note: Because all items have zero or positive size, and thus adding an item to a line never increases the error, there are efficient, nearly linear algorithms to minimize the sum of squared error, such as SMAWK algorithm. (A naive minimization algo is O(n^2) in the number of items being balanced, which is not usable in practice.)
To resolve the flexible lengths of the items within a flex line:
Note: An item’s target main size doesn’t change after freezing.
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:
If the flex container has a definite main size, then the post-flexing main sizes of its flex items are treated as definite.
If a flex item’s flex basis is definite, then its post-flexing main size is also definite.
If a single-line flex container has a definite cross size, the automatic preferred 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.
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.
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.
TestsThe max-content main size of a flex container is, theoretically, 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 max-content contribution, to the extent allowed by the items’ flexibility.
The min-content main size of a flex container is, theoretically, the smallest size the flex container can take such that no items overflow it, and no item’s contents overflow the item—setting aside the cases in which the boxes layouts are defined to overflow (for example with negative margins or percentage sizes that add up to more than 100%).
TestsFor the min-content size of a multi-line flex container, see § 9.10.1.3 Multi-line Min-content Algorithm. For max-content sizes and for single-line min-content sizes, an implementation is conformant to CSS Flexible Box Layout if it conforms to either the Ideal Algorithm or the Web-compatible Algorithm, as defined below.
9.10.1.1. Ideal Algorithm: Max-content Size and Min-content Single-line SizeNote: The following algorithm calculates the flex container’s ideal intrinsic main sizes. However, because it was not implemented correctly initially, and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior, it is not Web-compatible. Implementers and the CSS Working Group are investigating to what extent Web browser implementations can safely approach this behavior, and further experimentation is welcome.
Considering only non-collapsed flex items;
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 min-content main size of a single-line flex container is calculated identically to the max-content main size, except that the flex items’ min-content contributions are used instead of their max-content contributions.
Implications of this algorithm when the sum of flex is less than 1The 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:
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.)
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 chosenPrinciples:
Don’t explode any sizes, whether growing or shrinking, as inputs approach zero.
When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
Items with a zero flex shouldn’t affect the sizes at all.
Keep it continuous over variance of flex factors and item sizes.
Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
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.)
9.10.1.2. Web-compatible Intrinsic Sizing Algorithm: Max-content Size and Min-content Single-line SizeNote: The following algorithm has been demonstrated to be Web-compatible. It may be altered in the future to bring it closer to the ideal algorithm above, if possible.
For the max-content size of a flex container, take the sum of the max-content contributions of all the non-collapsed flex items in the flex container.
For the min-content size of a single-line container, take the sum of the min-content contributions of all the non-collapsed flex items in the flex container.
For a multi-line container, the min-content main size is simply the largest min-content contribution of all the non-collapsed flex items in the flex container.
The min-content/max-content cross size of a single-line flex container is the largest min-content contribution/max-content contribution (respectively) of its flex items.
For a multi-line flex container, the behavior depends on whether it’s a row or column flexbox:
row multi-line flex container cross sizeThe min-content/max-content cross size is the sum of the flex line cross sizes resulting from sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).
column multi-line flex container cross sizeThe 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-axis max-content constraint, using the largest max-content cross-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.
TestsThe main-size min-content contribution of a flex item is the larger of its outer min-content size and outer preferred size if that is not an automatic size.
The main-size max-content contribution of a flex item is the larger of its outer max-content size and outer preferred size if that is not an automatic size.
For this purpose, each 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/max main size.
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 following breaking rules refer to the fragmentation container as the “page”. The same rules apply in any other fragmentation context. (Substitute “page” with the appropriate fragmentation container type as needed.) 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 (interpreted using order-modified document order):
Note: Break propagation (like text-decoration propagation) does not affect computed values.
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 containerIt 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 containerA shortcoming of this sample algorithm is that 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 containerAny flex items that fit entirely into previous fragments still take up space in the main axis in later fragments.
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.
This appendix is non-normative.
| horizontal | left | right | vertical | top | bottom |
| right | left | ||||
| left | right | bottom | top | ||
| right | left | ||||
| vertical | top | bottom | horizontal | left | right |
| bottom | top | ||||
| top | bottom | right | left | ||
| bottom | top |
| horizontal | right | left | vertical | top | bottom |
| left | right | ||||
| right | left | bottom | top | ||
| left | right | ||||
| vertical | top | bottom | horizontal | right | left |
| bottom | top | ||||
| top | bottom | left | right | ||
| bottom | top |
| vertical | top | bottom | horizontal | right | left |
| bottom | top | ||||
| top | bottom | left | right | ||
| bottom | top | ||||
| vertical | right | left | horizontal | top | bottom |
| left | right | ||||
| right | left | bottom | top | ||
| left | right |
This appendix is normative.
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:
| -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 |
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.
This section documents the changes since previous publications.
No new privacy considerations have been reported on this specification.
No new security considerations have been reported on this specification.
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:
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.
TestsTests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.
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 stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.
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 at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.
| flex-start | flex-end | center | space-between | space-around | stretch | stretch | multi-line flex containers | no | n/a | discrete | per grammar | specified keyword |
| flex-start | flex-end | center | baseline | stretch | stretch | flex containers | no | n/a | discrete | per grammar | specified keyword |
| auto | flex-start | flex-end | center | baseline | stretch | auto | flex items | no | n/a | discrete | per grammar | specified keyword |
| none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] | 0 1 auto | flex items | no | see individual properties | by computed value type | per grammar | see individual properties |
| content | <'width'> | auto | flex items | no | relative to the flex container’s inner main size | by computed value type | per grammar | specified keyword or a computed <length-percentage> value |
| row | row-reverse | column | column-reverse | row | flex containers | no | n/a | discrete | per grammar | specified keyword |
| <'flex-direction'> || <'flex-wrap'> | see individual properties | see individual properties | see individual properties | see individual properties | see individual properties | per grammar | see individual properties |
| <number [0,∞]> | 0 | flex items | no | n/a | by computed value type | per grammar | specified number |
| <integer [1,∞]> | 1 | multi-line flex containers | no | n/a | as integer | per grammar | the specified integer, computed |
| <number [0,∞]> | 1 | flex items | no | n/a | number | per grammar | specified value |
| nowrap | [ wrap | wrap-reverse ] || balance | nowrap | flex containers | no | n/a | discrete | per grammar | specified keyword |
| flex-start | flex-end | center | space-between | space-around | flex-start | flex containers | no | n/a | discrete | per grammar | specified keyword |
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.
In all current engines.