<pre class='metadata'>

Title: CSS Flexible Box Layout Module Level 1

Shortname: css-flexbox

Level: 1

Status: ED

Prepare for TR: no

Work Status: Testing

Group: csswg

ED: https://drafts.csswg.org/css-flexbox/

TR: https://www.w3.org/TR/css-flexbox-1/

Implementation Report: https://wpt.fyi/results/css/css-flexbox

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

Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Rossen Atanassov, Microsoft, [email protected], w3cid 49885

Former Editor: Alex Mogilevsky, Microsoft Corporation, [email protected]

Former Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393

Former Editor: Neil Deakin, Mozilla Corporation, [email protected]

Former Editor: Ian Hickson, formerly of Opera Software, [email protected]

Former Editor: David Hyatt, formerly of Netscape Corporation, [email protected]

!Issues List: <a href="https://drafts.csswg.org/css-flexbox-1/issues">https://drafts.csswg.org/css-flexbox-1/issues</a>

Ignored Terms: auto, first formatted line, first letter

Ignored Vars: item’s own max-content, maximum min-content among all items

WPT Path Prefix: css/css-flexbox/

WPT Display: closed

</pre>

<pre class='link-defaults'>

spec: css2; type: property

text: margin

text: min-width

text: max-width

text: min-height

text: max-height

spec: css-break-3; type: property; text: break-after

spec: css-sizing-3;

type: value;

for: width

text: min-content

text: max-content

text: fit-content

type: property; text: box-sizing

type:dfn;

text: width

text: height

spec: css-align-3;

type: value; text: start

type:dfn; text:alignment baseline

spec: css-position-3; type: property; text: left

spec: css-writing-modes-3; type: dfn;

text: start

text: end

spec: css-pseudo-4; type: selector;

text: ::first-line

text: ::first-letter

</pre>

<style>

img { background: transparent; }

code.one-line { white-space: pre; }

.code-and-figure {

display: table;

margin: 0 auto;

border-spacing: 1em;

}

.code-and-figure > div {

display: table-cell;

vertical-align: middle;

}

ol.layout-start { counter-reset: list 0; }

ol.layout-start,

ol.continue { list-style: none; }

ol.layout-start > li,

ol.continue > li { position: relative; counter-increment: list; }

ol.layout-start > li::before,

ol.continue > li::before { content: counter(list) "."; position: absolute; left: -4.5em; width: 4em; text-align: right; }

.compact, .compact li {

margin-top: 0;

margin-bottom: 0;

}

/* Overview catalog example */

#overview-example {

display:table;

margin: 0 auto 1em;

border-spacing: .5em 0;

min-width: 672px;

color: black;

}

#overview-example > .col {

display: table-column;

background: hsl(60,100%,90%);

}

#overview-example > .desc {

display: table-cell;

vertical-align: top;

width: 300px;

padding: 1em 1em 0;

text-align: left;

border: thick solid hsl(60,80%,50%);

border-radius: 1em 1em 0 0;

border-bottom: none;

}

#overview-example > .desc > img {

margin: 0 auto;

display: block;

}

#overview-example > .desc > h1 {

background: transparent;

}

#overview-example > .buttons {

display: table-row;

}

#overview-example > .buttons > div {

display: table-cell;

border: thick solid hsl(60,80%,50%);

border-radius: 0 0 1em 1em;

border-top: none;

text-align: center;

}

#overview-example button {

background-color: hsl(120,100%,40%);

border: medium inset hsl(120,70%,40%);

border-radius: 1em;

padding: .5em;

font-weight: bold;

color: white;

font-size: 1.6em;

cursor: pointer;

width: 90%;

margin: 1em auto;

}

/* Visibility: Collapse example */

#visibility-collapse-example {

display: table;

width: 100%;

box-shadow: 3px 3px 10px canvas;

}

#visibility-collapse-example > article,

#visibility-collapse-example > nav {

display: table-cell;

}

#visibility-collapse-example > article {

width: 100%;

background: canvas;

}

#visibility-collapse-example ul,

#visibility-collapse-example li {

list-style: none;

margin: 0;

padding: 0;

}

#visibility-collapse-example > nav > ul {

background: #444;

border-radius: 0.5em;

padding: 0.075em;

}

#visibility-collapse-example li {

padding: 0 0.5em;

background: #ddd;

color: black;

border-radius: 0.40em;

border: #444 solid 0.075em;

white-space: nowrap;

}

#visibility-collapse-example li li {

background: #444;

color: white;

margin: 0 -0.5em;

border-radius: 0;

}

#visibility-collapse-example li li:first-child {

border-radius: 0.375em 0.375em 0 0;

}

#visibility-collapse-example a {

background: transparent;

color: inherit;

}

#visibility-collapse-example > nav > ul > li:target,

#visibility-collapse-example > nav > ul > li:hover {

background: #888;

color: white;

}

#visibility-collapse-example > nav > ul > li:not(:target):not(:hover) > ul {

height: 0;

overflow: hidden;

}

#auto-bar {

overflow: hidden;

padding: .25em 1em;

background: #ddd;

list-style: none;

margin: 0;

border-radius: .3em;

}

@media (prefers-color-scheme: dark) {

#auto-bar { background: #444; }

}

#auto-bar > li {

float: left;

margin: 0;

}

#auto-bar > li:first-child:after,

#auto-bar > li:first-child + li:after {

content: " | ";

white-space: pre;

}

#auto-bar > li > a {

display: inline-block;

padding: 0 .25em;

border-radius: .3em;

border: none;

background: transparent;

}

#auto-bar > li > a:not(:hover):not(:focus) {

text-decoration: none;

}

#auto-bar > li > a:hover {

color: #ddd;

background: #444;

}

#auto-bar > #login { float: right; }

.cross-auto-figure > div {

margin: 0 auto;

width: 70px;

background: #888;

padding: 0 .5em;

border-radius: 1em;

border: 1px solid transparent;

}

.cross-auto-figure > div > div {

border-spacing: 0;

display: table;

background: #ddd;

color: black;

text-align: center;

margin: .5em auto;

padding: .5em;

border-radius: .5em;

}

.axis { color: hsl( 0,80%,40%); }

.side { color: hsl(240,80%,50%); }

.size { color: hsl(120,80%,30%); }

</style>

<h2 id="intro">

Introduction</h2>

<em>This section is not normative.</em>

CSS 2.1 defined four layout modes &mdash; 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, <dfn export>flex layout</dfn>,

which is designed for laying out more complex applications and webpages.

<h3 id="overview">

Overview</h3>

<em>This section is not normative.</em>

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

<a href="https://www.w3.org/TR/CSS2/visuren.html#floats">floats</a> and

<a href="https://www.w3.org/TR/css3-multicol/">columns</a>.

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 <a href="#flex-direction-property">flow direction</a>

(leftwards, rightwards, downwards, or even upwards!)

* can have their display order <a value for="flex-direction" lt="row-reverse">reversed</a> 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 (<a lt="main axis">main</a>) axis or

<a href="#flex-wrap-property">wrapped</a> into multiple lines along a secondary (<a lt="cross axis">cross</a>) axis

* can <a href="#flexibility">&ldquo;flex&rdquo; their sizes</a>

to respond to the available space

* can be <a href="#alignment">aligned</a> with respect to their container or each other on the secondary (<a lt="cross axis">cross</a>)

* can be dynamically <a href="#visibility-collapse">collapsed</a> or uncollapsed

along the <a>main axis</a> while preserving the container's <a>cross size</a>

<div class='example'>

Here's an example of a catalog where each item has a title, a photo, a description, and a purchase button.

The designer's intention is that each entry has the same overall size,

that the photo be above the text,

and that the purchase buttons are aligned at the bottom, regardless of the length of the item's description.

Flex layout makes many aspects of this design easy:

* The catalog uses flex layout to lay out rows of items horizontally,

and to ensure that items within a row are all equal-height.

Each entry is then itself a column flex container,

laying out its contents vertically.

* Within each entry, the source document content is ordered logically

with the title first, followed by the description and the photo.

This provides a sensible ordering for speech rendering and in non-CSS browsers.

For a more compelling visual presentation, however,

'order' is used to pull the image up from later in the content to the top,

and 'align-self' is used to center it horizontally.

* An <a href="#auto-margins"><css>auto</css> margin</a> above the purchase button

forces it to the bottom within each entry box,

regardless of the height of that item's description.

<pre class="lang-css">

#deals {

display: flex; /* Flex layout so items <a property lt="align-self">have equal height</a> */

flex-flow: row wrap; /* <a section href="#flex-flow-property">Allow items to wrap into multiple lines</a> */

}

.sale-item {

display: flex; /* Lay out each item using flex layout */

flex-flow: column; /* <a section href="#flex-flow-property">Lay out item's contents vertically</a> */

}

.sale-item > img {

order: -1; /* Shift image before other content (in visual order) */

align-self: center; /* <a property lt="align-self">Center the image cross-wise (horizontally)</a> */

}

.sale-item > button {

margin-top: auto; /* <a section href="#auto-margins">Auto top margin pushes button to bottom</a> */

}

</pre>

<pre class="lang-markup">

&lt;section id="deals">

&lt;section class="sale-item">

&lt;h1>Computer Starter Kit&lt;/h1>

&lt;p>This is the best computer money can buy, if you don’t have much money.

&lt;ul>

&lt;li>Computer

&lt;li>Monitor

&lt;li>Keyboard

&lt;li>Mouse

&lt;/ul>

&lt;img src="images/computer.jpg"

alt="You get: a white computer with matching peripherals.">

&lt;button>BUY NOW&lt;/button>

&lt;/section>

&lt;section class="sale-item">

&hellip;

&lt;/section>

&hellip;

&lt;/section>

</pre>

<figure>

<div id="overview-example">

<div class="col"></div>

<div class="col"></div>

<div class="desc">

<img src="images/computer.jpg" alt="You get: a white computer with matching keyboard and monitor." width=250 height=188>

<h1 id=quiet-pubrules-1 style="font-size: 1.4em;">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>

</div>

<div class="desc">

<img src="images/printer.png" alt="You get: beautiful ASCII art." width=159 height=188>

<h1 id=quiet-pubrules-2 style="font-size: 1.4em;">Printer</h1>

<p>

Only capable of printing

ASCII art.

<ul>

<li>Paper and ink not included.

</ul>

</div>

<div class="buttons">

<div><button>BUY NOW</button></div>

<div><button>BUY NOW</button></div>

</div>

</div>

<figcaption>

An example rendering of the code above.

</figcaption>

</figure>

</div>

<h3 id="placement">

Module interactions</h3>

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 <a href="http://www.w3.org/TR/css-align/">CSS Box Alignment Module</a>

extends and supersedes the definitions of the alignment properties

('justify-content', 'align-items', 'align-self', 'align-content')

introduced here.

<wpt>

flexbox_first-letter.html

flexbox_first-line.html

flexbox-ignores-first-letter.html

</wpt>

<h3 id="values">

Value Definitions</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]

using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].

Value types not defined in this specification are defined in CSS Values &amp; 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 <a>CSS-wide keywords</a> as their property value.

For readability they have not been repeated explicitly.

<h2 id='box-model'>

Flex Layout Box Model and Terminology</h2>

A <dfn export>flex container</dfn> is the box generated by an element with a

computed 'display' of ''flex'' or ''inline-flex''.

<a>In-flow</a> children of a flex container are called <dfn export lt="flex item" id="flex-item">flex items</dfn>

and are laid out using the flex layout model.

Unlike block and inline layout,

whose layout calculations are biased to the <a href="https://www.w3.org/TR/css3-writing-modes/#abstract-box">block and inline flow directions</a>,

flex layout is biased to the <dfn export lt="flex direction">flex directions</dfn>.

To make it easier to talk about flex layout,

this section defines a set of flex flow&ndash;relative terms.

The 'flex-flow' value and the <a>writing mode</a>

determine how these terms map

to physical directions (top/right/bottom/left),

axes (vertical/horizontal), and sizes (width/height).

<figure>

<img src='images/flex-direction-terms.svg' width=665 height=277 alt>

<figcaption>

An illustration of the various directions and sizing terms as applied to a ''row'' flex container.

</figcaption>

</figure>

<dl id="main" export>

<dt class='axis'>main axis

<dt class='axis'>main dimension

<dd>

The <dfn lt="main axis|main-axis">main axis</dfn> of a flex container is the primary axis along which <a>flex items</a> are laid out.

It extends in the <dfn>main dimension</dfn>.

<dt class='side'>main-start

<dt class='side'>main-end

<dd>

The <a>flex items</a> are placed within the container

starting on the <dfn>main-start</dfn> side

and going toward the <dfn>main-end</dfn> side.

<dt class='size'>main size

<dt class='size'>main size property

<dd>

The <dfn>main size</dfn> of a [=flex container=] or [=flex item=]

refers to its [=width=] or [=height=],

whichever is in the [=main dimension=].

Its <dfn>main size property</dfn>

is either its 'width' or 'height' property,

whichever is in the [=main dimension=].

Likewise, its <dfn lt="min main size property">min</dfn> and

<dfn lt="max main size property">max main size properties</dfn>

are its 'min-width'/'max-width' or 'min-height'/'max-height' properties,

whichever are in the <a>main dimension</a>,

and determine its <dfn lt="min main size">min</dfn>/<dfn>max main size</dfn>.

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=].

</dl>

<dl id="cross" export>

<dt class='axis'>cross axis

<dt class='axis'>cross dimension

<dd>

The axis perpendicular to the <a>main axis</a> is called the <dfn lt="cross axis|cross-axis">cross axis</dfn>.

It extends in the <dfn>cross dimension</dfn>.

<dt class='side'>cross-start

<dt class='side'>cross-end

<dd>

<a>Flex lines</a> are filled with items and placed into the container

starting on the <dfn>cross-start</dfn> side of the flex container

and going toward the <dfn>cross-end</dfn> side.

<dt class='size'>cross size

<dt class='size'>cross size property

<dd>

The <dfn>cross size</dfn> of a [=flex container=] or [=flex item=]

refers to its [=width=] or [=height=],

whichever is in the [=cross dimension=].

Its <dfn>cross size property</dfn>

is either its 'width' or 'height' property,

whichever is in the [=cross dimension=].

Likewise, its <dfn lt="min cross size property">min</dfn> and

<dfn lt="max cross size property">max cross size properties</dfn>

are its 'min-width'/'max-width' or 'min-height'/'max-height' properties,

whichever are in the <a>cross dimension</a>,

and determine its <dfn lt="min cross size">min</dfn>/<dfn>max cross size</dfn>.

</dl>

Additional sizing terminology used in this specification

is defined in <a href="http://www.w3.org/TR/CSS-SIZING-3/">CSS Intrinsic and Extrinsic Sizing</a>. [[!CSS-SIZING-3]]

<wpt>

box-sizing-min-max-sizes-001.html

</wpt>

<!--

████████ ████ ██████ ████████ ██ ███ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ████

██ ██ ██ ██████ ████████ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ █████████ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

████████ ████ ██████ ██ ████████ ██ ██ ██

-->

<h2 id='flex-containers'>

Flex Containers: the ''flex'' and ''inline-flex'' 'display' values</h2>

<div class="informative">

<pre class="propdef partial">

Name: display

New values: flex | inline-flex

</pre>

</div>

<wpt>

inheritance.html

</wpt>

<dl dfn-type=value dfn-for=display>

<dt><dfn>flex</dfn>

<dd>

This value causes an element to generate a <a>flex container</a> box

that is <a>block-level</a> when placed in <a>flow layout</a>.

<wpt>

baseline-synthesis-001.html

baseline-synthesis-002.html

baseline-synthesis-003.html

baseline-synthesis-004.html

baseline-synthesis-vert-lr-line-under.html

display-flex-001.htm

dynamic-change-simplified-layout-002.html

dynamic-change-simplified-layout.html

fixedpos-video-in-abspos-quirk-crash.html

flexbox_flex-0-0-0.html

flexbox_flex-0-0-0-unitless.html

flexbox_flex-0-0-1-unitless-basis.html

flexbox_flex-0-0-auto.html

flexbox_flex-0-0-auto-shrink.html

flexbox_flex-0-0.html

flexbox_flex-0-0-N.html

flexbox_flex-0-0-Npercent.html

flexbox_flex-0-0-Npercent-shrink.html

flexbox_flex-0-0-N-shrink.html

flexbox_flex-0-0-N-unitless-basis.html

flexbox_flex-0-1-0.html

flexbox_flex-0-1-0-unitless.html

flexbox_flex-0-1-1-unitless-basis.html

flexbox_flex-0-1-auto.html

flexbox_flex-0-1-auto-shrink.html

flexbox_flex-0-1.html

flexbox_flex-0-1-N.html

flexbox_flex-0-1-Npercent.html

flexbox_flex-0-1-Npercent-shrink.html

flexbox_flex-0-1-N-shrink.html

flexbox_flex-0-1-N-unitless-basis.html

flexbox_flex-0-auto.html

flexbox_flex-0-N-0.html

flexbox_flex-0-N-0-unitless.html

flexbox_flex-0-N-auto.html

flexbox_flex-0-N-auto-shrink.html

flexbox_flex-0-N.html

flexbox_flex-0-N-N.html

flexbox_flex-0-N-Npercent.html

flexbox_flex-0-N-Npercent-shrink.html

flexbox_flex-0-N-N-shrink.html

flexbox_flex-1-0-0.html

flexbox_flex-1-0-0-unitless.html

flexbox_flex-1-0-auto.html

flexbox_flex-1-0-auto-shrink.html

flexbox_flex-1-0.html

flexbox_flex-1-0-N.html

flexbox_flex-1-0-Npercent.html

flexbox_flex-1-0-Npercent-shrink.html

flexbox_flex-1-0-N-shrink.html

flexbox_flex-1-1-0.html

flexbox_flex-1-1-0-unitless.html

flexbox_flex-1-1-auto.html

flexbox_flex-1-1-auto-shrink.html

flexbox_flex-1-1.html

flexbox_flex-1-1-N.html

flexbox_flex-1-1-Npercent.html

flexbox_flex-1-1-Npercent-shrink.html

flexbox_flex-1-1-N-shrink.html

flexbox_flex-1-N-0.html

flexbox_flex-1-N-0-unitless.html

flexbox_flex-1-N-auto.html

flexbox_flex-1-N-auto-shrink.html

flexbox_flex-1-N.html

flexbox_flex-1-N-N.html

flexbox_flex-1-N-Npercent.html

flexbox_flex-1-N-Npercent-shrink.html

flexbox_flex-1-N-N-shrink.html

flexbox_flex-N-0-0.html

flexbox_flex-N-0-0-unitless.html

flexbox_flex-N-0-auto.html

flexbox_flex-N-0-auto-shrink.html

flexbox_flex-N-0.html

flexbox_flex-N-0-N.html

flexbox_flex-N-0-Npercent.html

flexbox_flex-N-0-Npercent-shrink.html

flexbox_flex-N-0-N-shrink.html

flexbox_flex-N-1-0.html

flexbox_flex-N-1-0-unitless.html

flexbox_flex-N-1-auto.html

flexbox_flex-N-1-auto-shrink.html

flexbox_flex-N-1.html

flexbox_flex-N-1-N.html

flexbox_flex-N-1-Npercent.html

flexbox_flex-N-1-Npercent-shrink.html

flexbox_flex-N-1-N-shrink.html

flexbox_flex-N-N-0.html

flexbox_flex-N-N-0-unitless.html

flexbox_flex-N-N-auto.html

flexbox_flex-N-N-auto-shrink.html

flexbox_flex-N-N.html

flexbox_flex-N-N-N.html

flexbox_flex-N-N-Npercent.html

flexbox_flex-N-N-Npercent-shrink.html

flexbox_flex-N-N-N-shrink.html

flexbox_flex-formatting-interop.html

flexbox_generated-flex.html

flexbox_generated.html

flexbox_generated-nested-flex.html

flexbox-iframe-intrinsic-size-001.html

flexbox_item-bottom-float.html

flexbox_item-clear.html

flexbox_item-float.html

flexbox_item-top-float.html

flexbox_item-vertical-align.html

flexbox_block.html

flexbox_box-clear.html

flexbox_display.html

flexbox_fbfc2.html

flexbox_fbfc.html

flexbox_nested-flex.html

flexbox-root-node-001a.html

flexbox-root-node-001b.html

flexbox_stf-fixpos.html

flexbox_stf-float.html

flexbox_stf-inline-block.html

flexbox_stf-table-caption.html

flexbox_stf-table-cell.html

flexbox_stf-table.html

flexbox_stf-table-row-group.html

flexbox_stf-table-row.html

flexbox_stf-table-singleline-2.html

flexbox_stf-table-singleline.html

flexbox_table-fixed-layout.html

flexbox-with-multi-column-property.html

getcomputedstyle/flexbox_computedstyle_display.html

grid-flex-item-001.html

grid-flex-item-002.html

grid-flex-item-003.html

grid-flex-item-004.html

grid-flex-item-005.html

grid-flex-item-006.html

grid-flex-item-007.html

interactive/flexbox_interactive_flex-transitions.html

interactive/flexbox_interactive_order-transitions-2.html

interactive/flexbox_interactive_order-transitions.html

nested-flex-image-loading-invalidates-intrinsic-sizes.html

percentage-margins-001.html

stretch-after-sibling-size-change.html

stretched-child-in-nested-flexbox-001.html

stretched-child-in-nested-flexbox-002.html

stretched-child-in-nested-flexbox-003.html

stretched-child-shrink-on-relayout.html

stretch-flex-item-checkbox-input.html

stretch-flex-item-radio-input.html

stretching-orthogonal-flows.html

table-with-percent-intrinsic-width.html

</wpt>

<dt><dfn>inline-flex</dfn>

<dd>

This value causes an element to generate a <a>flex container</a> box

that is <a>inline-level</a> when placed in <a>flow layout</a>.

<wpt>

flexbox_inline.html

flex-inline.html

flexbox_inline-float.html

inline-flexbox-absurd-block-size-crash.html

inline-flexbox-wrap-vertically-width-calculation.html

inline-flex-editing-crash.html

inline-flex-editing-with-updating-text-crash.html

inline-flex-frameset-main-axis-crash.html

inline-flex.html

inline-flex-min-content-height.html

getcomputedstyle/flexbox_computedstyle_display-inline.html

intrinsic-width-orthogonal-writing-mode.html

</wpt>

</dl>

A <a>flex container</a> establishes a new <dfn export>flex formatting context</dfn> 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.

<a>Flex containers</a> form a containing block for their contents

<a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">exactly like block containers do</a>. [[!CSS2]]

The 'overflow' property applies to <a>flex containers</a>.

<wpt>

flexbox-overflow-horiz-001.html

flexbox-overflow-horiz-002.html

flexbox-overflow-horiz-003.html

flexbox-overflow-horiz-004.html

flexbox-overflow-horiz-005.html

flexbox-overflow-padding-001.html

flexbox-overflow-padding-002.html

flexbox-overflow-vert-001.html

flexbox-overflow-vert-002.html

flexbox-overflow-vert-003.html

flexbox-overflow-vert-004.html

flexbox-overflow-vert-005.html

flexbox_rowspan-overflow-automatic.html

flexbox_rowspan-overflow.html

flexbox-safe-overflow-position-001.html

flexbox-safe-overflow-position-002.html

flexbox-safe-overflow-position-003.html

flexbox-safe-overflow-position-004.html

flexbox-safe-overflow-position-005.html

flexbox-safe-overflow-position-006.html

flexbox_width-overflow.html

min-size-auto-overflow-clip.html

negative-overflow-002.html

negative-overflow-003.html

negative-overflow.html

overflow-area-001.html

overflow-area-002.html

overflow-area-003.html

overflow-auto-001.html

overflow-auto-002.html

overflow-auto-003.html

overflow-auto-004.html

overflow-auto-005.html

overflow-auto-006.html

overflow-auto-007.html

overflow-auto-008.html

overflow-top-left.html

padding-overflow.html

text-overflow-on-flexbox-001.html

synthesize-vrl-baseline.html

</wpt>

Flex containers are not block containers,

and so some properties that were designed with the assumption of block layout don't apply in the context of flex layout.

In particular:

* 'float' and 'clear' do not create floating or clearance of <a>flex item</a>,

and do not take it <a>out-of-flow</a>.

* 'vertical-align' has no effect on a flex item.

* the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to <a>flex containers</a>,

and <a>flex containers</a> do not contribute a <a>first formatted line</a> or <a>first letter</a>

to their ancestors.

<!--

Issue: When the Pseudo-Elements spec exists,

align this language with whatever algo we define for figuring out where to search for first-line/letter content.

-->

<wpt>

align-content-wrap-004.html

align-items-baseline-column-vert-lr-table-item.html

align-items-baseline-vert-lr-column-horz-table-item.html

align-items-baseline-vert-rl-column-horz-table-item.html

flexbox_box-clear.html

flexbox_first-letter.html

flexbox_first-line.html

flexbox-ignores-first-letter.html

flexbox_item-vertical-align.html

flexbox-with-pseudo-elements-001.html

flexbox-with-pseudo-elements-002.html

flexbox-with-pseudo-elements-003.html

flexible-box-float.html

flex-item-vertical-align.html

flex-vertical-align-effect.html

hittest-before-pseudo.html

</wpt>

If an element's specified 'display' is ''inline-flex'',

then its 'display' property computes to ''flex''

in certain circumstances:

the table in <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Section 9.7</a>

is amended to contain an additional row,

with ''inline-flex'' in the "Specified Value" column

and ''flex'' in the "Computed Value" column.

<!--

████████ ██ ████████ ██ ██ ████ ████████ ████████ ██ ██ ██████

██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██

██████ ██ ██████ ███ ██ ██ ██████ ██ ███ ██ ██████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ████████ ████████ ██ ██ ████ ██ ████████ ██ ██ ██████

-->

<h2 id='flex-items'>

Flex Items</h2>

Loosely speaking, the <a>flex items</a> of a <a>flex container</a>

are boxes representing its <a>in-flow</a> contents.

Each <a>in-flow</a> child of a <a>flex container</a>

becomes a <a>flex item</a>,

and each child <a>text sequence</a>

is wrapped in an <a>anonymous</a> <a>block container</a> <a>flex item</a>.

However, if the entire <a>text sequences</a> 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 <a>text nodes</a> were ''display:none'').

<wpt>

anonymous-block.html

anonymous-flex-item-001.html

anonymous-flex-item-002.html

anonymous-flex-item-003.html

anonymous-flex-item-004.html

anonymous-flex-item-005.html

anonymous-flex-item-006.html

canvas-dynamic-change-001.html

column-flex-child-with-max-width.html

flexbox-whitespace-handling-001a.xhtml

flexbox-whitespace-handling-001b.xhtml

flexbox-whitespace-handling-002.xhtml

hittest-anonymous-box.html

percentage-descendant-of-anonymous-flex-item.html

percentage-size-subitems-001.html

whitespace-in-flexitem-001.html

</wpt>

<div class="example">

<p>Examples of flex items:

<pre class="lang-markup">

&lt;div style="display:flex">

&lt;!-- flex item: block child -->

&lt;div id="item1">block&lt;/div>

&lt;!-- flex item: floated element; floating is ignored -->

&lt;div id="item2" style="float: left;">float&lt;/div>

&lt;!-- flex item: anonymous block box around inline content -->

anonymous item 3

&lt;!-- flex item: inline child -->

&lt;span>

item 4

&lt;!-- flex items do not <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->

&lt;q style="display: block" id=not-an-item>item 4&lt;/q>

item 4

&lt;/span>

&lt;/div>

</pre>

<figure>

<figcaption>Flex items determined from above code block</figcaption>

<a href="examples/flex-item-determination.html">

<object type="image/png" data="images/flex-item-determination.png">

<ol>

<li>Flex item containing <samp>block</samp>.

<li>Flex item containing <samp>float</samp>.

<li>(Anonymous, unstyleable) flex item containing <samp>anonymous item 3</samp>.

<li>Flex item containing three blocks in succession:

<ul>

<li>Anonymous block containing <samp>item 4</samp>.

<li><code>&lt;q></code> element block containing <samp>item 4</samp>.

<li>Anonymous block containing <samp>item 4</samp>.

</ul>

</ol>

</object>

</a>

</figure>

Note that the inter-element white space disappears:

it does not become its own flex item,

even though the inter-element text <em>does</em> 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.

</div>

A <a>flex item</a> [=establishes an independent formatting context=] for its contents.

However, flex items themselves are <dfn export>flex-level</dfn> boxes, not block-level boxes:

they participate in their container's flex formatting context,

not in a block formatting context.

<hr>

Note: Authors reading this spec may want to

<a href="#item-margins">skip past the following box-generation and static position details</a>.

If the [=computed value|computed=] 'display' value of an element's nearest ancestor element

(skipping ''display:contents'' ancestors)

is ''flex'' or ''inline-flex'',

the element's own 'display' value is [=blockified=].

(See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1&sect;9.7</a> [[!CSS2]]

and [[css-display-3#transformations]]

for details on this type of 'display' value conversion.)

Note: Blockification still occurs even when the ''flex'' or ''inline-flex'' element does not end up generating a [=flex container=] box,

e.g. when it is [=replaced element|replaced=]

or in a ''display: none'' subtree.

Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.

If such a box is a <a>flex item</a>,

it is blockified first,

and so anonymous box creation will not happen.

For example, two contiguous <a>flex items</a> with ''display: table-cell''

will become two separate ''display: block'' <a>flex items</a>,

instead of being wrapped into a single anonymous table.

In the case of flex items with ''display: table'',

the table wrapper box becomes the <a>flex item</a>,

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 <a>flex item</a>’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 <a>flex item</a>.

<wpt>

flexbox-table-fixup-001.xhtml

</wpt>

<!--

███ ████████ ██████ ████████ ███████ ██████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ████████ ██████ ████████ ██ ██ ██████

█████████ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ████████ ██████ ██ ███████ ██████

-->

<h3 id='abspos-items'>

Absolutely-Positioned Flex Children</h3>

As it is <a>out-of-flow</a>,

an absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.

The [=cross-axis=] edges of the [=static-position rectangle=]

of an absolutely-positioned child of a <a>flex container</a>

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 <a>flex item</a> in the <a>flex container</a>,

assuming both the child and the flex container

were fixed-size boxes of their used size.

(For this purpose,

the child's ''margin/auto'' margins are treated as zero.)

<wpt>

abspos/abspos-autopos-htb-ltr.html

abspos/abspos-autopos-htb-rtl.html

abspos/abspos-autopos-vlr-ltr.html

abspos/abspos-autopos-vlr-rtl.html