csswg-drafts/css-flexbox-1/Overview.bs at 8b3e9a413c44e94d8caea3c589c8f7a55c32666e · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<pre class='metadata'>
Title: CSS Flexible Box Layout Module Level 1
Shortname: css-flexbox
Level: 1
Status: ED
Work Status: Testing
Group: csswg
ED: https://drafts.csswg.org/css-flexbox/
TR: https://www.w3.org/TR/css-flexbox-1/
Previous Version: https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/
Previous Version: https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/
Previous Version: https://www.w3.org/TR/2015/WD-
8891
css-flexbox-1-20150514/
Previous Version: https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
Previous Version: https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
Previous Version: https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Previous Version: https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/
Previous Version: https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
Previous Version: https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/
Previous Version: https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
Previous Version: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
Abstract: The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
Former Editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Former Editor: Neil Deakin, Mozilla Corporation, enndeakin@gmail.com
Former Editor: Ian Hickson, formerly of Opera Software, ian@hixie.ch
Former Editor: David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
!Issues List: <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, static position
Ignored Vars: item’s own max-content, maximum min-content among all items
</pre>

<pre class='link-defaults'>
spec: css21; 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
spec: css-align-3; type: value; text: start
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>
  #axis-mapping-table [rowspan=8] { writing-mode: sideways-lr; }
  #axis-mapping-table a { white-space: nowrap; }
</style>

<style>
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;
}
#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 #333;
}
#visibility-collapse-example > article,
#visibility-collapse-example > nav {
	display: table-cell;
}
#visibility-collapse-example > article {
	width: 100%;
	back
832F
ground: white;
}
#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;
}
#auto-bar > li {
	float: left;
	color: black;
	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;
}
#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 v
8096
alue for="flex-direction" lt="row-reverse">reversed</a> or
		<a href="#order-property">rearranged</a> 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 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;            /* <a section href="#order-property">Shift image before other content (in visual order)</a> */
			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.'>
					<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.'>
					<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 [[!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.
	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 supercedes the definitions of the alignment properties
	('justify-content', 'align-items', 'align-self', 'align-content')
	introduced here.

<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''.
	In-flow 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 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 width or height of a <a>flex container</a> or <a>flex item</a>,
			whichever is in the <a>main dimension</a>,
			is that box’s <dfn lt="main size|main-size">main size</dfn>.
			Its <dfn lt="main size property|max main size property|min main size property">main size property</dfn> is
			thus either its 'width' or 'height' property,
			whichever is in the <a>main dimension</a>.
	</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 width or height of a <a>flex container</a> or <a>flex item</a>,
			whichever is in the <a>cross dimension</a>,
			is that box’s <dfn lt="cross size | cross-size">cross size</dfn>.
			Its <dfn lt="cross size property|max cross size property|min cross size property">cross size property</dfn> is
			thus either its 'width' or 'height' property,
			whichever is in the <a>cross dimension</a>.
	</dl>

	Additional sizing terminology used in this specification
	is defined in <a href="http://www.w3.org/TR/css3-sizing/">CSS Intrinsic and Extrinsic Sizing</a>. [[!CSS3-SIZING]]

<!--
████████  ████  ██████  ████████  ██          ███    ██    ██
██     ██  ██  ██    ██ ██     ██ ██         ██ ██    ██  ██
██     ██  ██  ██       ██     ██ ██        ██   ██    ████
██     ██  ██   ██████  ████████  ██       ██     ██    ██
██     ██  ██        ██ ██        ██       █████████    ██
██     ██  ██  ██    ██ ██        ██       ██     ██    ██
████████  ████  ██████  ██        ████████ ██     ██    ██
-->

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

	<pre class="propdef partial">
	Name: display
	New values: flex | inline-flex
	</pre>

	<dl dfn-type=value dfn-for=display>
		<dt><dfn>flex</dfn>
		<dd>
			This value causes an element to generate a block-level <a>flex container</a> box.

		<dt><dfn>inline-flex</dfn>
		<dd>
			This value causes an element to generate an inline-level <a>flex container</a> box.
	</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>. [[!CSS21]]
	The 'overflow' property applies to <a>flex containers</a>.

	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 out-of-flow.
		* '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.
			-->

	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 in-flow contents.

	Each in-flow child of a <a>flex container</a>
	becomes a <a>flex item</a>,
	and each contiguous sequence of child <a>text runs</a>
	is wrapped in an <a>anonymous</a> <a>block container</a> <a>flex item</a>.
	However, if the entire sequence of child <a>text runs</a> contains only
	<a href="https://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a>
	(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'').

	<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 a new formatting context for its contents.
	The type of this formatting context is determined by its 'display' value, as usual.
	However, flex items themselves are <dfn>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>.

	The 'display' value of a <a>flex item</a> is <a>blockified</a>:
	if the specified 'display' of an in-flow child of an element generating a <a>flex container</a>
	is an inline-level value, it computes to its block-level equivalent.
	(See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1&sect;9.7</a> [[!CSS21]]
	and <a href="https://www.w3.org/TR/css-display/#transformations">CSS Display</a> [[!CSS3-DISPLAY]]
	for details on this type of 'display' value conversion.)

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

<!--
   ███    ████████   ██████  ████████   ███████   ██████
  ██ ██   ██     ██ ██    ██ ██     ██ ██     ██ ██    ██
 ██   ██  ██     ██ ██       ██     ██ ██     ██ ██
██     ██ ████████   ██████  ████████  ██     ██  ██████
█████████ ██     ██       ██ ██        ██     ██       ██
██     ██ ██     ██ ██    ██ ██        ██     ██ ██    ██
██     ██ ████████   ██████  ██         ███████   ██████
-->

<h3 id='abspos-items'>
Absolutely-Positioned Flex Children</h3>

	As it is out-of-flow,
	an absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.

	The <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">static position</a>
	of an absolutely-positioned child of a <a>flex container</a>
	is determined such that the child is positioned
	as 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,
	''margin/auto'' margins are treated as zero.

	<div class="note">
		In other words,
		the <a>static-position rectangle</a> of an absolutely-positioned child of a <a>flex container</a>
		is the <a>flex container's</a> content box,
		where the <dfn>static-position rectangle</dfn> is the <a>alignment container</a>
		used to determine the static-position offsets of an absolutely-positioned box.

		(In block layout the static position rectangle corresponds to the position of the “hypothetical box”
		described in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2.1&sect;10.3.7</a>.
		Since it has no alignment properties,
		CSS2.1 always uses a <a>block-start</a> <a>inline-start</a> alignment
		of the absolutely-positioned box within the <a>static-position rectangle</a>.
		Note that this definition will eventually move to the CSS Positioning module.)
	</div>

	<div class='example'>
		The effect of this is that if you set, for example,
		''align-self: center;'' on an absolutely-positioned child of a <a>flex container</a>,
		auto offsets on the child will center it in the <a>flex container's</a> <a>cross axis</a>.

		However, since the absolutely-positioned box is considered to be “fixed-size”,
		a value of ''align-self/stretch'' is treated the same as ''align-self/flex-start''.
	</div>

<h3 id='item-margins'>
Flex Item Margins and Paddings</h3>

	The margins of adjacent <a>flex items</a> do not
	<a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>.

	Percentage margins and paddings on <a>flex items</a> can be resolved against either:

	* their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
	* the inline axis (left/right/top/bottom percentages all resolve against width)

	A User Agent must choose one of these two behaviors.

	Note: This variance sucks, but it accurately captures the current state of the world
	(no consensus among implementations, and no consensus within the CSSWG).
	It is the CSSWG's intention that browsers will converge on one of the behaviors,
	at which time the spec will be amended to require that.

	Advisement: Authors should avoid using percentages in paddings or margins on <a>flex items</a> entirely,
	as they will get different behavior in different browsers.

	Auto margins expand to absorb extra space in the corresponding dimension.
	They can be used for alignment,
	or to push adjacent flex items apart.
	See <a href="#auto-margins">Aligning with <span class=css>auto</span> margins</a>.

<h3 id='painting'>
Flex Item Z-Ordering</h3>

	<a>Flex items</a> paint exactly the same as inline blocks [[!CSS21]],
	except that 'order'-modified document order is used in place of raw document order,
	and 'z-index'
	values other than ''z-index/auto'' create a stacking context
	even if 'position' is ''static''
	(behaving exactly as if 'position' were ''relative'').

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

<!--
 ██████   ███████  ██       ██          ███    ████████   ██████  ████████ ████████
██    ██ ██     ██ ██       ██         ██ ██   ██     ██ ██    ██ ██       ██     ██
██       ██     ██ ██       ██        ██   ██  ██     ██ ██       ██       ██     ██
██       ██     ██ ██       ██       ██     ██ ████████   ██████  ██████   ██     ██
██       ██     ██ ██       ██       █████████ ██              ██ ██       ██     ██
██    ██ ██     ██ ██       ██       ██     ██ ██        ██    ██ ██       ██     ██
 ██████   ███████  ████████ ████████ ██     ██ ██         ██████  ████████ ████████
-->

<h3 id='visibility-collapse'>
Collapsed Items</h3>

	Specifying ''visibility:collapse'' on a flex item
	causes it to become a <dfn lt="collapsed flex item" l
932D
ocal-lt="collapsed">collapsed flex item</dfn>,
	producing an effect similar to ''visibility:collapse'' on a table-row or table-column:
	the collapsed flex item is removed from rendering entirely,
	but leaves behind a "strut" that keeps the flex line's cross-size stable.
	Thus, if a flex container has only one flex line,
	dynamically collapsing or uncollapsing items
	may change the <a>flex container</a>'s <a>main size</a>, but
	is guaranteed to have no effect on its <a>cross size</a>
	and won't cause the rest of the page's layout to "wobble".
	Flex line wrapping <em>is</em> 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 <a href="https://www.w3.org/TR/CSS2/intro.html#formatting-structure">formatting structure</a>.
	Therefore, unlike on ''display:none'' items [[!CSS21]],
	effects that depend on a box appearing in the formatting structure
	(like incrementing counters or running animations and transitions)
	still operate on collapsed items.

	<div class="example">
		In the following example,
		a sidebar is sized to fit its content.
		''visibility: collapse'' is used to dynamically hide parts of a navigation sidebar
		without affecting its width, even though the widest item (&ldquo;Architecture&rdquo;)
		is in a collapsed section.

		<figure>
			<figcaption>Sample live rendering for example code below</figcaption>
			<div id="visibility-collapse-example">
			<!-- No, don't look at this source code, look at the other source code. -->
			  <nav>
			    <ul>
			      <li id="nav-about"><a href="#nav-about">About</a>
			        <ul>
			          <li><a href="#">History</a>
			          <li><a href="#">Mission</a>
			          <li><a href="#">People</a>
			        </ul>
			      <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>
			          <li><a href="#">Blog</a>
			          <li><a href="#">Forums</a>
			          <!-- li><a href="#">Events</a> -->
			        </ul>
			    </ul>
			  </nav>
			  <article>
			    Hover over the menu to the left:
			    each section expands to show its sub-items.
			    In order to keep the sidebar width (and this main area width) stable,
			    ''visibility: collapse'' is used instead of ''display: none''.
			    This results in a sidebar that is always wide enough for the word “Architecture”,
			    even though it is not always visible.
			  </article>
			</div>
		</figure>

		<pre class="lang-css">
			  @media (min-width: 60em) {
			    /* <a href="https://www.w3.org/TR/css3-mediaqueries/#width">two column layout only when enough room</a> (relative to default text size) */
			    div { display: flex; }
			    #main {
			      flex: 1;         /* <a href="#flexibility">Main takes up all remaining space</a> */
			      order: 1;        /* <a href="#order-property">Place it after (to the right of) the navigation</a> */
			      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;
			  }
		</pre>
		<pre class="lang-markup">
			&lt;div>
			  &lt;article id="main">
			    Interesting Stuff to Read
			  &lt;/article>
			  &lt;nav>
			    &lt;ul>
			      &lt;li id="nav-about">&lt;a href="#nav-about">About&lt;/a>
			        &hellip;
			      &lt;li id="nav-projects">&lt;a href="#nav-projects">Projects&lt;/a>
			        &lt;ul>
			          &lt;li>&lt;a href="&hellip;">Art&lt;/a>
			          &lt;li>&lt;a href="&hellip;">Architecture&lt;/a>
			          &lt;li>&lt;a href="&hellip;">Music&lt;/a>
			        &lt;/ul>
			      &lt;li id="nav-interact">&lt;a href="#nav-interact">Interact&lt;/a>
			        &hellip;
			    &lt;/ul>
			  &lt;/nav>
			&lt;/div>
			&lt;footer>
			&hellip;
		</pre>
	</div>

	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 <a href="#layout-algorithm">Flex Layout Algorithm</a>
	for the normative definition of how ''visibility:collapse''
	interacts with flex layout.

	Note: Using ''visibility:collapse'' on any flex items
	will cause the flex layout algorithm to repeat partway through,
	re-running the most expensive steps.
	It's recommended that authors continue to use ''display:none'' to hide items
	if the items will not be dynamically collapsed and uncollapsed,
	as that is more efficient for the layout engine.
	(Since only part of the steps need to be repeated when 'visibility' is changed,
	however, 'visibility: collapse' is still recommended for dynamic cases.)

<!--
██     ██ ████ ██    ██
███   ███  ██  ███   ██          ██   ██
████ ████  ██  ████  ██           ██ ██
██ ███ ██  ██  ██ ██ ██ ███████ █████████
██     ██  ██  ██  ████           ██ ██
██     ██  ██  ██   ███          ██   ██
██     ██ ████ ██    ██
-->

<h3 id="min-size-auto">
Automatic Minimum Size of Flex Items</h3>

	To provide a more reasonable default minimum size for <a>flex items</a>,
	as the initial value of the 'min-width' and 'min-height' properties defined in CSS 2.1. [[!CSS21]]

	<pre class="propdef partial">
	Name: min-width, min-height
	New values: auto
	New initial value: auto
	New computed value: the percentage as specified or the absolute length or a keyword
	</pre>

	<dl dfn-type=value dfn-for="min-width, min-height">
		<dt><dfn>auto</dfn>
		<dd>
			On a <a>flex item</a> whose 'overflow' is ''overflow/visible'' in the <a>main axis</a>,
			when specified on the <a>flex item's</a> main-axis min-size property,
			specifies an <a>automatic minimum size</a>.
			It otherwise computes to ''0''
			(unless otherwise defined by a future specification).
	</dl>

	In general, the <dfn dfn export>automatic minimum size</dfn> of a <a>flex item</a>
	is the smaller of its <a>content size</a> and its <a>specified size</a>.
	However, if the box has an aspect ratio and no <a>specified size</a>,
	its <a>automatic minimum size</a>
	is the smaller of its <a>content size</a> and its <a>transferred size</a>.
	If the box has neither a <a>specified size</a> nor an aspect ratio,
	its <a>automatic minimum size</a> is the <a>content size</a>.

	The <a>content size</a>, <a>specified size</a>, and <a>transferred size</a>
	used in this calculation account for the relevant min/max/preferred size properties
	so that the <a>automatic minimum size</a> does not interfere with any author-provided constraints,
	and are defined below:

	<dl>
		<dt><dfn dfn noexport>specified size</dfn>
		<dd>
			If the item’s computed <a>main size property</a> is <a>definite</a>,
			then the <a>specified size</a> is that size
			(clamped by its <a>max main size property</a> if it's <a>definite</a>).
			It is otherwise undefined.

		<dt><dfn dfn noexport>transferred size</dfn>
		<dd>
			If the item has an intrinsic aspect ratio
			and its computed <a>cross size property</a> is <a>definite</a>,
			then the <a>transferred size</a> is that size
			(clamped by its <a lt="min cross size property">min and max cross size properties</a> if they are <a>definite</a>),
			converted through the aspect ratio.
			It is otherwise undefined.

		<dt><dfn dfn noexport>content size</dfn>
		<dd>
			The <a>content size</a> is the <a>min-content size</a> in the <a>main axis</a>,
			clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min cross size property">min and max cross size properties</a> converted through the aspect ratio,
			and then further clamped by the <a>max main size property</a> if that is <a>definite</a>.
	</dl>

	For the purpose of calculating an intrinsic size of the element
	(e.g. the element's <a>min-content size</a>),
	this value causes the element's size in that axis to become indefinite
	(even if e.g. its 'width' property specifies a <a>definite</a> size).
	Note this means that percentages calculated against this size
	will be treated as ''height/auto''.

	Nonetheless, although this may require an additional layout pass to re-resolve percentages in some cases,
	this value
	(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS3-SIZING]])
	does not prevent the resolution of percentage sizes within the item.

	<div class="note" id="min-size-opt">
		Note that while a content-based minimum size is often appropriate,
		and helps prevent content from overlapping or spilling outside its container,
		in some cases it is not:

		In particular, if flex sizing is being used for a major content area of a document,
		it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
		A content-based minimum width could result in a large table or large image
		stretching the size of the entire content area into an overflow zone,
		and thereby making lines of text gratuitously long and hard to read.

		Note also, when content-based sizing is used on an item with large amounts of content,
		the layout engine must traverse all of this content before finding its minimum size,
		whereas if the author sets an explicit minimum, this is not necessary.
		(For items with small amounts of content, however,
		this traversal is trivial and therefore not a performance concern.)
	</div>


<h2 id="flow-order">
Ordering and Orientation</h2>

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

	Note: The reordering capabilities of flex layout intentionally affect