Overview.bs

<h1>CSS Flexible Box Layout Module Level 1</h1>

<pre class='metadata'>
Shortname: css-flexbox
Level: 1
Status: ED
Work Status: Testing
Group: csswg
ED: http://dev.w3.org/csswg/css-flexbox/
TR: http://www.w3.org/TR/css-flexbox-1/
Previous Version: http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
Previous Version: http://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
Previous Version: http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
Previous Version: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Previous Version: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/
Previous Version: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
Previous Version: http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/
Previous Version: http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
Previous Version: http://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
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
Former Editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
Former Editor: L. David Baron, Mozilla Corporation, dbaron@dbaron.org
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="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925">http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925</a>
Ignored Terms: column-*, auto, first formatted line, first letter, static position
</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: end
</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[start="0"] { counter-reset: list -1; }
ol[start="0"],
ol.continue { list-style: none; }
ol[start="0"] > li,
ol.continue > li { position: relative; counter-increment: list; }
ol[start="0"] > 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%;
	background: 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;
}
#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="http://www.w3.org/TR/CSS2/visuren.html#floats">floats</a> and
	<a href="http://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
		<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.

<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="http://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>
			A <a>flex item</a>’s width or height,
			whichever is in the <a>main dimension</a>,
			is the item's <dfn>main size</dfn>.
			The <a>flex item</a>’s <dfn lt="main size property|max main size property|min main size property">main size property</dfn> is
			either the '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 item</a>,
			whichever is in the <a>cross dimension</a>,
			is the item's <dfn>cross size</dfn>.
			The <dfn lt="cross size property|max cross size property|min cross size property">cross size property</dfn> is
			whichever of 'width' or 'height' that is in the <a>cross dimension</a>.
	</dl>

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

<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="http://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:

		* the 'column-*' properties in the Multi-column Layout module [[!CSS3COL]] have no effect on a flex container.
		* '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="http://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 run of text that is directly contained inside a <a>flex container</a>
	is wrapped in an anonymous <a>flex item</a>.
	However, an anonymous flex item that contains only
	<a href="http://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)
	is not rendered (just as if it 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="http://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="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1&sect;9.7</a> [[!CSS21]]
	and <a href="http://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.

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

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

	An absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.
	However, it does participate in the <a href="#algo-flex-order">reordering step</a> (see 'order'),
	which has an effect on painting order.

	The <a href="http://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.

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

	<div class="note">
		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 it corresponds to the position of the “hypothetical box”
		described in <a href="http://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>

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

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

	Percentage margins and paddings on <a>flex items</a>
	are always resolved against their own axis:
	left and right margins resolve against the containing block's width,
	and top and bottom margins resolve against the containing block's height.
	Unlike blocks, <a>block-axis</a> margins do not resolve against
	the inline dimension of their containing block.

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

	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" local-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="http://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="http://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">
Implied Minimum Size of Flex Items</h3>

	To provide a more reasonable default minimum size for <a>flex items</a>,
	this specification introduces a new ''min-width/auto'' value
	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,
			the following table gives the minimum size:

			<table class=data>
				<colgroup span=2></colgroup>
				<colgroup span=1></colgroup>
				<thead>
					<tr>
						<th>Specified Size
						<th>Transferred Size
						<th>Minimum Size
				<tbody>
					<tr>
						<td>
						<td>
						<td><var>content size</var>
					<tr>
						<td>✓
						<td>
						<td>min(<var>specified size</var>, <var>content size</var>)
					<tr>
						<td>
						<td>✓
						<td>min(<var>transferred size</var>, <var>content size</var>)
					<tr>
						<td>✓
						<td>✓
						<td>min(<var>specified size</var>, <var>content size</var>)
			</table>

			Where:

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

				<dt><var>transferred size</var>
				<dd>
					If the item has an intrinsic aspect ratio
					and its computed <a>cross size property</a> is <a>definite</a>,
					then the <var>transferred size</var> 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><var>content size</var>
				<dd>
					The <var>content size</var> 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>

			Otherwise,
			this keyword computes to ''0''
			(unless otherwise defined by a future specification).
	</dl>

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

	In order to prevent cycling sizing,
	the ''auto'' value of 'min-height' and 'max-height'
	does not factor into the percentage size resolution of the box’s contents.
	For example, a percentage-height block whose flex item parent has
	''height: 120em; min-height: auto''
	will size itself against ''height: 120em'' regardless of the impact
	that 'min-height' might have on the used size of the flex item.

<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
	<em>only the visual rendering</em>,
	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 <a href="#order-accessibility">Reordering and Accessibility</a>
	and the <a href="#overview">Flex Layout Overview</a> for examples
	that use this dichotomy to improve accessibility.

	Advisement:
	Authors <em>must not</em> use 'order' or the ''*-reverse'' values of 'flex-flow'/'flex-direction'
	as a substitute for correct source ordering,
	as that can ruin the accessibility of the document.

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

<h3 id='flex-direction-property'>
Flex Flow Direction: the 'flex-direction' property</h3>

	<pre class='propdef'>
	Name: flex-direction
	Value: row | row-reverse | column | column-reverse
	Initial: row
	Applies to: <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	</pre>

	The 'flex-direction' property specifies how <a>flex items</a> are placed in the flex container,
	by setting the direction of the flex container's <a>main axis</a>.
	This determines the direction in which flex items are laid out.

	<dl dfn-type=value dfn-for=flex-direction>
		<dt><dfn>row</dfn>
		<dd>
			The flex container's <a>main axis</a> has the same orientation as the
			<a>inline axis</a>
			of the current <a>writing mode</a>.
			The <a>main-start</a> and <a>main-end</a> directions are equivalent to the
			<a>inline-start</a> and
			<a>inline-end</a> directions, respectively,
			of the current <a>writing mode</a>.

		<dt><dfn>row-reverse</dfn>
		<dd>
			Same as ''row'',
			except the <a>main-start</a> and <a>main-end</a> directions are swapped.

		<dt><dfn>column</dfn>
		<dd>
			The flex container's <a>main axis</a> has the same orientation as the
			<a>block axis</a>
			of the current <a>writing mode</a>.
			The <a>main-start</a> and <a>main-end</a> directions are equivalent to the
			<a>block-start</a> and
			<a>block-end</a> directions, respectively,
			of the current <a>writing mode</a>.

		<dt><dfn>column-reverse</dfn>
		<dd>
			Same as ''column'',
			except the <a>main-start</a> and <a>main-end</a> directions are swapped.
	</dl>

	Note: 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.

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

<h3 id='flex-wrap-property'>
Flex Line Wrapping: the 'flex-wrap' property</h3>

	<pre class='propdef'>
	Name: flex-wrap
	Value: nowrap | wrap | wrap-reverse
	Initial: nowrap
	Applies to: <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	</pre>

	The 'flex-wrap' property controls whether the flex container is <a>single-line</a> or <a>multi-line</a>,
	and the direction of the <a>cross-axis</a>,
	which determines the direction new lines are stacked in.

	<dl dfn-type=value dfn-for=flex-wrap>
		<dt><dfn>nowrap</dfn>
		<dd>
			The flex container is <a>single-line</a>.

		<dt><dfn>wrap</dfn>
		<dd>
			The flex container is <a>multi-line</a>.

		<dt><dfn>wrap-reverse</dfn>
		<dd>
			Same as ''wrap''.
	</dl>

	For the values that are not ''wrap-reverse'',
	the <a>cross-start</a> direction is equivalent to either
	the <a>inline-start</a> or <a>block-start</a> direction of the current <a>writing mode</a>
	(whichever is in the <a>cross axis</a>)
	and the <a>cross-end</a> direction is the opposite direction of <a>cross-start</a>.
	When 'flex-wrap' is ''wrap-reverse'',
	the <a>cross-start</a> and <a>cross-end</a> directions
	are swapped.

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

<h3 id='flex-flow-property'>
Flex Direction and Wrap: the 'flex-flow' shorthand</h3>

	<pre class='propdef shorthand'>
	Name: flex-flow
	Value: <'flex-direction'> || <'flex-wrap'>
	</pre>

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

	<div class="example">
		Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:

		<table style="margin: 0 auto; vertical-align: middle; border-spacing: 2em 1em;">
			<tr>
				<td>
					<pre class="lang-css">
					div { flex-flow: row; }
					/* Initial value. Main-axis is inline, no wrapping.
					   (Items will either shrink to fit or overflow.) */
					</pre>
				<td><img src='images/flex-flow1.svg' width=205 height=46 alt>
			<tr>
				<td>
					<pre class="lang-css">
					div { flex-flow: column wrap; }
					/* Main-axis is block-direction (top to bottom)
					   and lines wrap in the inline direction (rightwards). */
					</pre>
				<td><img src='images/flex-flow2.svg' width=89 height=160 alt>
			<tr>
				<td>
					<pre class="lang-css">
					div { flex-flow: row-reverse wrap-reverse; }
					/* Main-axis is the opposite of inline direction
					   (right to left). New lines wrap upwards. */
					</pre>
				<td><img src='images/flex-flow3.svg' width=160 height=89 alt>
		</table>
	</div>

	<div class='note'>
		Note that the 'flex-flow' directions are <a>writing mode</a> sensitive.
		In vertical Japanese, for example,
		a ''row'' flex container lays out its contents from top to bottom,
		as seen in this example:

		<table style="margin: 1em auto; text-align: center;">
			<thead>
				<tr>
					<th>English
					<th>Japanese
			<tbody>
				<tr>
					<td><pre class="lang-css">flex-flow: row wrap;<br>writing-mode: horizontal-tb;</pre>
					<td><pre class="lang-css">flex-flow: row wrap;<br>writing-mode: vertical-rl;</pre>
				<tr>
					<td><img src='images/flex-flow-english.svg' alt>
					<td><img src='images/flex-flow-japanese.svg' alt>
		</table>
	</div>

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

<h3 id='order-property'>
Display Order: the 'order' property</h3>

	<a>Flex items</a> 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.

	<pre class='propdef'>
	Name: order
	Value: <<integer>>
	Initial: 0
	Applies to: <a>flex items</a> and absolutely-positioned children of <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	Animatable: yes
	</pre>

	The 'order' property controls the order in which
	children of a flex container appear within the flex container,
	by assigning them to ordinal groups.
	It takes a single <dfn value for=order><<integer>></dfn> value,
	which specifies which ordinal group the <a>flex item</a> belongs to.

	A flex container lays out its content in <dfn export>order-modified document order</dfn>,
	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 <a href="http://www.w3.org/TR/CSS2/zindex.html">painting order</a> [[!CSS21]],
	exactly as if the flex items were reordered in the source document.

	<div class='example'>
		The following figure shows a simple tabbed interface, where the tab for the active pane is always first:

		<figure><img src="images/flex-order-example.png" alt></figure>

		This could be implemented with the following CSS (showing only the relevant code):

		<pre class="lang-css">
			.tabs {
				display: flex;
			}
			.tabs > .current {
				order: -1; /* Lower than the default of 0 */
			}
		</pre>
	</div>

	Unless otherwise specified by a future specification,
	this property has no effect on boxes that are not children of a <a>flex container</a>.

<h4 id="order-accessibility">
Reordering and Accessibility</h4>

	The 'order' property <em>does not</em> affect ordering in non-visual media
	(such as <a href="http://www.w3.org/TR/css3-speech/">speech</a>).
	Likewise, 'order' does not affect
	the default traversal order of sequential navigation modes
	(such as cycling through links, see e.g. <a href="http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a> [[HTML5]]).

	Advisement:
	Authors <em>must</em> use 'order' only for visual, not logical, reordering of content.
	Style sheets that use 'order' to perform logical reordering are non-conforming.

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

	<div class='example'>
		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:

		<div class='code-and-figure'>
			<div>
				<pre class="lang-markup">
					&lt;!DOCTYPE html>
					&lt;header>...&lt;/header>
					&lt;div id="main">
					   &lt;article>...&lt;/article>
					   &lt;nav>...&lt;/nav>
					   &lt;aside>...&lt;/aside>
					&lt;/div>
					&lt;footer>...&lt;/footer>
				</pre>
			</div>
			<div><img src="images/flex-order-page.svg" width=400 height=360 alt="In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left."></div>
		</div>

		This layout can be easily achieved with flex layout:

		<pre class="lang-css">
			#main { display: flex; }
			#main > article { order: 2; min-width: 12em; flex:1; }
			#main > nav     { order: 1; width: 200px; }
			#main > aside   { order: 3; width: 200px; }
		</pre>

		As an added bonus,
		the columns will all be <a value for="align-self" lt="stretch">equal-height</a> 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:

		<pre class="lang-css">
			@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;
				}
			}
		</pre>

		<small>(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)</small>
	</div>

	In order to preserve the author's intended ordering in all presentation modes,
	authoring tools&mdash;including WYSIWYG editors as well as Web-based authoring aids--
	must reorder the underlying document source
	and not use 'order' to perform reordering
	unless the author has explicitly indicated that the underlying
	document order (which determines speech and navigation order) should be
	<em>out-of-sync</em> with the visual order.

	<div class="example">
		For example, a tool might offer both drag-and-drop reordering of flex items
		as well as handling of media queries for alternate layouts per screen size range.

		Since most of the time, reordering should affect all screen ranges
		as well as navigation and speech order,
		the tool would perform drag-and-drop reordering at the DOM layer.
		In some cases, however, the author may want different visual orderings per screen size.
		The tool could offer this functionality by using 'order' together with media queries,
		but also tie the smallest screen size's ordering to the underlying DOM order
		(since this is most likely to be a logical linear presentation order)
		while using 'order' to determine the visual presentation order in other size ranges.

		This tool would be conformant, whereas a tool that only ever used 'order'
		to handle drag-and-drop reordering
		(however convenient it might be to implement it that way)
		would be non-conformant.
	</div>

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

<h2 id='flex-lines'>
Flex Lines</h2>

	<a>Flex items</a> in a <a>flex container</a> are laid out and aligned
	within <dfn export lt="flex line">flex lines</dfn>,
	hypothetical containers used for grouping and alignment by the layout algorithm.
	A flex container can be either <a>single-line</a> or <a>multi-line</a>,
	depending on the 'flex-wrap' property:

	* A <dfn>single-line</dfn> flex container
		(i.e. one with ''flex-wrap: nowrap'')
		lays out all of its children in a single line,
		even if that would cause its contents to overflow.
	* A <dfn>multi-line</dfn> flex container
		(i.e. one with ''flex-wrap: wrap'' or ''flex-wrap: wrap-reverse'')
		breaks its <a>flex items</a> 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 <a>cross axis</a>
		according to the 'flex-wrap' property.
		Every line contains at least one <a>flex item</a>,
		unless the flex container itself is completely empty.

	<div class=example>
		This example shows four buttons that do not fit side-by-side horizontally,
		and therefore will wrap into multiple lines.

		<pre class="lang-css">
			#flex {
				display: flex;
				flex-flow: row wrap;
				width: 300px;
			}
			.item {
				width: 80px;
			}
		</pre>
		<pre class="lang-markup">
			&lt;div id="flex">
				&lt;div class="item">1&lt;/div>
				&lt;div class="item">2&lt;/div>
				&lt;div class="item">3&lt;/div>
				&lt;div class="item">4&lt;/div>
			&lt;/div>
		</pre>

		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 <a>multi-line</a> flex container
		(due to the ''wrap'' keyword appearing in its value),
		the flex container will create an additional line to contain the last item.

		<figure>
			<img src="images/multiline-no-flex.svg">
			<figcaption>An example rendering of the multi-line flex container.</figcaption>
		</figure>
	</div>

	Once content is broken into lines,
	each line is laid out independently;
	flexible lengths and the 'justify-content' and 'align-self' properties only consider the items on a single line at a time.

	In a <a>multi-line</a> <a>flex container</a> (even one with only a single line),
	the <a>cross size</a> of each line
	is the minimum size necessary to contain the <a>flex items</a> on the line
	(after alignment due to 'align-self'),
	and the lines are aligned within the flex container with the 'align-content' property.
	In a <a>single-line</a> <a>flex container</a>,
	the <a>cross size</a> of the line is the <a>cross size</a> of the flex container,
	and 'align-content' has no effect.
	The <a>main size</a> of a line is always the same as the <a>main size</a> of the flex container's content box.

	<div class='example'>
		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 receive 20px of extra width,
		each ending up 100px wide.
		The remaining item is on a line of its own
		and will stretch to the entire width of the line, i.e. 300px.

		<figure>
			<img src="images/multiline-flex.svg">

			<figcaption>
				A rendering of the same as above,
				but with the items all given ''flex: auto''.
			</figcaption>
		</figure>
	</div>

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

<h2 id='flexibility'>
Flexibility</h2>

	The defining aspect of flex layout is the ability to make the <a>flex items</a> “flex”,
	altering their width/height to fill the available space in the <a>main dimension</a>.
	This is done with the 'flex' property.
	A flex container distributes free space to its items (proportional to their <a>flex grow factor</a>) to fill the container,
	or shrinks them (proportional to their <a>flex shrink factor</a>) to prevent overflow.


<h3 id='flex-property'>
The 'flex' Shorthand</h3>

	<pre class='propdef'>
	Name: flex
	Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
	Initial: see individual properties
	Applies to: <a>flex items</a>
	Inherited: see individual properties
	Computed value: see individual properties
	Media: visual
	Canonical order: per grammar
	</pre>

	The 'flex' property specifies the components of a <dfn>flexible length</dfn>:
	the <a>flex grow factor</a>
	and <a>flex shrink factor</a>,
	and the <a>flex basis</a>.
	When a box is a <a>flex item</a>,
	'flex' is consulted <em>instead of</em> the <a>main size property</a>
	to determine the <a>main size</a> of the box.
	If a box is not a <a>flex item</a>,
	'flex' has no effect.

	<dl dfn-type=value dfn-for=flex>
		<dt><dfn><<'flex-grow'>></dfn>
		<dd>
			This <<number>> component sets 'flex-grow' <a href="#flex-components">longhand</a>
			and specifies the <dfn dfn>flex grow factor</dfn>,
			which determines how much the <a>flex item</a> will grow
			relative to the rest of the <a>flex items</a> in the flex container
			when positive free space is distributed.
			When omitted, it is set to ''1''.

		<dt><dfn><<'flex-shrink'>></dfn>
		<dd>
			This <<number>> component sets 'flex-shrink' <a href="#flex-components">longhand</a>
			and specifies the <dfn dfn>flex shrink factor</dfn>,
			which determines how much the <a>flex item</a> will shrink
			relative to the rest of the <a>flex items</a> in the flex container
			when negative free space is distributed.
			When omitted, it is set to ''1''.

			Note: The <a>flex shrink factor</a> is multiplied by the <a>flex base size</a> when distributing negative space.
			This distributes negative space in proportion to how much the item is able to shrink,
			so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced.

		<dt><dfn><<'flex-basis'>></dfn>
		<dd>
			This component sets the 'flex-basis' <a href="#flex-components">longhand</a>
			and specifies the <dfn dfn>flex basis</dfn>:
			the initial <a>main size</a> of the <a>flex item</a>,
			before free space is distributed according to the flex factors.
			It accepts the same values as the 'width' and 'height' properties
			(except that ''flex-basis/auto'' is treated differently)
			plus the ''content'' keyword:

			<dl dfn-type=value dfn-for=flex-basis>
				<dt><dfn>auto</dfn>
				<dd>
					When specified on a <a>flex item</a>, the ''flex-basis/auto'' keyword
					retrieves the value of the <a>main size property</a> as the used 'flex-basis'.
					If that value is itself ''auto'', then the used value is ''flex-basis/content''.

				<dt><dfn>content</dfn>
				<dd>
					Indicates automatic sizing, based on the <a>flex item</a>’s content.

					Note: This value was not present in the initial release of Flexible Box Layout,
					and thus some older implementations will not support it.
					The equivalent effect can be achieved by using ''flex/auto''
					together with a main size ('width' or 'height') of ''width/auto''.

				<dt><<'width'>>
				<dd>
					For all other values,
					'flex-basis' is resolved the same way as for 'width' and 'height'.
			</dl>

			When omitted from the 'flex' shorthand, its specified value is ''0''.

		<dt><dfn>none</dfn>
		<dd>
			The keyword ''none'' expands to ''0 0 auto''.
	</dl>

	<figure>
		<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
		<figcaption>
			A diagram showing the difference between "absolute" flex
			(starting from a basis of zero)
			and "relative" flex
			(starting from a basis of the item's content size).
			The three items have flex factors of ''1'', ''1'', and ''2'', respectively:
			notice that the item with a flex factor of ''2'' grows twice as fast as the others.
		</figcaption>
	</figure>

	The initial values of the 'flex' components are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 auto</a>.

	Note: The initial values of 'flex-grow' and 'flex-basis'
	are different from their defaults when omitted in the 'flex' shorthand.
	This is so that the 'flex' shorthand can better accommodate the most <a href="#flex-common">common cases</a>.

	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.

<h4 id='flex-common'>
Basic Values of 'flex'</h4>

	<em>This section is informative.</em>

	The list below summarizes the effects of the four 'flex' values
	that respresent most commonly-desired effects:

	<dl>
		<dt id="flex-initial">''flex: initial''
		<dd>
			Equivalent to ''flex: 0 1 auto''. (This is the initial value.)
			Sizes the item based on the 'width'/'height' properties.
			(If the item's <a>main size property</a> computes to <a value for=width>auto</a>,
			this will size the flex item based on its contents.)
			Makes the flex item inflexible when there is positive free space,
			but allows it to shrink to its minimum size when there is insufficient space.
			The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins"><span class=css>auto</span> margins</a>
			can be used to align flex items along the <a>main axis</a>.

		<dt>''flex: auto''
		<dd>
			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 <a>main axis</a>.
			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''.

		<dt>''flex: none''
		<dd>
			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.

		<dt>''flex: &lt;positive-number>''
		<dd>
			Equivalent to ''flex: &lt;positive-number> 1 0''.
			Makes the flex item flexible and sets the <a>flex basis</a> 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.
	</dl>

	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 [[#min-size-auto]].)

<h3 id='flex-components'>
Components of Flexibility</h3>

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

	Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
	rather than with its longhand properties directly,
	as the shorthand correctly resets any unspecified components
	to accommodate <a href="#flex-common">common uses</a>.

<h4 id='flex-grow-property'>
The 'flex-grow' property</h4>

	<pre class='propdef'>
	Name: flex-grow
	Value: <<number>>
	Initial: 0
	Applies to: <a>flex items</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	Animatable: yes
	</pre>

	Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
	rather than with 'flex-grow' directly,
	as the shorthand correctly resets any unspecified components
	to accommodate <a href="#flex-common">common uses</a>.

	The 'flex-grow' property sets the <a>flex grow factor</a>
	to the provided <dfn value for=flex-grow><<number>></dfn>.
	Negative numbers are invalid.

<h4 id='flex-shrink-property'>
The 'flex-shrink' property</h4>

	<pre class='propdef'>
	Name: flex-shrink
	Value: <<number>>
	Initial: 1
	Applies to: <a>flex items</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	Animatable: yes
	</pre>

	Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
	rather than with 'flex-shrink' directly,
	as the shorthand correctly resets any unspecified components
	to accommodate <a href="#flex-common">common uses</a>.

	The 'flex-shrink' property sets the <a>flex shrink factor</a>
	to the provided <dfn value for=flex-shrink><<number>></dfn>.
	Negative numbers are invalid.

<h4 id='flex-basis-property'>
The 'flex-basis' property</h4>

	<pre class='propdef'>
	Name: flex-basis
	Value: content | <<'width'>>
	Initial: auto
	Applies to: <a>flex items</a>
	Inherited: no
	Computed value: as specified, with lengths made absolute
	Percentages: relative to the <a>flex container's</a> inner <a>main size</a>
	Media: visual
	Animatable: as 'width'
	</pre>

	Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
	rather than with 'flex-basis' directly,
	as the shorthand correctly resets any unspecified components
	to accommodate <a href="#flex-common">common uses</a>.

	The 'flex-basis' property sets the <a>flex basis</a>.
	It accepts the same values as the 'width' and 'height' property, plus ''content''.


	For all values other than ''flex-basis/auto'' and ''content'' (defined above),
	'flex-basis' is resolved the same way as 'width' in horizontal writing modes [[!CSS21]].
	For example, percentage values of 'flex-basis' are resolved against
	the flex item's containing block (i.e. its flex container)
	and if that containing block's size is <a>indefinite</a>,
	the result is the same as a <a>main size</a> of <a value for=width>auto</a>
	(which in this case is treated as ''content'').
	As another corollary,
	'flex-basis' determines the size of the content box,
	unless otherwise specified
	such as by 'box-sizing' [[CSS3UI]].

<h2 id='alignment'>
Alignment</h2>

	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.
	<a>Flex items</a> also respect the alignment properties from <a href="http://www.w3.org/TR/css3-align/">CSS Box Alignment</a>,
	which allow easy keyword-based alignment of items in both the <a>main axis</a> and <a>cross axis</a>.
	These properties make many common types of alignment trivial,
	including some things that were very difficult in CSS 2.1,
	like horizontal and vertical centering.

	Note: While the alignment properties are defined in <a href="http://www.w3.org/TR/css3-align/">CSS Box Alignment</a>,
	Flexible Box Layout reproduces the definitions of the relevant ones here
	so as to not create a normative dependency that may slow down advancement of the spec.
	These properties apply only to flex layout
	until <a href="http://www.w3.org/TR/css3-align/">CSS Box Alignment Level 3</a> is finished
	and defines their effect for other layout modes.

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

<h3 id='auto-margins'>
Aligning with <a value for=margin>auto</a> margins</h3>

	<em>This section is non-normative.
		The normative definition of how margins affect flex items is in the <a href="#layout-algorithm">Flex Layout Algorithm</a> section.</em>

	Auto margins on flex items have an effect very similar to auto margins in block flow:

	* During calculations of flex bases and flexible lengths, auto margins are treated as ''0''.
	* Prior to alignment via 'justify-content' and 'align-self',
		any positive free space is distributed to auto margins in that dimension.
	* Overflowing boxes ignore their auto margins and overflow in the <a>end</a> direction.

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

	<div class='example'>
		One use of ''margin/auto'' margins in the main axis is to separate flex items into distinct "groups".
		The following example shows how to use this to reproduce a common UI pattern -
		a single bar of actions with some aligned on the left and others aligned on the right.

		<figure>
			<figcaption>
				Sample rendering of the code below.
			</figcaption>
			<ul id='auto-bar'>
				<li><a href=#>About</a>
				<li><a href=#>Projects</a>
				<li><a href=#>Interact</a>
				<li id='login'><a href=#>Login</a>
			</ul>
		</figure>

		<pre class="lang-css">
			nav > ul {
				display: flex;
			}
			nav > ul > #login {
				margin-left: auto;
			}
		</pre>
		<pre class="lang-markup">
			&lt;nav>
				&lt;ul>
					&lt;li>&lt;a href=/about>About&lt;/a>
					&lt;li>&lt;a href=/projects>Projects&lt;/a>
					&lt;li>&lt;a href=/interact>Interact&lt;/a>
					&lt;li id="login">&lt;a href=/login>Login&lt;/a>
				&lt;/ul>
			&lt;/nav>
		</pre>
	</div>

	<div class='example'>
		The figure below illustrates the difference in cross-axis alignment in overflow situations between
		using <a href="#auto-margins"><css>auto</css> margins</a>
		and using the <a property lt="align-items">alignment properties</a>.

		<figure>
			<div style="display:table; margin: 0 auto 1em;">
				<div style="display:table-cell; padding-right: 50px;" class='cross-auto-figure'>
					<div>
						<div>About</div>
						<div>Authoritarianism</div>
						<div>Blog</div>
					</div>
				</div>
				<div style="display:table-cell; padding-left: 50px;" class='cross-auto-figure'>
					<div>
						<div>About</div>
						<div style="margin-left: -31px;">Authoritarianism</div>
						<div>Blog</div>
					</div>
				</div>
			</div>
			<figcaption>
				The items in the figure on the left are centered with margins,
				while those in the figure on the right are centered with 'align-self'.
				If this column flex container was placed against the left edge of the page,
				the margin behavior would be more desirable,
				as the long item would be fully readable.
				In other circumstances,
				the true centering behavior might be better.
			</figcaption>
		</figure>
	</div>

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

<h3 id='justify-content-property'>
Axis Alignment: the 'justify-content' property</h3>

	<pre class='propdef'>
	Name: justify-content
	Value: flex-start | flex-end | center | space-between | space-around
	Initial: flex-start
	Applies to: <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	</pre>

	The 'justify-content' property aligns <a>flex items</a> along the <a>main axis</a> of the current line of the flex container.
	This is done <em>after</em> any flexible lengths and any <a href="#auto-margins">auto margins</a> have been resolved.
	Typically it helps distribute extra free space leftover when either
	all the <a>flex items</a> 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.

	<dl dfn-type=value dfn-for=justify-content>
		<dt><dfn>flex-start</dfn>
		<dd>
			<a>Flex items</a> are packed toward the start of the line.
			The <a>main-start</a> margin edge of the first <a>flex item</a> on the line
			is placed flush with the <a>main-start</a> edge of the line,
			and each subsequent <a>flex item</a> is placed flush with the preceding item.

		<dt><dfn>flex-end</dfn>
		<dd>
			<a>Flex items</a> are packed toward the end of the line.
			The <a>main-end</a> margin edge of the last <a>flex item</a>
			is placed flush with the <a>main-end</a> edge of the line,
			and each preceding <a>flex item</a> is placed flush with the subsequent item.

		<dt><dfn>center</dfn>
		<dd>
			<a>Flex items</a> are packed toward the center of the line.
			The <a>flex items</a> on the line are placed flush with each other
			and aligned in the center of the line,
			with equal amounts of space between the <a>main-start</a> edge of the line and the first item on the line
			and between the <a>main-end</a> edge of the line and the last item on the line.
			(If the leftover free-space is negative,
			the <a>flex items</a> will overflow equally in both directions.)

		<dt><dfn>space-between</dfn>
		<dd>
			<a>Flex items</a> are evenly distributed in the line.
			If the leftover free-space is negative
			or there is only a single <a>flex item</a> on the line,
			this value is identical to <a value for=justify-content>flex-start</a>.
			Otherwise,
			the <a>main-start</a> margin edge of the first <a>flex item</a> on the line
			is placed flush with the <a>main-start</a> edge of the line,
			the <a>main-end</a> margin edge of the last <a>flex item</a> on the line
			is placed flush with the <a>main-end</a> edge of the line,
			and the remaining <a>flex items</a> on the line are distributed
			so that the spacing between any two adjacent items is the same.

		<dt><dfn>space-around</dfn>
		<dd>
			<a>Flex items</a> 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 <a>flex item</a> on the line,
			this value is identical to <a value for=justify-content>center</a>.
			Otherwise, the <a>flex items</a> on the line are distributed
			such that the spacing between any two adjacent <a>flex items</a> on the line is the same,
			and the spacing between the first/last <a>flex items</a> and the <a>flex container</a> edges
			is half the size of the spacing between <a>flex items</a>.
	</dl>

	<div class="figure">
		<img src="images/flex-pack.svg" width=504 height=270 alt>
		<p class='caption'>An illustration of the five 'justify-content' keywords and their effects on a flex container with three colored items.
	</div>

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

<h3 id='align-items-property'>
Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>

	<pre class='propdef'>
	Name: align-items
	Value: flex-start | flex-end | center | baseline | stretch
	Initial: stretch
	Applies to: <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	</pre>

	<pre class='propdef'>
	Name: align-self
	Value: auto | flex-start | flex-end | center | baseline | stretch
	Initial: auto
	Applies to: <a>flex items</a>
	Inherited: no
	Computed value: <a value for=align-self>auto</a> computes to parent's 'align-items' value; otherwise as specified
	Media: visual
	</pre>

	<a>Flex items</a> can be aligned in the <a>cross axis</a> 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 <a lt="flex items">items</a>,
	including anonymous <a>flex items</a>.
	'align-self' allows this default alignment to be overridden for individual <a>flex items</a>.
	(For anonymous flex items,
	'align-self' always matches the value of 'align-items' on their associated flex container.)

	If either of the <a>flex item's</a> cross-axis margins are <a value for=margin>auto</a>,
	'align-self' has no effect.

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

	<dl dfn-type=value dfn-for="align-items, align-self">
		<dt><dfn>flex-start</dfn>
		<dd>
			The <a>cross-start</a> margin edge of the <a>flex item</a>
			is placed flush with the <a>cross-start</a> edge of the line.

		<dt><dfn>flex-end</dfn>
		<dd>
			The <a>cross-end</a> margin edge of the <a>flex item</a>
			is placed flush with the <a>cross-end</a> edge of the line.

		<dt><dfn>center</dfn>
		<dd>
			The <a>flex item</a>’s margin box is centered in the <a>cross axis</a> within the line.
			(If the <a>cross size</a> of the flex line is less than that of the <a>flex item</a>,
			it will overflow equally in both directions.)

		<dt><dfn>baseline</dfn>
		<dd>
			If the <a>flex item</a>’s inline axis is the same as the <a>cross axis</a>,
			this value is identical to <a value for=align-self>flex-start</a>.

			Otherwise,
			it <dfn dfn id='baseline-participation'>participates in baseline alignment</dfn>:
			all participating <a>flex items</a> on the line
			are aligned such that their baselines align,
			and the item with the largest distance between its baseline and its <a>cross-start</a> margin edge
			is placed flush against the <a>cross-start</a> edge of the line.


		<dt><dfn>stretch</dfn>
		<dd>
			If the <a>cross size property</a> of the <a>flex item</a> computes to ''width/auto'',
			and neither of the <a>cross-axis</a> margins are ''margin/auto'',
			the <a>flex item</a> is <dfn dfn for=''>stretched</dfn>.
			Its used value is the length necessary to make the <a>cross size</a> of the item's margin box as close to the same size as the line as possible,
			while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.

			Note: If the flex container's height is constrained
			this value may cause the contents of the <a>flex item</a>
			to overflow the item.

			The <a>cross-start</a> margin edge of the <a>flex item</a>
			is placed flush with the <a>cross-start</a> edge of the line.
	</dl>

	<div class='figure'>
		<img src="images/flex-align.svg" width=508 height=377 alt>
		<p class='caption'>An illustration of the five 'align-items' keywords and their effects on a flex container with four colored items.
	</div>

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

<h3 id='align-content-property'>
Packing Flex Lines: the 'align-content' property</h3>

	<pre class='propdef'>
	Name: align-content
	Value: flex-start | flex-end | center | space-between | space-around | stretch
	Initial: stretch
	Applies to: <a>multi-line</a> <a>flex containers</a>
	Inherited: no
	Computed value: specified value
	Media: visual
	</pre>

	The 'align-content' property aligns a flex container's lines within the flex container
	when there is extra space in the <a>cross-axis</a>,
	similar to how 'justify-content' aligns individual items within the <a>main-axis</a>.
	Note, this property has no effect on a <a>single-line</a> <a>flex container</a>.
	Values have the following meanings:

	<dl dfn-type=value dfn-for=align-content>
		<dt><dfn>flex-start</dfn>
		<dd>
			Lines are packed toward the start of the flex container.
			The <a>cross-start</a> edge of the first line in the flex container
			is placed flush with the <a>cross-start</a> edge of the flex container,
			and each subsequent line is placed flush with the preceding line.

		<dt><dfn>flex-end</dfn>
		<dd>
			Lines are packed toward the end of the flex container.
			The <a>cross-end</a> edge of the last line
			is placed flush with the <a>cross-end</a> edge of the flex container,
			and each preceding line is placed flush with the subsequent line.

		<dt><dfn>center</dfn>
		<dd>
			Lines are packed toward the center of the flex container.
			The lines in the flex container are placed flush with each other
			and aligned in the center of the flex container,
			with equal amounts of space
			between the <a>cross-start</a> content edge of the flex container
			and the first line in the flex container,
			and between the <a>cross-end</a> 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.)

		<dt><dfn>space-between</dfn>
		<dd>
			Lines are evenly distributed in the flex container.
			If the leftover free-space is negative
			this value is identical to <a value for=align-content>flex-start</a>.
			Otherwise,
			the <a>cross-start</a> edge of the first line in the flex container
			is placed flush with the <a>cross-start</a> content edge of the flex container,
			the <a>cross-end</a> edge of the last line in the flex container
			is placed flush with the <a>cross-end</a> content edge of the flex container,
			and the remaining lines in the flex container are distributed
			so that the spacing between any two adjacent lines is the same.

		<dt><dfn>space-around</dfn>
		<dd>
			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 <a value for=align-content>center</a>.
			Otherwise, the lines in the flex container are distributed
			such that the spacing between any two adjacent lines is the same,
			and the spacing between the first/last lines and the <a>flex container</a> edges
			is half the size of the spacing between <a>flex lines</a>.

		<dt><dfn>stretch</dfn>
		<dd>
			Lines stretch to take up the remaining space.
			If the leftover free-space is negative,
			this value is identical to <a value for=align-content>flex-start</a>.
			Otherwise,
			the free-space is split equally between all of the lines,
			increasing their cross size.
	</dl>

	Note: Only <a>multi-line</a> <a>flex containers</a>
	ever have free space in the <a>cross-axis</a> for lines to be aligned in,
	because in a <a>single-line</a> flex container
	the sole line automatically stretches to fill the space.

	<div class="figure">
		<img src="images/align-content-example.svg" width=612 height=508 alt>
		<p class='caption'>
			An illustration of the 'align-content' keywords and their effects on a <a>multi-line</a> flex container.
	</div>

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

<h3 id="flex-baselines">
Flex Baselines</h3>

	In order for a <a>flex container</a> to itself <a href="#baseline-participation">participate in baseline alignment</a>
	(e.g. when the <a>flex container</a> is itself a <a>flex item</a> in an outer <a>flex container</a>),
	it needs to submit the position of the baseline that will best represent its contents.
	To this end,
	the baselines of a flex container are determined as follows (after reordering with 'order'):

	<dl>
		<dt><dfn export>main-axis baseline</dfn>
		<dd>
			1. If any of the <a>flex items</a> on the flex container's first line
				<a href="#baseline-participation">participate in baseline alignment</a>,
				the flex container's <a>main-axis baseline</a> is the baseline of those <a>flex items</a>.

			2. Otherwise, if the flex container has at least one <a>flex item</a>,
				and its first <a>flex item</a> has a baseline
				parallel to the flex container's <a>main axis</a>,
				the flex container's <a>main-axis baseline</a> is that baseline.

			3. Otherwise, the flex container's <a>main-axis baseline</a> is <a href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a>
				from the first item's content box,
				or, failing that, from the flex container's content box.

				<!--
					Logic behind this choice (because it's different than other baseline calculations):
					If a flexbox has content, the baseline will definitely be inside the flexbox's content box.
					Thus, using the *flexbox's* content box keeps this fairly consistent -
					you don't suddenly jump outside the content box when you delete the last bit of content.
				-->

		<dt><dfn export>cross-axis baseline</dfn>
		<dd>
			1. If the flex container has at least one <a>flex item</a>,
				and its first <a>flex item</a> has a baseline
				parallel to the flex container's <a>cross axis</a>,
				the flex container's <a>cross-axis baseline</a> is that baseline.

			2. Otherwise, the flex container's <a>cross-axis baseline</a> is <a href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a>
				from the first item's content box,
				or, failing that, from the flex container's content box.
	</dl>

	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 <a href="http://www.w3.org/TR/CSS2/tables.html#height-layout">determining the baseline of a table cell</a>,
	a flex container provides a baseline just as a line box or table-row does. [[!CSS21]]

	See <a href="http://www.w3.org/TR/css3-align/#baseline-rules">Baseline Rules</a>
	in [[CSS3-ALIGN]] for more information on baseline alignment.

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

<h2 id='layout-algorithm'>
Flex Layout Algorithm</h2>

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

	Note: This section is mainly intended for implementors.
	Authors writing web pages should generally be served well by the individual property descriptions,
	and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.

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

<h3 id='box-manip'>
Initial Setup</h3>

	<ol start=0>
		<li id='algo-anon-box'>
			<strong>Generate anonymous flex items</strong>
			as described in the <a href="#flex-items">Flex Items</a> section.

		<li id='algo-flex-order'>
			<strong>Re-order the flex items (and any absolutely positioned flex container children) according to their 'order'.</strong>
			The flex items with the lowest (most negative) 'order' values are first in the ordering.
			If multiple flex items share an 'order' value,
			they're ordered by document order.
			This effectively changes the order of their boxes in the box-tree,
			and how the rest of this algorithm deals with the generated flex items.

			Note: Absolutely-positioned children of a flex container
			do not participate in flex layout,
			but are reordered together with any <a>flex item</a> children.
	</ol>

<h3 id='line-sizing'>
Line Length Determination</h3>

	<ol class=continue>
		<li id='algo-available'>
			<strong>Determine the available main and cross space for the flex items.</strong>
			For each dimension,
			if that dimension of the <a>flex container</a>’s content box is a <a>definite size</a>, use that;
			otherwise, subtract the <a>flex container</a>’s margin, border, and padding
			from the space available to the flex container in that dimension
			and use that value.
			<span class='note'>This might result in an infinite value.</span>
			<!-- Maybe???
			For this purpose,
			the block axis of a block container(?)
			always provides infinite available space.
			-->

			<div class='example'>
				<p>For example, the <a>available space</a> to a flex item in a
					<a href="http://www.w3.org/TR/CSS2/visuren.html#floats">floated</a> <a value for=width>auto</a>-sized <a>flex container</a> is:
				<ul>
					<li>the width of the <a>flex container</a>’s containing block minus the <a>flex container</a>’s margin, border, and padding in the horizontal dimension
					<li>infinite in the vertical dimension
				</ul>
			</div>

		<li id='algo-main-item'>
			<strong>Determine the <dfn>flex base size</dfn> and <dfn>hypothetical main size</dfn> of each item:</strong>

			<ol type=A>
				<li>
					If the item has a <a>definite</a> used <a>flex basis</a>,
					that's the <a>flex base size</a>.

				<li>
					If the flex item has ...
					<ul>
						<li>an intrinsic aspect ratio,
						<li>a used <a>flex basis</a> of ''content'', and
						<li>a <a>definite</a> <a>cross size</a>,
					</ul>
					then the <a>flex base size</a> is calculated from its inner <a>cross size</a>
					and the <a>flex item</a>’s intrinsic aspect ratio.

				<li>
					If the used <a>flex basis</a> is ''content'' 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 <a href="http://www.w3.org/TR/CSS2/tables.html#auto-table-layout">automatic table layout</a> [[!CSS21]]),
					size the item under that constraint.
					The <a>flex base size</a> is the item's resulting <a>main size</a>.

				<li>
					Otherwise,
					if the used <a>flex basis</a> is ''content'' 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
					<a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> [[!CSS3-WRITING-MODES]].
					The <a>flex base size</a> is the item's max-content <a>main size</a>.

					Note: This case occurs, for example,
					in an English document (horizontal <a>writing mode</a>)
					containing a column flex container
					containing a vertical Japanese (vertical <a>writing mode</a>) <a>flex item</a>.

				<li>
					Otherwise,
					size the item into the <a>available space</a>
					using its used <a>flex basis</a> in place of its <a>main size</a>,
					treating a value of ''content'' as ''width/max-content''.
					If a <a>cross size</a> is needed to determine the <a>main size</a>
					(e.g. when the <a>flex item</a>’s <a>main size</a> is in its block axis)
					and the <a>flex item</a>’s cross size is ''auto'' and not <a>definite</a>,
					in this calculation use ''width/fit-content'' as the <a>flex item</a>’s <a>cross size</a>.
					The <a>flex base size</a> is the item's resulting <a>main size</a>.
			</ol>

			When determining the <a>flex base size</a>,
			the item’s min and max main size properties are ignored
			(no clamping occurs).

			The <a>hypothetical main size</a> is the item's <a>flex base size</a>
			clamped according to its min and max main size properties.

		<li id='algo-main-container'>
			<strong>Determine the <a>main size</a> of the flex container</strong>
			using the rules of the formatting context in which it participates.
			For this computation, <a value for=margin>auto</a> margins on flex items are treated as ''0''.
	</ol>

<h3 id='main-sizing'>
Main Size Determination</h3>

	<ol class=continue>
		<li id='algo-line-break'>
			<strong>Collect flex items into flex lines:</strong>

			<ul>
				<li>
					If the flex container is <a>single-line</a>,
					collect all the flex items into a single flex line.

				<li>
					Otherwise,
					starting from the first uncollected item,
					collect consecutive items one by one
					until the first time that the <em>next</em> collected item
					would not fit into the flex container's inner main size
					(or until a forced break is encountered,
					see [[#pagination]]).
					If the very first uncollected item wouldn't fit,
					collect just it into the line.

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

					<p>
						Repeat until all flex items have been collected into flex lines.

					<p class='note'>
						Note that the "collect as many" line will collect zero-sized flex items
						onto the end of the previous line
						even if the last non-zero item exactly "filled up" the line.
			</ul>

		<li id='algo-flex'>
			<strong><a href='#resolve-flexible-lengths'>Resolve the flexible lengths</a></strong> of all the flex items
			to find their used <a>main size</a>. See [[#resolve-flexible-lengths]].
	</ol>

<h3 id='cross-sizing'>
Cross Size Determination</h3>

	<ol class=continue>
		<li id='algo-cross-item'>
			<strong>Determine the <dfn>hypothetical cross size</dfn> of each item</strong>
			by performing layout with the used <a>main size</a> and the available space,
			treating <a value for=width>auto</a> as ''fit-content''.

		<li id='algo-cross-line'>
			<strong>Calculate the cross size of each flex line.</strong>

			<p>
				If the flex container is <a>single-line</a>
				and has a <a>definite</a> <a>cross size</a>,
				the <a>cross size</a> of the <a>flex line</a>
				is the <a>flex container</a>'s inner <a>cross size</a>.

			<p>
				Otherwise,
				for each flex line:

			<ol>
				<li>
					Collect all the flex items whose inline-axis is parallel to the main-axis,
					whose 'align-self' is ''align-self/baseline'',
					and whose cross-axis margins are both non-<a value for=margin>auto</a>.
					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.

				<li>
					Among all the items not collected by the previous step,
					find the largest outer <a>hypothetical cross size</a>.

				<li>
					The used cross-size of the <a>flex line</a> is the largest of the numbers found in the previous two steps and zero.

					If the flex container is <a>single-line</a>,
					then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
					<span class='note'>Note that if CSS 2.1's definition of min/max-width/height applied more generally,
					this behavior would fall out automatically.</span>
			</ol>


		<li id='algo-line-stretch'>
			<strong>Handle 'align-content: stretch'.</strong>
			If the flex container has a <a>definite</a> cross size,
			'align-content' is <a value for=align-content>stretch</a>,
			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.

		<li id='algo-visibility'>
			<strong>Collapse ''visibility:collapse'' items.</strong>
			If any flex items have ''visibility: collapse'',
			note the cross size of the line they're in as the item's <dfn>strut size</dfn>,
			and restart layout from the beginning.

			<p>
				In this second layout round,
				when <a href="#algo-line-break">collecting items into lines</a>,
				treat the collapsed items as having zero <a>main size</a>.
				For the rest of the algorithm following that step,
				ignore the collapsed items entirely
				(as if they were ''display:none'')
				except that after <a href="#algo-cross-line">calculating the cross size of the lines</a>,
				if any line's cross size is less than
				the largest <var>strut size</var>
				among all the collapsed items in the line,
				set its cross size to that <var>strut size</var>.

			<p>
				Skip this step in the second layout round.

		<li id='algo-stretch'>
			<strong>Determine the used cross size of each flex item.</strong>
			If a flex item has ''align-self: stretch'',
			its computed cross size property is <a value for=width>auto</a>,
			and neither of its cross-axis margins are <a value for=margin>auto</a>,
			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 <a>hypothetical cross size</a>.

			If the flex item has ''align-self: stretch'',
			redo layout for its contents,
			treating this used size as its definite cross size
			so that percentage-sized children can be resolved.

			<p class='note'>
				Note that this step does not affect the <a>main size</a> of the flex item,
				even if it has an intrinsic aspect ratio.
	</ol>

<h3 id='main-alignment'>
Main-Axis Alignment</h3>

	<ol class=continue>
		<li id='algo-main-align'>
			<strong>Distribute any remaining free space.</strong>
			For each flex line:

			<ol>
				<li>
					If the remaining free space is positive
					and at least one main-axis margin on this line is <a value for=margin>auto</a>,
					distribute the free space equally among these margins.
					Otherwise, set all <a value for=margin>auto</a> margins to zero.

				<li>
					Align the items along the main-axis per 'justify-content'.
			</ol>
	</ol>

<h3 id='cross-alignment'>
Cross-Axis Alignment</h3>

	<ol class=continue>
		<li id='algo-cross-margins'>
			<strong>Resolve cross-axis <a value for=margin>auto</a> margins.</strong>
			If a flex item has <a value for=margin>auto</a> cross-axis margins:

			<ul>
				<li>
					If its outer cross size
					(treating those <a value for=margin>auto</a> margins as zero)
					is less than the cross size of its flex line,
					distribute the difference in those sizes equally
					to the <a value for=margin>auto</a> margins.
				<li>
					Otherwise,
					if the <a>block-start</a> or <a>inline-start</a> margin (whichever is in the cross axis)
					is <a value for=margin>auto</a>, 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.
			</ul>


		<li id='algo-cross-align'>
			<strong>Align all flex items along the cross-axis</strong> per 'align-self',
			if neither of the item's cross-axis margins are <a value for=margin>auto</a>.

		<li id='algo-cross-container'>
			<strong>Determine the flex container's used cross size:</strong>

			<ul>
				<li>
					If the cross size property is a <a>definite</a> size,
					use that,
					clamped by the min and max cross size properties of the <a>flex container</a>.

				<li>
					Otherwise,
					use the sum of the flex lines' cross sizes,
					clamped by the min and max cross size properties of the <a>flex container</a>.
			</ul>

		<li id='algo-line-align'>
			<strong>Align all flex lines</strong> per 'align-content'.
	</ol>

<h3 id='resolve-flexible-lengths'>
Resolving Flexible Lengths</h3>

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

	<ol>
		<li>
			<strong>Determine the used flex factor</strong>.
			Sum the outer hypothetical main sizes of all items on the line.
			If the sum is less than the flex container's inner <a>main size</a>,
			use the flex grow factor for the rest of this algorithm;
			otherwise, use the flex shrink factor.

		<li>
			<strong>Size inflexible items.</strong>
			Freeze,
			setting its <dfn>target main size</dfn>
			to its <a>hypothetical main size</a>&hellip;
			<ul>
				<li>
					any item that has a flex factor of zero

				<li>
					if using the <a>flex grow factor</a>:
					any item that has a <a>flex base size</a> greater than its <a>hypothetical main size</a>

				<li>
					if using the <a>flex shrink factor</a>:
					any item that has a <a>flex base size</a> smaller than its <a>hypothetical main size</a>
			</ul>

		<li>
			<strong>Calculate <dfn>initial free space</dfn>.</strong>
			Sum the outer sizes of all items on the line,
			and subtract this from the flex container's inner <a>main size</a>.
			For frozen items, use their outer <a>target main size</a>;
			for other items, use their outer <a>flex base size</a>.

		<li>
			Loop:

			<ol type=a>
				<li>
					<strong>Check for flexible items.</strong>
					If all the flex items on the line are frozen,
					free space has been distributed;
					exit this loop.

				<li>
					<strong>Calculate the <dfn>remaining free space</dfn></strong>
					as for <a>initial free space</a>, above.
					If the sum of the unfrozen flex items’ flex factors is less than one,
					multiply the <a>initial free space</a> by this sum.
					If the magnitude of this value is less than the magnitude of the <a>remaining free space</a>,
					use this as the <a>remaining free space</a>.

				<li>
					<strong>Distribute free space proportional to the flex factors.</strong>

					<dl>
						<dt>If the <a>remaining free space</a> is zero
						<dd>
							Do nothing.

						<dt>If using the <a>flex grow factor</a>
						<dd>
							Find the ratio of the item's flex grow factor
							to the sum of the flex grow factors of all unfrozen items on the line.
							Set the item's <a>target main size</a> to its <a>flex base size</a>
							plus a fraction of the <a>remaining free space</a> proportional to the ratio.

						<dt>If using the <a>flex shrink factor</a>
						<dd>
							For every unfrozen item on the line,
							multiply its flex shrink factor by its inner <a>flex base size</a>,
							and note this as its <dfn>scaled flex shrink factor</dfn>.
							Find the ratio of the item's <a>scaled flex shrink factor</a>
							to the sum of the <a>scaled flex shrink factors</a> of all unfrozen items on the line.
							Set the item's <a>target main size</a> to its <a>flex base size</a>
							minus a fraction of the absolute value of the <a>remaining free space</a> proportional to the ratio.
							<span class='note'>Note this may result in a negative inner <a>main size</a>;
							it will be corrected in the next step.</span>

						<dt>Otherwise
						<dd>
							Do nothing.
					</dl>

				<li>
					<strong>Fix min/max violations.</strong>
					Clamp each non-frozen item's <a>target main size</a> by its min and max main size properties.
					If the item's <a>target main size</a> was made smaller by this,
					it's a max violation.
					If the item's <a>target main size</a> was made larger by this,
					it's a min violation.

				<li>
					<strong>Freeze over-flexed items.</strong>
					The total violation is the sum of the adjustments from the previous step
					<code>∑(clamped size - unclamped size)</code>.
					If the total violation is:

					<dl>
						<dt>Zero
						<dd>
							Freeze all items.

						<dt>Positive
						<dd>
							Freeze all the items with min violations.

						<dt>Negative
						<dd>
							Freeze all the items with max violations.
					</dl>

				<li>
					Return to the start of this loop.
			</ol>

		<li>
			Set each item’s used <a>main size</a> to its <a>target main size</a>.
	</ol>

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

<h3 id='definite-sizes'>
Definite and Indefinite Sizes</h3>

	For the purposes of these definitions,
	a <dfn lt="definite|definite size">definite size</dfn> 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 <dfn lt="indefinite|indefinite size">indefinite size</dfn> is one that is not <a>definite</a>.

	Flexbox has several additional cases where a length can be considered <a>definite</a>:

	<ol>
		<li>
			If a <a>single-line</a> <a>flex container</a> has a definite <a>cross size</a>,
			the outer <a>cross size</a> of any <a>stretched</a> <a>flex items</a>
			is the flex container's inner <a>cross size</a> (clamped to the <a>flex item</a>’s min and max <a>cross size</a>)
			and is considered <a>definite</a>.

		<li>
			If a percentage is going to be resolved against a <a>flex item’s</a> <a>main size</a>,
			and the <a>flex item</a> has a <a>definite</a> <a>flex basis</a>,
			and the <a>flex container</a> has a <a>definite</a> <a>main size</a>,
			the <a>flex item’s</a> <a>main size</a> must be treated as <a>definite</a>
			for the purpose of resolving the percentage,
			and the percentage must resolve against the <strong>flexed</strong> <a>main size</a> of the <a>flex item</a>
			(that is, after the layout algorithm below has been completed for the <a>flex item’s</a> <a>flex container</a>,
				and the <a>flex item</a> has acquired its final size).
	</ol>

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

<h3 id='intrinsic-sizes'>
Intrinsic Sizes</h3>

	The <a>intrinsic sizing</a> of a <a>flex container</a> is used
	to produce various types of content-based automatic sizing,
	such as shrink-to-fit logical widths (which use the ''fit-content'' formula)
	and content-based logical heights (which use the <a>max-content main size</a>).

	The <dfn>max-content main size</dfn> of a <a>flex container</a>
	is the smallest size the <a>flex container</a> can take
	while maintaining the <a>max-content contributions</a> of its <a>flex items</a>:

	<ol>
		<li>
			For each <a>flex item</a>,
			subtract its outer <a>flex base size</a> from its <a>max-content contribution</a> size.
			If that result is not zero, divide it by (if the result was positive) its <a>flex grow factor</a> floored at 1,
			or (if the result was negative) by its <a>scaled flex shrink factor</a>, having floored the <a>flex shrink factor</a> at 1.
			This is the item's <var>max-content flex fraction</var>.
		<li>
			Place all <a>flex items</a> into lines of infinite length.

		<li>
			Within each line,
			find the largest <var>max-content flex fraction</var>
			among all the <a>flex items</a>.
			Add each item’s <a>flex base size</a>
			to the product of its <a>flex grow factor</a>
			(or <a>scaled flex shrink factor</a>, if the chosen <var>max-content flex fraction</var> was negative)
			and the chosen <var>max-content flex fraction</var>,
			then clamp that result by the <a>max main size property</a>.

		<li>
			The <a>flex container</a>’s <a>max-content size</a> is the
			largest sum of the afore-calculated sizes of all items within a single line.
	</ol>

	The <dfn>min-content main size</dfn> of a <a>single-line</a> flex container
	is calculated identically to the <a>max-content main size</a>,
	except that the <a>flex item’s</a> <a>min-content contribution</a> is used
	instead of its <a>max-content contribution</a>.
	However, for a <a>multi-line</a> container,
	it is simply the largest <a>min-content contribution</a>
	of all the <a>flex items</a> in the <a>flex container</a>.

	The <dfn>min-content cross size</dfn> and  <dfn>max-content cross size</dfn> of a flex container
	are the <a>cross size</a> of the flex container
	after performing layout into the given available <a>main-axis</a> space and infinite available <a>cross-axis</a> space.

	The <strong>main-size <a lt="min-content contribution">min-content</a>/<a>max-content contribution</a> of a <a>flex item</a></strong>
	is its outer <a lt="min-content size">min-content</a>/<a>max-content size</a>,
	clamped by its <a>flex base size</a> as a maximum (if it is not growable)
	and/or as a minimum (if it is not shrinkable),
	and then further clamped by its <a lt="min main size property">min</a>/<a>max main size properties</a>.

	See [[!CSS3-SIZING]] for a definition of the terms in this section.

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

<h2 id="pagination">
Fragmenting Flex Layout</h2>

	<p>
		Flex containers can break across pages
		between items,
		between lines of items (in <a>multi-line</a> mode),
		and inside items.
		The <a property lt="break-before">break-*</a> properties apply to flex containers as normal for block-level or inline-level boxes.
		This section defines how they apply to flex items
		and the contents of flex items.

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

	<p>
		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:

	<ul>
		<li>
			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.

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

		<li>
			A forced break inside a flex item effectively increases the size of its contents;
			it does not trigger a forced break inside sibling items.

		<li>
			In a row flex container,
			<a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur between sibling flex lines,
			and <a href="http://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur between the first/last flex line and the flex container's content edges.
			In a column flex container,
			<a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur between sibling flex items,
			and <a href="http://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur between the first/last flex items on a line and the flex container's content edges.
			[[!CSS3-BREAK]]

		<li>
			When a flex container is continued after a break,
			the space available to its <a>flex items</a>
			(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.

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

		<li>
			When a <a>multi-line</a> column 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.

		<li>
			Aside from the rearrangement of items imposed by the previous point,
			UAs should attempt to minimize distortion of the flex container
			with respect to unfragmented flow.
	</ul>


<h3 id='pagination-algo'>
Sample Flex Fragmentation Algorithm</h3>

	<p>
		This informative section presents a possible fragmentation algorithm for flex containers.
		Implementors are encouraged to improve on this algorithm and <a href='#status'>provide feedback to the CSS Working Group</a>.

<div class='example'>

	<p class='note'>
		This algorithm assumes that pagination always proceeds only in the forward direction;
		therefore, in the algorithms below, alignment is mostly ignored prior to pagination.
		Advanced layout engines may be able to honor alignment across fragments.

	<dl>
		<dt><a>single-line</a> column flex container
		<dd>
			<ol>
				<li>
					Run the flex layout algorithm (without regards to pagination)
					through <a href="#cross-sizing">Cross Sizing Determination</a>.

				<li>
					Lay out as many consecutive flex items or item fragments as possible
					(but at least one or a fragment thereof),
					starting from the first,
					until there is no more room on the page
					or a forced break is encountered.

				<li>
					If the previous step ran out of room
					and the free space is positive,
					the UA may reduce the distributed free space on this page
					(down to, but not past, zero)
					in order to make room for the next unbreakable flex item or fragment.
					Otherwise,
					the item or fragment that does not fit is pushed to the next page.
					The UA should pull up if more than 50% of the fragment would have fit in the remaining space
					and should push otherwise.

				<li>
					If there are any flex items or fragments not laid out by the previous steps,
					rerun the flex layout algorithm
					from <a href="#line-sizing">Line Length Determination</a>
					through <a href="#cross-sizing">Cross Sizing Determination</a>
					with the next page's size
					and <em>all</em> the contents (including those already laid out),
					and return to the previous step,
					but starting from the first item or fragment not already laid out.

				<li>
					For each fragment of the flex container,
					continue the flex layout algorithm
					from <a href="#main-alignment">Main-Axis Alignment</a>
					to its finish.
			</ol>

			<p class="note">
				It is the intent of this algorithm that column-direction <a>single-line</a> flex containers
				paginate very similarly to block flow.
				As a test of the intent,
				a flex container with ''justify-content:start''
				and no flexible items
				should paginate identically to
				a block with in-flow children with same content,
				same used size and same used margins.

		<dt><a>multi-line</a> column flex container
		<dd>
			<ol>
				<li>
					Run the flex layout algorithm
					<em>with</em> regards to pagination
					(limiting the flex container's maximum line length to the space left on the page)
					through <a href="#cross-sizing">Cross Sizing Determination</a>.

				<li>
					Lay out as many flex lines as possible
					(but at least one)
					until there is no more room in the flex container
					in the cross dimension
					or a forced break is encountered:

					<ol>
						<li>
							Lay out as many consecutive flex items as possible
							(but at least one),
							starting from the first,
							until there is no more room on the page
							or a forced break is encountered.
							Forced breaks <em>within</em> flex items are ignored.

						<li>
							If this is the first flex container fragment,
							this line contains only a single flex item
							that is larger than the space left on the page,
							and the flex container is not at the top of the page already,
							move the flex container to the next page
							and restart flex container layout entirely.

						<li>
							If there are any flex items not laid out by the first step,
							rerun the flex layout algorithm
							from <a href="#main-sizing">Main Sizing Determination</a>
							through <a href="#cross-sizing">Cross Sizing Determination</a>
							using only the items not laid out on a previous line,
							and return to the previous step,
							starting from the first item not already laid out.
					</ol>

				<li>
					If there are any flex items not laid out by the previous step,
					rerun the flex layout algorithm
					from <a href="#line-sizing">Line Sizing Determination</a>
					through <a href="#cross-sizing">Cross Sizing Determination</a>
					with the next page's size
					and only the items not already laid out,
					and return to the previous step,
					but starting from the first item not already laid out.

				<li>
					For each fragment of the flex container,
					continue the flex layout algorithm
					from <a href="#main-alignment">Main-Axis Alignment</a>
					to its finish.
			</ol>

			<p class='note'>
				If a flex item does not entirely fit on a single page,
				it will <em>not</em> be paginated in <a>multi-line</a> column flex containers.

		<dt><a>single-line</a> row flex container
		<dd>
			<ol>
				<li>
					Run the entire flex layout algorithm (without regards to pagination),
					except treat any 'align-self' other than ''align-self/flex-start'' or ''baseline''
					as ''align-self/flex-start''.

				<li>
					If an unbreakable item doesn't fit within the space left on the page,
					and the flex container is not at the top of the page,
					move the flex container to the next page
					and restart flex container layout entirely.

				<li>
					For each item,
					lay out as much of its contents as will fit in the space left on the page,
					and fragment the remaining content onto the next page,
					rerunning the flex layout algorithm
					from <a href="#line-sizing">Line Length Determination</a>
					through <a href="#main-alignment">Main-Axis Alignment</a>
					into the new page size
					using <em>all</em> the contents (including items completed on previous pages).

					<p class='note'>
						Any flex items that fit entirely into previous fragments
						still take up space in the main axis in later fragments.

				<li>
					For each fragment of the flex container,
					rerun the flex layout algorithm
					from <a href="#cross-alignment">Cross-Axis Alignment</a>
					to its finish.
					For all fragments besides the first,
					treat 'align-self' and 'align-content' as being ''align-self/flex-start'' for all item fragments and lines.

				<li>
					If any item,
					when aligned according to its original 'align-self' value
					into the combined <a>cross size</a> of all the flex container fragments,
					would fit entirely within a single flex container fragment,
					it may be shifted into that fragment
					and aligned appropriately.
			</ol>

		<dt><a>multi-line</a> row flex container
		<dd>
			<ol>
				<li>
					Run the flex layout algorithm (without regards to pagination),
					through <a href="#cross-sizing">Cross Sizing Determination</a>.

				<li>
					Lay out as many flex lines as possible
					(but at least one),
					starting from the first,
					until there is no more room on the page
					or a forced break is encountered.

					<p>
						If a line doesn't fit on the page,
						and the line is not at the top of the page,
						move the line to the next page
						and restart the flex layout algorithm entirely,
						using only the items in and following this line.

					<p>
						If a flex item itself causes a forced break,
						rerun the flex layout algorithm
						from <a href="#main-sizing">Main Sizing Determination</a>
						through <a href="#main-alignment">Main-Axis Alignment</a>,
						using only the items on this and following lines,
						but with the item causing the break automatically starting a new line
						in the <a href="#algo-line-break">line breaking step</a>,
						then continue with this step.
						Forced breaks <em>within</em> flex items are ignored.

				<li>
					If there are any flex items not laid out by the previous step,
					rerun the flex layout algorithm
					from <a href="#line-sizing">Line Length Determination</a>
					through <a href="#main-alignment">Main-Axis Alignment</a>
					with the next page's size
					and only the items not already laid out.
					Return to the previous step,
					but starting from the first line not already laid out.

				<li>
					For each fragment of the flex container,
					continue the flex layout algorithm
					from <a href="#cross-alignment">Cross Axis Alignment</a>
					to its finish.
			</ol>
	</dl>
</div>

<h2 class="no-num" id="axis-mapping">
Appendix A: Axis Mappings</h2>

	<em>This appendix is non-normative.</em>

	<table class="data" id="axis-mapping-table-en">
		<caption>Axis Mappings for ''ltr'' + ''horizontal-tb'' <a>Writing Mode</a> (e.g. English)</caption>
		<colgroup span=1></colgroup>
		<colgroup span=3></colgroup>
		<colgroup span=3></colgroup>
		<thead>
			<tr>
				<th>'flex-flow'
				<th><a>main axis</a>
				<th><a>start</a>
				<th><a>end</a>
				<th><a>cross axis</a>
				<th><a>start</a>
				<th><a>end</a>
		<tbody>
			<tr>
				<th>''row'' + ''nowrap/wrap''
				<td rowspan=4>horizontal
				<td>left
				<td>right
				<td rowspan=4>vertical
				<td rowspan=2>top
				<td rowspan=2>bottom
			<tr>
				<th>''row-reverse'' + ''nowrap/wrap''
				<td>right
				<td>left
			<tr>
				<th>''row'' + ''wrap-reverse''
				<td>left
				<td>right
				<td rowspan=2>bottom
				<td rowspan=2>top
			<tr>
				<th>''row-reverse'' + ''wrap-reverse''
				<td>right
				<td>left
			<tr>
				<th>''column'' + ''nowrap/wrap''
				<td rowspan=4>vertical
				<td>top
				<td>bottom
				<td rowspan=4>horizontal
				<td rowspan=2>left
				<td rowspan=2>right
			<tr>
				<th>''column-reverse'' + ''nowrap/wrap''
				<td>bottom
				<td>top
			<tr>
				<th>''column'' + ''wrap-reverse''
				<td>top
				<td>bottom
				<td rowspan=2>right
				<td rowspan=2>left
			<tr>
				<th>''column-reverse'' + ''wrap-reverse''
				<td>top
				<td>bottom
	</table>

	<table class="data" id="axis-mapping-table-fa">
		<caption>Axis Mappings for ''rtl'' + ''horizontal-tb'' <a>Writing Mode</a> (e.g. Farsi)</caption>
		<colgroup span=1></colgroup>
		<colgroup span=3></colgroup>
		<colgroup span=3></colgroup>
		<thead>
			<tr>
				<th>'flex-flow'
				<th><a>main axis</a>
				<th><a>main-start</a>
				<th><a>main-end</a>
				<th><a>cross axis</a>
				<th><a>cross-start</a>
				<th><a>cross-end</a>
		<tbody>
			<tr>
				<th>''row'' + ''nowrap/wrap''
				<td rowspan=4>horizontal
				<td>right
				<td>left
				<td rowspan=4>vertical
				<td rowspan=2>top
				<td rowspan=2>bottom
			<tr>
				<th>''row-reverse'' + ''nowrap/wrap''
				<td>left
				<td>right
			<tr>
				<th>''row'' + ''wrap-reverse''
				<td>right
				<td>left
				<td rowspan=2>bottom
				<td rowspan=2>top
			<tr>
				<th>''row-reverse'' + ''wrap-reverse''
				<td>left
				<td>right
			<tr>
				<th>''column'' + ''nowrap/wrap''
				<td rowspan=4>vertical
				<td>top
				<td>bottom
				<td rowspan=4>horizontal
				<td rowspan=2>right
				<td rowspan=2>left
			<tr>
				<th>''column-reverse'' + ''nowrap/wrap''
				<td>bottom
				<td>top
			<tr>
				<th>''column'' + ''wrap-reverse''
				<td>top
				<td>bottom
				<td rowspan=2>left
				<td rowspan=2>right
			<tr>
				<th>''column-reverse'' + ''wrap-reverse''
				<td>top
				<td>bottom
	</table>

	<table class="data" id="axis-mapping-table-ja">
		<caption>Axis Mappings for ''ltr'' + ''vertical-rl'' <a>Writing Mode</a> (e.g. Japanese)</caption>
		<colgroup span=1></colgroup>
		<colgroup span=3></colgroup>
		<colgroup span=3></colgroup>
		<thead>
			<tr>
				<th>'flex-flow'
				<th><a>main axis</a>
				<th><a lt=main-start><abbr title="cross-start">start</abbr></a>
				<th><a lt=main-end><abbr title="cross-end">end</abbr></a>
				<th><a>cross axis</a>
				<th><a lt=cross-start><abbr title="cross-start">start</abbr></a>
				<th><a lt=cross-end><abbr title="cross-end">end</abbr></a>
		<tbody>
			<tr>
		<tbody>
			<tr>
				<th>''row'' + ''nowrap/wrap''
				<td rowspan=4>vertical
				<td>top
				<td>bottom
				<td rowspan=4>horizontal
				<td rowspan=2>right
				<td rowspan=2>left
			<tr>
				<th>''row-reverse'' + ''nowrap/wrap''
				<td>bottom
				<td>top
			<tr>
				<th>''row'' + ''wrap-reverse''
				<td>top
				<td>bottom
				<td rowspan=2>left
				<td rowspan=2>right
			<tr>
				<th>''row-reverse'' + ''wrap-reverse''
				<td>bottom
				<td>top
			<tr>
				<th>''column'' + ''nowrap/wrap''
				<td rowspan=4>vertical
				<td>right
				<td>left
				<td rowspan=4>horizonal
				<td rowspan=2>top
				<td rowspan=2>bottom
			<tr>
				<th>''column-reverse'' + ''nowrap/wrap''
				<td>left
				<td>right
			<tr>
				<th>''column'' + ''wrap-reverse''
				<td>right
				<td>left
				<td rowspan=2>bottom
				<td rowspan=2>top
			<tr>
				<th>''column-reverse'' + ''wrap-reverse''
				<td>right
				<td>left
	</table>

<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>

	<p>Thanks for feedback and contributions to

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

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

<h2 class="no-num" id="changes">Changes</h2>

	This section documents the changes since previous publications.

<h3 id="changes-201505">
Changes since the 14 May 2015 LCWD</h3>

	A <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20150514">Disposition of Comments</a> is also available.

<h4 id="change-201505-substantive">
Substantive Changes and Bugfixes</h4>

	<ul>
		<li id="change-2015-flex-basis-zero">
			Revert 'flex' shorthand <a href="change-2012-flex-basis-zero">change</a>
			of omitted 'flex-basis' back to ''0'',
			since that was a hacky way of solving an intrinsic size problem,
			and isn't needed (and gives bad results)
			given a correct implementation of [[#intrinsic-sizes]].
		<li id="change-2015-intrinsic-sizing">
			Correct instrinsic sizing rules to handle inflexible items.
		<li id="change-2015-a11y-tools">
			Add explicit conformance criteria on authoring tools
			to keep presentation and DOM order in sync
			unless author explicitly indicates a desire to make them out-of-sync.
	</ul>

<h4 id="change-201505-clarify">
Clarifications</h4>

<h3 id="changes-201409">
Changes since the 25 September 2014 LCWD</h3>

	A <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925">Disposition of Comments</a> is also available.

<h4 id="change-201409-substantive">
Substantive Changes and Bugfixes</h4>

	<ul>
		<li id="change-201409-content">
			Reverted ''flex-basis: auto'' to its original meaning.
			Added ''flex-basis: content'' keyword to explicitly specify automatic content-based sizing.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-10">10</a>)

		<li id="change-201409-align-content-wrapping">
			Made applicability of 'align-content' depend on wrappability rather than number of resulting flex lines.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-4">4</a>)

			<blockquote>
				<p><del>When a flex container has multiple lines,</del>
				<ins>In a <i>multi-line</i> <i>flex container</i> (even one with only a single line),</ins>
				the <i>cross size</i> of each line is the minimum size necessary [...]
				<del>When a flex container (even a <i>multi-line</i> one) has only one line,</del>
				<ins>In a <i>single-line</i> <i>flex container</i>,</ins>
 				the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
 				and 'align-content' has no effect.
			</blockquote>

			<blockquote>
				<p class="note">Note, this property has no effect
				<del>when the flex container has only a single line.</del>
				<ins>on a <i>single-line</i> <i>flex container</i>.</ins>
			</blockquote>

			<blockquote>
				<p class="note">Only <del>flex containers with multiple lines</del>
				<ins><i>multi-line</i> <i>flex containers</i></ins>
 				ever have free space in the <i>cross-axis</i> for lines to be aligned in,
				because in a <del>flex container with a single line</del>
				<ins><i>single-line</i> flex container</ins>
 				the sole line automatically stretches to fill the space.
			</blockquote>

			<blockquote>
				<p>If the flex container <del>has only one <i>flex line</i>
				(even if it's a <i>multi-line</i> <i>flex container</i>)</del>
				<ins>is <i>single-line</i></ins>
 				and has a <i>definite</i> <i>cross size</i>,
 				the <i>cross size</i> of the <i>flex line</i>
 				is the <i>flex container</i>'s inner <i>cross size</i>.
			</blockquote>

			<blockquote>
				<p>If the flex container <del>has only one flex line
				(even if it's a multi-line flex container),</del>
				<ins>is <i>single-line</i>,</ins>
 				then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
			</blockquote>

		<li id="change-201409-algo-breaks">
			Removed text that asserted forced breaking behavior,
			replaced with reference to fragmentation section.
			This resolves a conflict in the spec.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-18">18</a>)

			<blockquote>
				<p>collect consecutive items one by one
				until the first time that the next collected item would not fit into the flex container’s inner main size,
				<ins>(</ins>or until a forced break is encountered<ins>, see [[#pagination]])</ins>.
				[...]
				<del>A break is forced wherever the CSS2.1 'page-break-before'/'page-break-after' [[CSS21]]
				or the CSS3 'break-before'/'break-after' [[CSS3-BREAK]] properties specify a fragmentation break.</del></p>
			</blockquote>

		<li id="change-201409-inner-base-size">
			Change the <a>flex shrink factor</a> to multiply by the  <em>inner</em> (not outer) <a>flex base size</a>.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-9">9</a>)

			<blockquote>
				<p>For every unfrozen item on the line,
				multiply its flex shrink factor by its <del>outer</del> <ins>inner</ins> flex base size,
     			and note this as its <a>scaled flex shrink factor</a>.
			</blockquote>

		<li id="change-201409-neither">
			Add back in missing “n” in “neither”...
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-6">6</a>)

			<blockquote>
				<p>If the <a>cross size property</a> of the <a>flex item</a> computes to ''width/auto'',
				and <ins>n</ins>either of the <a>cross-axis</a> margins are ''margin/auto'',
				the <a>flex item</a> is <a>stretched</a>.
			</blockquote>

		<li id="change-201409-flexed-definite-container">
			Specify that the <a>flex container</a>’s <a>main size</a> must also be <a>definite</a>
			for a flex item’s flexed main size to be <a>definite</a>.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-20">20</a>)

			<blockquote>
				<p>[If] ... the <a>flex item</a> has a <a>definite</a> <a>flex basis</a>,
				<ins>and the <a>flex container</a> has a <a>definite</a> <a>main size</a>,</ins>
    			the <a>flex item’s</a> <a>main size</a> must be treated as <a>definite</a> ...
			</blockquote>

		<li id="change-201409-min-auto-specified-size">
			Remove the requirement that the <a>flex basis</a> be ''content'' for the <a>specified size</a> to be defined.
			The specified size should always win if it is smaller than the intrinsic size.
			This is particularly important to maintain author expectations for,
			e.g. <code>&lt;img src="&hellip;" width=40 height=40 title="100x100 image"&gt;</code>.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-25">25</a>)

			<blockquote>
				If the item’s <del>computed 'flex-basis' is ''content''
				and its</del> computed <a>main size property</a> is <a>definite</a>,
				then the <var>specified size</var> is that size
			</blockquote>

		<li id="change-2014-blockify">
			Remove the requirement that anonymous block creation (for things like ''display: table-cell'')
			occur <em>before</em> <a>flex item</a> blockification.
			(Instead, all children now blockify immediately,
				consistent with abspos/float behavior.)
	</ul>

<h4 id="change-201409-clarify">
Clarifications</h4>

	<ul>
		<li id="change-201409-unclamped-size">
			Clarify that <a>flex base size</a> is unclamped.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-21">21</a>)

			<blockquote>
				<p><ins>When determining the <a>flex base size</a>,
				the item’s min and max main size properties are ignored
				(no clamping occurs).</ins>
				<p>The <a>hypothetical main size</a> is the item's <a>flex base size</a>
				clamped according to its min and max main size properties.
			</blockquote>

		<li id="change-201409-table-wrappers">
			Restored normative status of note about table wrapper boxes normative;
			it had been accidentally changed in the previous draft.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-2">2</a>)

		<li id="change-201409-display-longhands">
			Removed references to 'display' property longhands,
			since they will be removed from CSS Display Level 3.

		<li id="change-201409-layout-vs-size">
			Change wording to not imply an unnecessary layout pass.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925#issue-22">22</a>)

			<blockquote>
				Otherwise,
				<del>lay out</del><ins>size</ins> the item into the <a>available space</a>
				using its used <a>flex basis</a> in place of its <a>main size</a>,
				treating a value of ''content'' as ''width/max-content''.
			</blockquote>

		<li id="change-201409-clamped-specified">
			Renamed “clamped size” to “specified size” in the definition of ''min-width/height: auto''.

		<li>
			Various trivial fixes.
	</ul>

<h3 id="changes-201403">
Changes since the 25 March 2014 LCWD</h3>

	A <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325">Disposition of Comments</a> is also available.

<h4 id="change-201403-substantive">
Substantive Changes and Bugfixes</h4>

	The following significant changes were made since the
	<a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">25 March 2014 Last Call Working Draft</a>

	<ul>
		<li id="change-201403-min-auto-not">
			Fixed errors (missing negation, unspecified axis) in definition of ''min-height/min-width: auto''.
			(Issues <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-11">11</a>,
			<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-18">18</a>,
			<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-30">30</a>)

			<blockquote>
				<p>On a <a>flex item</a> whose 'overflow' is <del>not</del> ''overflow/visible'' <ins>in the <a>main axis</a></ins>,
			</blockquote>

		<li id="change-201403-min-auto-ratio">
			Expanded and rewrote definition of ''min-height/min-width: auto''
			to add special handling of items with intrinsic ratios.
			(Issues <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-16">16</a>
			and <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-28">28</a>)

			<blockquote>
				<p>On a <a>flex item</a> whose 'overflow' is not ''overflow/visible'',
				<ins>the following table gives the minimum size:
				<a value for="min-width" lt="auto"><strong>[see table]</strong></a></ins><br>
				<del>this keyword specifies as the minimum size the smaller of:</del></p>
				<del>
					<ul>
						<li>the <a>min-content size</a>, or
						<li>the computed 'width'/'height', if that value is <a>definite</a>.
					</ul>
				</del>
			</blockquote>

		<li id="change-201403-min-auto-main-size-basis">
			Adjusted ''min-height/min-width: auto''
			to only apply the computed main size as a minimum
			in cases where the flex basis was retrieved from the main size property.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-19">19</a>)

			<blockquote>
				<p>&hellip; is defined if <ins>the item’s computed flex-basis is ''auto'' and</ins>
				its computed main size property is definite &hellip;
			</blockquote>

		<li id="change-201403-min-auto-intrinsic-percentages">
			Defined that any size adjustment imposed by a box’s ''min-height/min-width: auto''
			is not consulted when percentage-sizing any of its contents.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-27">27</a>)
			<blockquote>
				<p>In order to prevent cycling sizing,
				the ''auto'' value of 'min-height' and 'max-height'
				does not factor into the percentage size resolution of the box’s contents.
				For example, a percentage-height block whose flex item parent has
				''height: 120em; min-height: auto''
				will size itself against ''height: 120em'' regardless of the impact
				that 'min-height' might have on the used size of the flex item.
			</blockquote>

		<li id="change-201403-flex-basis-auto">
			Introduced extra ''main-size'' keyword to 'flex-basis'
			so that “lookup from main-size property” and “automatic sizing” behaviors
			could each be explicitly specified.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-20">20</a>)
			This change was later reverted with an alternative proposal solving the same problem
			by instead introducing the ''content'' keyword.

		<li id="change-201403-definite-flexing">
			Defined <a>flex items</a> with a <a>definite</a> <a>flex basis</a>
			to also be <a>definite</a> in the <a>main axis</a>,
			allowing resolution of percentage-sized children
			even when the item itself is flexible.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-26">26</a>)

			<blockquote>
				<ins><p>If a percentage is going to be resolved against a flex item’s main size,
				and the flex item has a definite flex basis,
				the main size must be treated as definite for the purpose of resolving the percentage,
				and the percentage must resolve against the flexed main size of the flex item
				(that is, after the layout algorithm below has been completed for the flex item’s flex container,
				and the flex item has acquired its final size).
				</ins>
			</blockquote>

		<li id="change-201403-clamp-single-line">
			Clamp a single line flexbox's line <a>cross size</a> to the container's own min/max,
			even when the container's size is indefinite.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-9">9</a>)

			<blockquote>
				<ul>
					<li>
						The used cross-size of the <a>flex line</a> is
						the largest of the numbers found in the previous two steps
						and zero.

						<p><ins>If the flex container has only one flex line
						(even if it's a multi-line flex container),
						then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
						<span class='note'>Note that if CSS 2.1's definition of min/max-width/height applied more generally,
						this behavior would fall out automatically.</span></ins>
				</ul>
			</blockquote>

		<li id="change-201403-resolve-flex">
			Fixed various errors in the new <a href="#resolve-flexible-lengths">Resolving Flexible Lengths</a> section
			(see <a href="#change-2012-flex-continuity">March 2014 rewrite to create continuity between <css>flex: 0</css> and <css>flex: 1</css></a>)
			and reverted the editorial structure to match the old Candidate Recommendation.
			(Issues <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-3">3</a>,
			 <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-4">4</a>,
			  <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-8">8</a>,
			  <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-10">10</a>,
			  <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-15">15</a>)

		<li id="change-201403-max-intrinsic">
			Fixed <a href="#intrinsic-sizes">max-content sizing of flex containers</a>
			to account for flexing behavior
			by normalizing per flex fraction rather than merely summing the max-content sizes of the flex items.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-39">39</a>)

		<li id="change-201403-flex-animation">
			Updated 'flex' property to accept animations always,
			now that the discontinuity between 0 and non-0 values has been <a href="#change-2012-flex-continuity">fixed</a>.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-5">5</a>)
	</ul>

<h4 id="change-201403-clarify">
Clarifications</h4>

	The following significant changes were made since the
	<a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">25 March 2014 Last Call Working Draft</a>

	<ul>
		<li id="change-201403-css21-staticpos">
			Clarified how the static position of an absolutely-positioned child of a flex container
			is calculated by introducing an explanation of the effect more closely tied
			with CSS2.1 concepts and terminology.
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-12">12</a>)

			<blockquote>
				<p><del>Its</del> <ins>The</ins> static position <ins>of an absolutely-positioned child of a flex container</ins>
				is <del>calculated by first doing full flex layout without the absolutely-positioned children,
				then positioning each absolutely-positioned child</del>
				<ins>determined such that the child is positioned</ins>
				as if it were the sole flex item in the flex container,
				assuming both the child and the flex container were fixed-size boxes of their used size.

				<p><ins>In other words, the static position of an absolutely positioned child of a flex container
				is determined <em>after flex layout</em>
				by setting the child’s <a>static-position rectangle</a> to the flex container’s content box,
				then aligning the absolutely positioned child within this rectangle
				according to the 'justify-content' value of the flex container and the 'align-self' value of the child itself.</ins>
			</blockquote>

		<li id="change-201403-abspos-ordering">
			Clarified application of 'order' to absolutely-positioned children of the <a>flex container</a>:

			<blockquote>
				<p>An absolutely-positioned child of a flex container does not participate in flex layout
				<del>beyond the reordering step</del>.
				<ins>However, it does participate in the reordering step (see 'order'),
				which has an effect in their painting order.</ins>
			</blockquote>

			<blockquote>
				<p>The order property controls the order in which <del>flex items</del>
				<ins>children of a flex container</ins>
				appear within their flex container&hellip;
				<p>Unless otherwise specified by a future specification,
				this property has no effect on boxes that are not <del>flex items</del>
				<ins>children of a flex container</ins>.
			</blockquote>

			<blockquote>
				<ins><p class="note">Note: Absolutely-positioned children of a flex container
				do not participate in flex layout, but are reordered
				together with any flex item children.</p></ins>
			</blockquote>

		<li id="change-201403-clarify-stretched">
			Clarified what a <a>stretched</a> flex item is
			for the purposes of special behavior (like definiteness).
			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-25">25</a>)
			<blockquote>
				<p>If the <a>cross size</a> property of the flex item computes to auto,
				<ins>and either of the cross-axis margins are auto, the flex item is stretched. Its</ins>
				<del>its</del> used value &hellip;
			</blockquote>
	</ul>

<h3 id="changes-2012">
Changes since the 18 September 2012 Candidate Recommendation</h3>

	This section documents the changes since the previous publication.
	A <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-2012">Disposition of Comments</a> is also available.

<h4 id="changes-2014-substantive">
Substantive Changes and Bugfixes</h4>

	The following significant changes were made since the
	<a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">18 September 2012 Candidate Recommendation</a>:

	<ul>
	<!-- Apparently we forgot to actually edit in this change. See above.
		<li id="change-2012-flex-grow-animation">
			Removed the restriction on animating between 0 and non-0 values in 'flex-grow' and 'flex-shrink',
			as the layout algo no longer has a discontinuity in behavior there.
	-->
		<li id="change-2012-min-width">
			Changed the behavior of the new ''min-width/auto'' initial value of 'min-width'/'min-height' to
			<ul>
				<li>Take into account whether 'overflow' is ''visible'',
					since when 'overflow' is explicitly handled, it is confusing (and unnecessary)
					to force enough size to show all the content.
				<li>Take into account the specified 'width'/'height',
					so that the implied minimum is never greater than the specified size.
				<li>Compute to itself (not to ''width/min-content'') on flex items,
					since they are no longer equivalent (due to above changes).
			</ul>
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-19">Issue 19</a>)
			<blockquote>
				<dl>
					<dt>auto
					<dd>
						<del>
							<p>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.</p>
							<p class='note'>
								It is intended that this will compute to the ''width/min-content'' keyword
								when the specification defining it ([[CSS3-SIZING]]) is sufficiently mature.
							</p>
						</del>
						<ins>
							<p>On a <a>flex item</a> whose 'overflow' is not ''overflow/visible'',
							this keyword specifies as the minimum size the smaller of:
							<ul>
								<li>the <a>min-content size</a>, or
								<li>the computed 'width'/'height', if that value is <a>definite</a>.
							</ul>
						</ins>
				</dl>
			</blockquote>
		<li id="change-2012-percent-margins">
			Specified that percentage margins/paddings on flex items
			are resolved against their respective dimensions,
			not the inline dimension of the containing block like blocks do.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-16">Issue 16</a>)
			<blockquote>
				<ins>
					<p>Percentage margins and paddings on <a>flex items</a>
					are always resolved against their respective dimensions;
					unlike blocks, they do not always resolve against
					the inline dimension of their containing block.</p>
				</ins>
			</blockquote>
		<li id="change-2012-stretch-definite">
			Pass definiteness of a single-line flex container's size through to any stretched items.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-3">Issue 3</a>)
			<blockquote>
				<ins>
					<p>
						As a special case for handling stretched <a>flex items</a>,
						if a <a>single-line</a> <a>flex container</a> has a definite <a>cross size</a>,
						the outer <a>cross size</a> of any <a>flex items</a> with ''align-self: stretch''
						is the flex container's inner <a>cross size</a>
						(clamped to the <a>flex item</a>’s min and max <a>cross size</a>)
						and is considered <a>definite</a>.</p>
				</ins>
			</blockquote>
		<li id="change-2012-stretch-auto">
			Allow percentages inside a stretched auto-height flex item to resolve by requiring a relayout pass.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-3">Issue 3</a>)
			<blockquote>
				<ins>
					<p>If the flex item has ''align-self: stretch'', redo layout for its contents,
					treating this used size as its definite <a>cross size</a>
					so that percentage-sized children can be resolved.

 					<p class="note">Note that this step does not affect the main size of the flex item,
 					even if it has an intrinsic aspect ratio.</p>
 				</ins>
 			</blockquote>
		<li id="change-2012-intrinsic-ratio">
			Allow intrinsic aspect ratios to inform the <a href="#algo-main-item">main-size calculation.</a>
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-8">Issue 8</a>)
			<blockquote>
				<ins>
					<p>If the flex item has ...
					<ul>
						<li>an intrinsic aspect ratio,
						<li>a <a>flex basis</a> of <a value for=width>auto</a>, and
						<li>a definite <a>cross size</a>
					</ul>
					<p>then the <a>flex base size</a> is calculated from its inner <a>cross size</a>
					and the <a>flex item</a>&rsquo;s intrinsic aspect ratio.</p>
				</ins>
			</blockquote>
		<li id="change-2012-main-depend-cross">
			Define <a>hypothetical main size</a> when the <a>main size</a> depends on the <a>cross size</a>.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-23">Issue 23</a>)
			<blockquote>
				<p><ins>If a <a>cross size</a> is needed to determine the <a>main size</a>
					(e.g. when the <a>flex item</a>’s <a>main size</a> is in its block axis)
					and the <a>flex item</a>’s <a>cross size</a> is ''auto'' and not <a>definite</a>,
					in this calculation use ''height/fit-content'' as the <a>flex item</a>’s <a>cross size</a>.</ins>
			</blockquote>
		<li id="change-2012-intrinsic-sizes">
			Defined the <a href="#intrinsic-sizes">intrinsic sizes of flex containers.</a>
			<blockquote>
				<p><strong>Determine the main size of the flex container</strong>
				using its main size property.
				<del>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).</del>
				For this computation, ‘auto’ margins on flex items are treated as ‘0’.
			</blockquote>
			<blockquote>
				<ins>
				<!--
					<h3 id="intrinsic-sizes">
					Intrinsic Sizes</h3>
				-->
					<p>
						The <a>max-content main size</a> of a <a>flex container</a>
						is the sum of the flex container's items' <a>max-content contributions</a> in the <a>main axis</a>.
						The <a>min-content main size</a> of a <a>single-line</a> flex container
						is the sum of the flex container's items' <a>min-content contributions</a> in the <a>main axis</a>;
						for a <a>multi-line</a> container,
						it is the largest of those contributions.

					<p>
						The <a>min-content cross size</a> and  <a>max-content cross size</a> of a flex container
						are the <a>cross size</a> of the flex container
						after performing layout into the given available <a>main-axis</a> space
						and infinite available <a>cross-axis</a> space.

					<p>
						The main-size <a lt="min-content contribution">min-content</a>/<a>max-content contribution</a> of a <a>flex item</a>
						is its outer <a>hypothetical main size</a>
						when sized under a <a lt="min-content constraint">min-content</a>/<a>max-content constraint</a> (respectively).

					<p>
						See [[!CSS3-SIZING]] for a definition of the terms in this section.</p>
				</ins>
			</blockquote>
		<li id="change-2012-flex-line-bug">
			Correct an omission in the flex-line size determination,
			so a <a>single-line</a> flexbox will size to its contents
			if it doesn't have a definite size.
			<blockquote>
				<p>
					If the flex container has only one <a>flex line</a>
					(even if it's a <a>multi-line</a> <a>flex container</a>)
					<ins>and has a <a>definite</a> <a>cross size</a></ins>,
					the <a>cross size</a> of the <a>flex line</a>
					is the <a>flex container</a>'s inner <a>cross size</a>.
			</blockquote>
		<li id="change-2012-flex-line-floor">
			Flex lines have their size floored at 0.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-2">Issue 2</a>)
			<blockquote>
				<p>The used cross-size of the flex line is the <del>larger</del> <ins>largest</ins>
				of the numbers found in the previous two steps<ins> and zero</ins>.
			</blockquote>
		<li id="change-2012-atomic-painting">
			Flex items paint like inline blocks rather than blocks.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-18">Issue 18</a>)
			<blockquote>
				<p>
					<a>Flex items</a> paint exactly the same as <del>block-level elements in the normal flow</del> <ins>inline blocks [[!CSS21]]</ins>.
			</blockquote>
		<li id="change-2012-flex-basis-zero">
			An omitted 'flex-basis' component of the 'flex' shorthand
			now resolves to ''0%'' instead of ''0px''.
			Because percentages resolved against indefinite sizes behave as ''auto'',
			this gives better behavior in shrink-wrapped flex containers.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-20">Issue 20</a>)
			<blockquote>
				<p>When omitted from the 'flex' shorthand, its specified value is <ins>''0%''</ins> <del>the length zero</del>.
			</blockquote>
			<blockquote>
				<dl>
					<dt>''flex: &lt;positive-number>''
					<dd>Equivalent to ''flex: &lt;positive-number> 1 <del>0px</del><ins>0%</ins>''.
				</dl>
			</blockquote>
			Note: This change was <a href="change-2015-flex-basis-zero">reverted</a>.
		<li id="change-2012-unresolvable-basis">
			Defined that an unresolvable percentage <a>flex base size</a> is treated as <a value for=width>auto</a>.
			<blockquote>
				<p>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 <a>indefinite</a>,
				the result is <del>undefined</del> <ins>the same as a <a>main size</a> of <a value for=width>auto</a></ins>.
			</blockquote>
		<li id="change-2012-static-pos">
			Simplified the static position of abspos children of <a>flex containers</a> to be consistent with Grid Layout.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-6">Issue 6</a>)
			<blockquote>
				An absolutely-positioned child of a <a>flex container</a> does not participate in flex layout
				beyond the <a href="#algo-flex-order">reordering step</a>.

				<del>
					<p>
						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:

					<p>
						If both 'left' and 'right' are ''auto'',
						the <a>flex item</a> must be positioned so that
						its <a>main-start</a> or <a>cross-start</a> edge
						(whichever is in the horizontal axis)
						is aligned with the <a>static position</a>.
						If both 'top' and 'bottom' are ''auto'',
						the <a>flex item</a> must be positioned so that
						its <a>main-start</a> or <a>cross-start</a> edge
						(whichever is in the vertical axis)
						is aligned with the <a>static position</a>.

					<p>
						In the <a>main axis</a>,

					<ol>
						<li>
							If there is a subsequent in-flow <a>flex item</a> on the same <a>flex line</a>,
							the <a>static position</a> is the outer <a>main-start</a> edge of that <a>flex item</a>.

						<li>
							Otherwise, if there is a preceding in-flow <a>flex item</a> on the same <a>flex line</a>,
							the <a>static position</a> is the outer <a>main-end</a> edge of that <a>flex item</a>.

						<li>
							Otherwise, the <a>static position</a> is determined
							by the value of 'justify-content' on the <a>flex container</a>
							as if the <a>static position</a> were represented by a zero-sized flex item.
					</ol>

					<p>
						In the <a>cross axis</a>,

					<ol>
						<li>
							If there is a preceding in-flow <a>flex item</a>,
							the <a>static position</a> is the <a>cross-start</a> edge of the <a>flex line</a>
							that item is in.
						<li>
							Otherwise, the <a>static position</a> is the <a>cross-start</a> edge
							of the first <a>flex line</a>.
					</ol>

					<p class='note'>
						The static position is intended to more-or-less match the position of
						an anonymous 0&times;0 in-flow ''align-self/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.</p>
				</del>
				<ins>
					<p>Its static position is calculated by first doing full flex layout
					without the absolutely-positioned children,
					then positioning each absolutely-positioned child
					as if it were the sole <a>flex item</a> in the <a>flex container</a>,
					assuming both the child and the <a>flex container</a>
					were fixed size boxes of their used size.
					<div class='example'>
						For example, by default, the static position of
						an absolutely positioned child aligns it to the main-start/cross-start corner,
						corresponding to the default values of 'justify-content' and 'align-content' on the <a>flex container</a>.
						Setting ''justify-content:center'' on the <a>flex container</a>, however,
						would center it in the main axis.
					</div>
				</ins>
			</blockquote>
		<li id="change-2012-flex-continuity">
			Changed algorithm for <a href="#resolve-flexible-lengths">resolving flexible lengths</a>
			to make behavior continuous as the sum of the flex factors approaches zero.
			(No change for a sum &ge; 1.)
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-30">Issue 30</a>)
			Replaces <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#resolve-flexible-lengths">this section</a>
			with <a href="#resolve-flexible-lengths">this one</a>.
	</ul>

<h4 id="changes-2014-clarify">
Clarifications</h4>

	<p>The following significant clarifications were also made:
	<ul>
		<li id="clarify-2012-abspos-items">
			Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion). (??)
			<blockquote>
				<table class="definition">
					<tr>
						<th>Name:
						<td>order
					<tr>
						<th>Applies to:
						<td><a>flex items</a> <ins>and absolutely-positioned children of <a>flex containers</a></ins>
				</table>
			</blockquote>
			<blockquote>
				<p>Re-order the flex items <ins>and absolutely positioned flex container children</ins> according to their 'order'.
			</blockquote>
		<li id="clarify-2012-float-display">
			Clarified that 'float' still affects the computed 'display'
			(which may affect box-fixup rules that run prior to flex item determination).
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-7">Issue 7</a>)
			<blockquote>
				<p>'float' and 'clear' have no effect on a <a>flex item</a><ins>,
				and do not take it out-of-flow.
				However, the 'float' property can still affect box generation
				by influencing the 'display' property's computed value.</ins>
			</blockquote>
		<li id="clarify-2012-white-space">
			Clarify what is meant by “white space”. (<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-26">Issue 26</a>)
			<blockquote>
				<p>However, an anonymous flex item that contains only
				<a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a>
				<ins>(i.e. characters that can be affected by the 'white-space' property)</ins>
				is not rendered, as if it were ''display:none''.
			</blockquote>
		<li id="clarify-2012-table-anon-boxes">
			Clarified that table anonymous box generation occurs
			in place of computed value conversion for internal table elements.
		<li id="clarify-2012-display-blockification">
			Clarified interaction of flex item determination with <css>display-inside</css> / <css>display-outside</css>
			(the new longhands of 'display' defined in the <a href="http://www.w3.org/TR/css-display/">CSS Display Module Level 3</a>).
			<blockquote>
				<ins><p>If the specified <css>display-outside</css> of an in-flow child of an element that generates a <a>flex container</a>
					is ''inline-level'',
					it computes to ''block-level''.
					(This effectively converts any inline 'display' values to their block equivalents.)</p>
				</ins>
			</blockquote>
			Note: This change was <a href="#change-201409-display-longhands">reverted</a>.
		<li id="clarify-2012-overflow-flex-containers">
			Clarified that 'overflow' applies to flex containers.
		<li id="clarify-2012-first-line-letter">
			Clarified that ''::first-line'' and ''::first-letter'' pseudo-elements
			do not apply to flex containers (because they are not block containers).
		<li id="clarify-2012-stretch-computed-auto">
			Clarify that <a value for=align-self>stretch</a> checks for the <em>computed</em>
			value of the cross-size property being <a value for=width>auto</a>,
			which means that percentage cross-sizes that behave as <a value for=width>auto</a>
			(because they don't resolve against definite sizes) aren't stretched.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-5">Issue 5</a>)
			<blockquote>
				<dl>
					<dt>stretch
					<dd>
						<p>
							If the <a>cross size property</a> of the <a>flex item</a> <del>is</del> <ins>computes to</ins> <a value for=width>auto</a>,
							its used value is &hellip;
				</dl>
			</blockquote>
			<blockquote>
				<p><strong>Determine the used cross size of each flex item.</strong>
				If a flex item has ''align-self: stretch'',
				its <ins>computed</ins> cross size property is <a value for=width>auto</a>,
				and &hellip;
			</blockquote>
		<li id="clarify-2012-flex-container-sizing">
			Clarify that the rules of the formatting context are used for determining the flex container's main size.
			<blockquote>
				<strong>Determine the main size of the flex container</strong>
				using <ins>the rules of the formatting context in which it participates</ins> <del>its main size property</del>.
			</blockquote>
		<li id="clarify-2012-painting-order">
			Clarified that 'order'-modified document order is used instead of raw document order when painting.
			(This was already stated in the 'order' section, but not in the section explicitly about painting order.)
		<li id="clarify-2012-line-breaking">
			Clarified line-breaking to precisely handle negatively-sized flex items and zero-size items at the end of a line.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-1">Issue 1</a>)
			<blockquote>
				<p>	Otherwise,
					starting from the first uncollected item,
					collect <ins>consecutive items one by one
					until the first time that the <em>next</em> collected item
					would not fit into the flex container's inner main size,
					or until a forced break is encountered.
					If the very first uncollected item wouldn't fit,
					collect just it into the line</ins>
					<del>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</del>.
			</blockquote>
			<blockquote>
				<p class="note">Note that <del>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.</del>
				The  "collect as many" line will collect <del>them</del> <ins>zero-sized flex items</ins>
				onto the end of the previous line
				even if the last non-zero item exactly "filled up" the line.
			</blockquote>
		<li id="clarify-2012-clamping">
			Clarified that flex container cross sizes are still clamped by the flex container's min/max properties.
			(<a href="http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-24">Issue 24</a>)
			<blockquote>
				<ul>
					<li>
						If the cross size property is a <a>definite</a> size,
						use that,
						<ins>clamped by the min and max cross size properties of the <a>flex container</a></ins>.
					<li>
						Otherwise,
						use the sum of the flex lines' cross sizes,
						<ins>clamped by the min and max cross size properties of the <a>flex container</a></ins>.
				</ul>
			</blockquote>
	</ul>

	A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-cr-2012">Disposition of Candidate Recommendation Comments</a> is available.