Abstract

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

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was produced by the CSS Working Group as a Candidate Recommendation.

A Candidate Recommendation is a document that has been widely reviewed and is ready for implementation. W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text “css3-flexbox” in the subject, preferably like this: “[css3-flexbox] …summary of comment…”

Publication as a Candidate Recommendation 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.

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

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

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

The following features are at-risk:

• Calculation of the static position of absolutely-positioned flex items.

Table of contents

• 1. Introduction
  • 1.1. Overview
  • 1.2. Module interactions
  • 1.3. Values
• 2. Flex Layout Box Model and Terminology
• 3. Flex Containers: the ‘flex’ and ‘inline-flex’ ‘display’ values
• 4. Flex Items
  • 4.1. Absolutely-Positioned Flex Items
  • 4.2. Flex Item Margins
  • 4.3. Flex Item Painting
  • 4.4. Collapsed Items
  • 4.5. Implied Minimum Size of Flex Items
• 5. Ordering and Orientation
  • 5.1. Flex Flow Direction: the ‘flex-direction’ property
  • 5.2. Flex Line Wrapping: the ‘flex-wrap’ property
  • 5.3. Flex Direction and Wrap: the ‘flex-flow’ shorthand
  • 5.4. Display Order: the ‘order’ property
    • 5.4.1. Reordering and Accessibility
• 6. Flex Lines
• 7. Flexibility
  • 7.1. The ‘flex’ Shorthand
  • 7.2. Common Values of ‘flex’
  • 7.3. Components of Flexibility
    • 7.3.1. The ‘flex-grow’ property
    • 7.3.2. The ‘flex-shrink’ property
    • 7.3.3. The ‘flex-basis’ property
• 8. Alignment
  • 8.1. Aligning with ‘auto’ margins
  • 8.2. Axis Alignment: the ‘justify-content’ property
  • 8.3. Cross-axis Alignment: the ‘align-items’ and ‘align-self’ properties
  • 8.4. Packing Flex Lines: the ‘align-content’ property
  • 8.5. Flex Baselines
• 9. Flex Layout Algorithm
  • 9.1. Initial Setup
  • 9.2. Line Length Determination
  • 9.3. Main Size Determination
  • 9.4. Cross size determination
  • 9.5. Main-Axis Alignment
  • 9.6. Cross-Axis Alignment
  • 9.7. Resolving Flexible Lengths
• 10. Fragmenting Flex Layout
  • 10.1. Sample Flex Fragmentation Algorithm
• 11. Conformance
  • 11.1. Document conventions
  • 11.2. Conformance classes
  • 11.3. Partial implementations
  • 11.4. Experimental implementations
  • 11.5. Non-experimental implementations
  • 11.6. CR exit criteria
• Acknowledgments
• References
  • Normative references
  • Other references
• Changes
• Property index
• Index

1. Introduction

This section is not normative.

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

• block layout, designed for laying out documents
• inline layout, designed for laying out text
• table layout, designed for laying out 2D data in a tabular format
• positioned layout, designed for very explicit positioning without much regard for other elements in the document

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

1.1. Overview

This section is not normative.

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps 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 rearranged at the style layer (i.e., visual order can be independent of source and speech order)
• can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
• can “flex” their sizes to respond to the available space
• can be aligned with respect to their container or each other
• can be dynamically collapsed or uncollapsed along the main axis while preserving the container's cross size

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

• The catalog uses flex layout to lay out rows of items horizontally, and to ensure that items within a row are all equal-height. Each entry is then itself a column flex container, laying out its contents vertically.
• Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, ‘order’ is used to pull the image up from later in the content to the top, and ‘align-self’ is used to center it horizontally.
• 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.

<style>
#deals {
	display: flex;        /* Flex layout so items have equal height  */
	flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}
.sale-item { 
	display: flex;        /* Lay out each item using flex layout */
	flex-flow: column;    /* Lay out item's contents vertically  */
}
.sale-item > img { 
	order: -1;            /* Shift image before other content (in visual order) */
	align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
	margin-top: auto;     /* Auto top margin pushes button to bottom */
}
</style>

<section id='deals'>
  <section class='sale-item'>
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don't have much money.
    <ul>
      <li>Computer
      <li>Monitor
      <li>Keyboard
      <li>Mouse
    </ul>
    <img src='images/computer.jpg'
         alt='You get: a white computer with matching peripherals.'>
    <button>BUY NOW</button>
  </section>
  <section class='sale-item'>
    …
  </section>
  …
</section>

Computer Starter Kit

This is the best computer money can buy, if you don't have much money.

• Computer
• Monitor
• Keyboard
• Mouse

Printer

Only capable of printing ASCII art.

• Paper and ink not included.

BUY NOW

BUY NOW

1.2. Module interactions

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

1.3. Values

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

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

2. Flex Layout Box Model and Terminology

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

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

main axis

main dimension

The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.

main-start

main-end

The flex items are placed within the container starting on the main-start side and going toward the main-end side.

main size

main size property

A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.

cross axis

cross dimension

The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.

cross-start

cross-end

Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

cross size

cross size property

The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

3. Flex Containers: the ‘flex’ and ‘inline-flex’ ‘display’ values

‘flex’

This value causes an element to generate a block-level flex container box.

‘inline-flex’

This value causes an element to generate a inline-level flex container box.

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

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

• all of the ‘column-*’ properties in the Multicol module have no effect on a flex container.
• ‘float’ and ‘clear’ have no effect on a flex item.
• ‘vertical-align’ has no effect on a flex item.

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

4. Flex Items

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

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

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

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

<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 -->
        <div id=not-an-item>item 4</div>
        item 4
    </span>
</div>

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

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

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

4.1. Absolutely-Positioned Flex Items

An absolutely-positioned flex item 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 to ‘justify-content: space-around’ or ‘justify-content: space-between’ are suppressed around the hypothetical item: between it and the next item if there is a real item after it, else between it and the previous item (if any) if there isn't.

4.2. Flex Item Margins

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

4.3. Flex Item Painting

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

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

4.4. Collapsed Items

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

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

<style>
  @media (min-width: 60em) {
    /* two column layout only when enough room (relative to default text size) */
    header + div { display: flex; }
    #main {
      flex: 1;         /* Main takes up all remaining space */
      order: 1;        /* Place it after (to the right of) the navigation */
      min-width: 12em; /* Optimize main content area sizing */
    }
  }
  /* menu items use flex layout so that visibility:collapse will work */
  nav > ul > li { 
    display: flex;
    flex-flow: column;
  }
  /* dynamically collapse submenus when not targetted */
  nav > ul > li:not(:target):not(:hover) > ul {
    visibility: collapse;
  }
</style>
…
</header>
<div>
  <article id="main">
    Interesting Stuff to Read
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">About</a>
        …
      <li id="nav-projects"><a href="#nav-projects">Projects</a>
        <ul>
          <li><a href="…">Art</a>
          <li><a href="…">Architecture</a>
          <li><a href="…">Music</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Interact</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

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

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

4.5. Implied Minimum Size of Flex Items

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]

auto

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

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

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

5. Ordering and Orientation

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

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

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

5.1. Flex Flow Direction: the ‘flex-direction’ property

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

‘row’

The flex container's main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current writing mode.

‘row-reverse’

Same as ‘row’, except the main-start and main-end directions are swapped.

‘column’

The flex container's main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the before/head and after/foot directions, respectively, of the current writing mode.

‘column-reverse’

Same as ‘column’, except the main-start and main-end directions are swapped.

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

5.2. Flex Line Wrapping: the ‘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 start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.

‘wrap’

The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.

‘wrap-reverse’

Same as ‘wrap’, except the cross-start and cross-end directions are swapped.

5.3. Flex Direction and Wrap: the ‘flex-flow’ shorthand

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

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

div { flex-flow: row; } /* Initial value. Main-axis is inline, no wrap. */
div { flex-flow: column wrap; } /* Main-axis is block-direction (top to bottom) and lines wrap in the inline direction (rightwards). */
div { flex-flow: row-reverse wrap-reverse; } /* Main-axis is the opposite of inline direction (right to left). New lines wrap upwards. */

Note that the ‘flex-flow’ directions are writing-mode sensitive. In vertical Japanese, for example, a ‘row’ flexbox 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;

5.4. Display Order: the ‘order’ property

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

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

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

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 > .current {
	order: -1; /* Lower than the default of 0 */
}

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

5.4.1. Reordering and Accessibility

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

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

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

<!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer>

This layout can be easily achieved with flex layout:

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

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

@media all and (max-width: 600px) {
	/* 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.)

6. Flex Lines

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

• A single-line flex container lays out all of its children in a single line, even if that would cause its contents to overflow.
• A multi-line flex container breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. When additional lines are created, they are stacked in the flex container along the cross axis according to the ‘flex-wrap’ property. Every line contains at least one flex item, unless the flex container itself is completely empty.

This example shows four buttons that do not fit horizontally.

<style>
#flexbox {
	display: flex;
	flex-flow: row wrap;
	width: 300px;
}
.item {
	width: 80px;
}
<style>
<div id="flexbox">
	<div class='item'>1</div>
	<div class='item'>2</div>
	<div class='item'>3</div>
	<div class='item'>4</div>
</div>

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

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.

7. Flexibility

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

7.1. The ‘flex’ Shorthand

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

<‘flex-grow’>

This <number> component sets ‘flex-grow’ longhand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to ‘1’.

<‘flex-shrink’>

This <number> component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to ‘1’. The flex shrink factor is multiplied by the flex basis when distributing negative space.

<‘flex-basis’>

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

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

‘none’

The keyword ‘none’ computes to ‘0 0 auto’.

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

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

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.

7.2. Common Values of ‘flex’

This section is informative.

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

‘flex: 0 auto’

‘flex: initial’

Equivalent to ‘flex: 0 1 auto’. (This is the initial value.) Sizes the item based on the ‘width’/‘height’ properties. (If the item's main size property computes to ‘auto’, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum when there is insufficient space. The alignment abilities or ‘auto’ margins can be used to align flex items along the main axis.

‘flex: 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: <positive-number>’

Equivalent to ‘flex: <positive-number> 1 0px’. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

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

7.3. Components of Flexibility

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

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

7.3.1. The ‘flex-grow’ property

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

7.3.2. The ‘flex-shrink’ property

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

7.3.3. The ‘flex-basis’ property

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

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

8. Alignment

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

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

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

8.1. Aligning with ‘auto’ margins

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 elements ignore their auto margins and overflow in the end/foot direction.

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

<style>
nav > ul {
	display: flex;
}
nav > ul > #login {
	margin-left: auto;
}
</style>
<nav>
	<ul>
		<li><a href=/about>About</a>
		<li><a href=/projects>Projects</a>
		<li><a href=/interact>Interact</a>
		<li id='login'><a href=/login>Login</a>
	</ul>
</nav>

8.2. Axis Alignment: the ‘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 empty space 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 empty space between any two adjacent flex items on the line is the same, and the empty space before the first and after the last flex items on the line are half the size of the other empty spaces.

An illustration of the five ‘justify-content’ keywords and their effects on a flex container with three colored items.

8.3. Cross-axis Alignment: the ‘align-items’ and ‘align-self’ properties

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.

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

‘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 alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

‘stretch’

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

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

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

An illustration of the five ‘align-items’ keywords and their effects on a flex container with four colored items.

8.4. Packing Flex Lines: the ‘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 flexbox 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 empty space 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 empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces.

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

8.5. Flex Baselines

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

main-axis baseline

1. If any of the flex items on the flex container's first line participate in baseline alignment, the flex container's main-axis baseline is the baseline of those flex items.
2. Otherwise, if the flex container has at least one flex item, and its first flex item has a baseline parallel to the flex container's main axis, the flex container's main-axis baseline is that baseline.
3. Otherwise, the flex container's main-axis baseline is synthesized from the first item's content box, or, failing that, from the flex container's content box.

cross-axis baseline

1. If the flex container has at least one flex item, and its first flex item has a baseline parallel to the flex container's cross axis, the flex container's cross-axis baseline is that baseline.
2. Otherwise, the flex container's cross-axis baseline is synthesized from the first item's content box, or, failing that, from the flex container's content box.

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

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

9. Flex Layout Algorithm

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

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.

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

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

9.1. Initial Setup

0. Generate anonymous flex items as described in the Flex Items section.
1. Re-order the flex items according to their ‘order’. The items with the lowest (most negative) ‘order’ values are first in the ordering. If multiple items share a ‘order’ value, they're ordered by document order. This affects the order in which the flex items generate boxes in the box-tree, and how the rest of this algorithm deals with the items.

9.2. Line Length Determination

1. Determine the available main and cross space for the flex items. For each dimension, if that dimension of the flex container is a definite size, use that; otherwise, subtract the flex container's margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.
2. Determine the flex base size and hypothetical main size of each item:
   • If the item has a definite flex basis, that's the flex base size.
   • If the 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 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 using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES]. The flex base size is the item's max-content main size.
   • Otherwise, lay out the item into the available space using its flex basis in place of its main size, and treating ‘auto’ as ‘max-content’. The flex base size is the item's resulting main size.
   The hypothetical main size is the item's flex base size clamped according to its min and max main size properties.
3. Determine the main size of the flex container using its main size property. In this calculation, the min content main size of the flex container is the maximum of the flex container's items' min-content size contributions, and the max content main size of the flex container is the sum of the flex container's items' max-content size contributions. The min-content/max-content main size contribution of an item is its outer hypothetical main size when sized under a min-content/max-content constraint (respectively). For this computation, ‘auto’ margins on flex items are treated as ‘0’.

9.3. Main Size Determination

1. Collect flex items into flex lines:
   • If the flex container is single-line, collect all the flex items into a single flex line.
   • Otherwise, starting from the first uncollected item, collect as many consecutive flex items as will fit or until a forced break is encountered (but collect at least one) into the flex container's inner main size into a flex line. A break is forced wherever the CSS2.1 ‘page-break-before/after’ [CSS21] or the CSS3 ‘break-before/after’ [CSS3-BREAK] properties specify a fragmentation break.

     For this step, the size of a flex item is its outer hypothetical main size.

     Repeat until all flex items have been collected into flex lines.

     Note that items with zero main size will never start a line unless they're the very first items in the flex container, or they're preceded by a forced break. The "collect as many" line will collect them onto the end of the previous line even if the last non-zero item exactly "filled up" the line.

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

9.4. Cross size determination

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

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

   Otherwise, for each flex line:

   1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose ‘align-self’ is ‘baseline’, and whose cross-axis margins are both non-‘auto’. Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge, and sum these two values.
   2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
   3. The used cross-size of the flex line is the larger of the numbers found in the previous two steps.
3. Handle ‘align-content: stretch’. If the flex container has a definite cross size, ‘align-content’ is ‘stretch’, and the sum of the flex lines' cross sizes is less than the flex container's inner cross size, increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container's inner cross size.
4. Collapse ‘visibility:collapse’ items. If any flex items have ‘visibility: collapse’, note the cross size of the line they're in as the item's strut size, and restart layout from the beginning.

   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.

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

9.5. Main-Axis Alignment

1. Distribute any remaining free space. For each flex line:
   1. If the remaining free space is positive and at least one main-axis margin on this line is ‘auto’, distribute the free space equally among these margins. Otherwise, set all ‘auto’ margins to zero.
   2. Align the items along the main-axis per ‘justify-content’.

9.6. Cross-Axis Alignment

1. 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 start or head margin (whichever is in the cross axis) is ‘auto’, set it to zero; set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.
2. Align all flex items along the cross-axis per ‘align-self’, if neither of the item's cross-axis margins are ‘auto’.
3. Determine the flex container's used cross size:
   • If the cross size property is a definite size, use that.
   • Otherwise, use the sum of the flex lines' cross sizes.
4. Align all flex lines per ‘align-content’.

9.7. Resolving Flexible Lengths

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

1. Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. If the sum is less than the flex container's inner main size, use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor.
2. Size inflexible items. For any items that have a flex factor of zero, set their used main size to their hypothetical main size.
3. Check that you can distribute any space. If all the flex items on the line are either frozen or have a flex factor of zero, exit the algorithm.
4. Calculate free space. Sum the outer flex base sizes of all items on the line, and subtract this from the flex container's inner main size. This is the free space.
5. Distribute free space proportional to the flex factors. If the sign of the free space is positive and the algorithm is using the flex grow factor, or if the sign of the free space is negative and the algorithm is using the flex shrink factor, distribute the free space to each flexible item's main size in proportion to the item's flex factor:

   If the free space is positive

   Find the ratio of the item's flex grow factor to the sum of the flex grow factors of all items on the line. Set the item's main size to its flex base size plus a fraction of the free space proportional to the ratio.

   If the free space is negative

   For every item on the line, multiply its flex shrink factor by its outer flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item's scaled flex shrink factor to the sum of the scaled flex shrink factors of all items on the line. Set the item's main size to its flex base size minus a fraction of the absolute value of the free space proportional to the ratio. Note this may result in a negative inner main size; it will be corrected in the next step.

6. Fix min/max violations. Clamp each item's main size by its min and max main size properties. If the item's main size was made smaller by this, it's a max violation. If the item's main size was made larger by this, it's a min violation.
7. The total violation is the sum of the adjustments from the previous step (clamped size - unclamped size). If the total violation is:

   Zero

   Exit the algorithm.

   Positive

   Freeze all the items with min violations, reset all other items to their size upon entering this algorithm, and return to step 2 of this algorithm.

   Negative

   Freeze all the items with max violations, reset all other items to their size upon entering this algorithm, and return to step 2 of this algorithm.

10. Fragmenting Flex Layout

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

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

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

• In a row flex container, the ‘break-before’ and ‘break-after’ properties on flex items are propagated to the flex line. The ‘break-before’ property on the first line and the ‘break-after’ property on the last line are propagated to the flex container.
• In a column flex container, the ‘break-before’ property on the first item and the ‘break-after’ property on the last item are propagated to the flex container. Forced breaks on other items are applied to the item itself.
• A forced break inside a flex item effectively increases the size of its contents; it does not trigger a forced break inside sibling items.
• In a row flex container, Class 1 break opportunities occur between sibling flex lines, and Class 3 break opportunities occur between the first/last flex line and the flex container's content edges. In a column flex container, Class 1 break opportunities occur between sibling flex items, and Class 3 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.

10.1. Sample Flex Fragmentation Algorithm

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

11. Conformance

11.1. Document conventions

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

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

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

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

Note, this is an informative note.

11.2. Conformance classes

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

style sheet

A CSS style sheet.

renderer

A UA that interprets the semantics of a style sheet and renders documents that use them.

authoring tool

A UA that writes a style sheet.

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

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

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

11.3. Partial implementations

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

11.4. Experimental implementations

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

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

11.5. Non-experimental implementations

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

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

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

11.6. CR exit criteria

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

independent

each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.

interoperable

passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.

implementation

a user agent which:

1. implements the specification.
2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or “nightly build”). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
3. is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward).

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

Acknowledgments

Thanks for feedback and contributions to Erik Anderson, Tony Chang, Phil Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston, Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper, Kang-hao Lu, Markus Mielke, Robert O'Callahan, Christoph Päper, Ning Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai, Eugene Veselov, Boris Zbarsky.

References

Normative references

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: https://www.w3.org/TR/2011/REC-CSS2-20110607

[CSS3-BREAK]

Rossen Atanassov; Elika J. Etemad. CSS Fragmentation Module Level 3. 23 August 2012. W3C Working Draft. (Work in progress.) URL: https://www.w3.org/TR/2012/WD-css3-break-20120823/

[CSS3-WRITING-MODES]

Elika J. Etemad; Koji Ishii. CSS Writing Modes Module Level 3. 1 May 2012. W3C Working Draft. (Work in progress.) URL: https://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/

[RFC2119]

S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: https://www.ietf.org/rfc/rfc2119.txt

Other references

[CSS3UI]

Tantek Çelik. CSS Basic User Interface Module Level 3 (CSS3 UI). 17 January 2012. W3C Working Draft. (Work in progress.) URL: https://www.w3.org/TR/2012/WD-css3-ui-20120117/

[CSS3VAL]

Håkon Wium Lie; Tab Atkins; Elika J. Etemad. CSS Values and Units Module Level 3. 28 August 2012. W3C Candidate Recommendation. (Work in progress.) URL: https://www.w3.org/TR/2012/CR-css3-values-20120828/

[HTML40]

Ian Jacobs; David Raggett; Arnaud Le Hors. HTML 4.0 Specification. 24 April 1998. W3C Recommendation. URL: https://www.w3.org/TR/1998/REC-html40-19980424

Changes

The following significant changes were made since the 12 June 2012 Last Call Working Draft:

• All children of a flex container now become flex items (not just those that are not ‘inline’).
• Defined painting behavior of flex items.
• Made ‘z-index’ automatically apply to flex items.
• Changed how absolutely-positioned flex container children are handled so that they don't impact layout.
• Defined which properties apply to the table wrapper box vs. the table box of a table element.
• Defined interaction of ‘order’ and speech, ‘nav-index’.
• Corrected errors in the flex layout algorithm.
• Defined baselines in flex layout.
• Various clarifications to the flex containers and flex items chapters.
• Clarified parsing of the ‘flex’ shorthand and unitless zeroes.
• Added or rewrote many examples to make them more realistic and more interesting.

A Disposition of Last Call Comments is available.

Property index

Index

• align-content, 8.4.
• align-items, 8.3.
• align-self, 8.3.
• align-self: auto, 8.3.
• authoring tool, 11.2.
• ‘baseline’, 8.3.
• ‘center’, 8.3., 8.4., 8.2.
• collapsed, 4.4.
• collapsed flex item, 4.4.
• ‘column’, 5.1.
• ‘column-reverse’, 5.1.
• 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.
• definite size, 9.
• flex, 7.1., 3.
• ‘flex’, 3.
• flex base size, 9.2.
• flex basis, 7.1.
• flex-basis, 7.3.3.
• flex-basis: auto, 7.3.3.
• flex container, 3.
• flex-direction, 5.1.
• ‘flex-end’, 8.4., 8.3., 8.2.
• flex-flow, 5.3.
• flex formatting context, 3.
• flex-grow, 7.3.1.
• flex grow factor, 7.1.
• flexible length, 7.1.
• flexible length's, 7.1.
• flex item, 4.
• flex layout, 1.
• flex-shrink, 7.3.2.
• flex shrink factor, 7.1.
• ‘flex-start’, 8.4., 8.3., 8.2.
• flex-wrap, 5.2.
• hypothetical cross size, 9.4.
• hypothetical main size, 9.2.
• indefinite, 9.
• indefinite size, 9.
• ‘inline-flex’, 3.
• inline-flex, 3.
• justify-content, 8.2.
• main axis, 2.
• main-axis baseline, 8.5.
• main dimension, 2.
• main-end, 2.
• main size, 2.
• main size property, 2.
• main-start, 2.
• min-width/height:auto, 4.5.
• multi-line, 6.
• ‘none’, 7.1.
• ‘nowrap’, 5.2.
• order, 5.4.
• participates in baseline alignment, 8.3.
• renderer, 11.2.
• ‘row’, 5.1.
• ‘row-reverse’, 5.1.
• scaled flex shrink factor, 9.7.
• single-line, 6.
• ‘space-around’, 8.4., 8.2.
• ‘space-between’, 8.4., 8.2.
• static position, 4.1.
• ‘stretch’, 8.4., 8.3.
• strut size, 9.4.
• style sheet
  • as conformance class, 11.2.
• ‘wrap’, 5.2.
• ‘wrap-reverse’, 5.2.