drafts: css3-flexbox/Overview.html@9437131b3d6e (annotated)

css3-flexbox/Overview.html@9437131b3d6e (annotated)

css3-flexbox/Overview.html

Thu, 14 Mar 2013 14:54:35 -0700

author: Tab Atkins Jr. <jackalmage@gmail.com>
date: Thu, 14 Mar 2013 14:54:35 -0700
changeset 7745: 9437131b3d6e
parent 7649: 9895709f0a81
child 7746: c63e994df5a4
permissions: -rw-r--r--

[css3-flexbox] Per WG resolution, revert min-width/height back to 0. Adjust examples as appropriate, and add note recommending using it manually.

 <!DOCTYPE html>
 <html lang=en>
  <head>
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <title>CSS Flexible Box Layout Module</title>
   <!--
   <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
   -->
   <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
   <meta content=text name=dcterms.type>
   <meta content=2013-03-14 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://dev.w3.org/csswg/css3-flexbox/"
    name=dcterms.identifier>
   <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
    type="text/css">
   <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
    type="text/css">
   <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;
 	}
     :not(code) var { font-style: normal; color: #005A9C; }
     i { font-style: normal; }
     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>
  <body class=h-entry>
   <div class=head> <!--begin-logo-->
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    <h1 class=p-name id=head-box-flexible>CSS Flexible Box Layout Module</h1>
    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, <time
     class=dt-updated datetime=20130314>14 March 2013</time></h2>
    <dl>
     <dt>This version:
      <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130314/</a>-->
     <dd><a class=u-url
      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
     <dt>Latest version:
      <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
     <dd><a
      href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
     <dt>Editor's Draft:
     <dd><a
      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
     <dt>Previous version:
     <dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/"
      rel=previous>http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a>
     <dt>Issues List:
     <dd><a
      href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Flexbox&amp;resolution=---">Bugzilla
      Bugs for Flexbox</a>
     <dt>Discussion:
     <dd><a
      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
      with subject line "<code>[css3-flexbox] …message topic…</code>"
     <dt>Editors:
     <dd class="p-author h-card vcard"><a class="p-name fn u-url url"
      href="http://www.xanthir.com/contact" rel=author>Tab Atkins Jr.</a>,
      <span class="p-org org">Google Inc.</span>
     <dd class="p-author h-card vcard"><a class="p-name fn u-url url"
      href="http://fantasai.inkedblade.net/contact" rel=author>Elika J.
      Etemad</a>, <span class="p-org org">Mozilla</span>
     <dd class="p-author h-card vcard"><span class="p-name fn">Rossen
      Atanassov</span>, <span class="p-org org">Microsoft Corporation</span>,
      <a class="u-email email"
      href="mailto:ratan@microsoft.com">ratan@microsoft.com</a>
     <dt>Authors and former editors:
     <dd class="p-author h-card"><span class=p-name>Alex Mogilevsky</span>,
      <span class=p-org>Microsoft Corporation</span>, <a class=u-email
      href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
     <dd class="p-author h-card"><span class=p-name>L. David Baron</span>,
      <span class=p-org>Mozilla Corporation</span>, <a class=u-email
      href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
     <dd class="p-author h-card"><span class=p-name>Neil Deakin</span>, <span
      class=p-org>Mozilla Corporation</span>, <a class=u-email
      href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>
     <dd class="p-author h-card"><span class=p-name>Ian Hickson</span>,
      formerly of Opera Software, <a class=u-email
      href="mailto:ian@hixie.ch">ian@hixie.ch</a>
     <dd class="p-author h-card"><span class=p-name>David Hyatt</span>,
      formerly of Netscape Corporation, <a class=u-email
      href="mailto:hyatt@apple.com">hyatt@apple.com</a>
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
     href="http://www.csail.mit.edu/"><abbr
     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
     href="http://www.ercim.eu/"><abbr
     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>, <a
     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
     and <a
     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
     use</a> rules apply.</p>
    <!--end-copyright-->
    <hr title="Separator for header">
   </div>
   <h2 class="no-num no-toc" id=abstract> Abstract</h2>
   <p> <span class=p-summary> 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. </span> 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.
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   <!--begin-status-->
   <p>This is a public copy of the editors' draft. It is provided for
    discussion only and may change at any moment. Its publication here does
    not imply endorsement of its contents by W3C. Don't cite this document
    other than as work in progress.
   <p>The (<a
    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
    mailing list <a
    href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE">
    www-style@w3.org</a> (see <a
    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
    discussion of this specification. When sending e-mail, please put the text
    “css3-flexbox” in the subject, preferably like this:
    “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>”
   <p>This document was produced by the <a
    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
    the <a href="http://www.w3.org/Style/">Style Activity</a>).
   <p>This document was produced by a group operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/32061/status"
    rel=disclosure>public list of any patent disclosures</a> made in
    connection with the deliverables of the group; that page also includes
    instructions for disclosing a patent. An individual who has actual
    knowledge of a patent which the individual believes contains <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
 of the W3C Patent Policy</a>.</p>
   <!--end-status-->
   <p>The CR period will last at least until 20 March 2013. At the time of
    publication, no test suite and implementation report have yet been made.
    They will be made available from the <a href="/Style/CSS/Test/">CSS test
    suites page</a>. See the section <a href="#cr-exit-criteria">“CR exit
    criteria”</a> for details.
   <p>See the section <a href="#changes">“Changes”</a> for changes made to
    this specification since the last Working Draft.
   <p> The following features are at-risk:
   <ul>
    <li>Calculation of the static position of absolutely-positioned flex
     items.
   </ul>
   <h2 class="no-num no-toc" id=table>Table of contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
     <ul class=toc>
      <li><a href="#overview"><span class=secno>1.1. </span> Overview</a>
      <li><a href="#placement"><span class=secno>1.2. </span> Module
       interactions</a>
      <li><a href="#values"><span class=secno>1.3. </span> Values</a>
     </ul>
    <li><a href="#box-model"><span class=secno>2. </span> Flex Layout Box
     Model and Terminology</a>
    <li><a href="#flex-containers"><span class=secno>3. </span> Flex
     Containers: the ‘<code class=css>flex</code>’ and ‘<code
     class=css>inline-flex</code>’ ‘<code class=property>display</code>’
     values</a>
    <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a>
     <ul class=toc>
      <li><a href="#abspos-items"><span class=secno>4.1. </span>
       Absolutely-Positioned Flex Children</a>
      <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item
       Margins</a>
      <li><a href="#painting"><span class=secno>4.3. </span> Flex Item
       Z-Ordering</a>
      <li><a href="#visibility-collapse"><span class=secno>4.4. </span>
       Collapsed Items</a>
     </ul>
    <li><a href="#flow-order"><span class=secno>5. </span> Ordering and
     Orientation</a>
     <ul class=toc>
      <li><a href="#flex-direction-property"><span class=secno>5.1. </span>
       Flex Flow Direction: the ‘<code
       class=property>flex-direction</code>’ property</a>
      <li><a href="#flex-wrap-property"><span class=secno>5.2. </span> Flex
       Line Wrapping: the ‘<code class=property>flex-wrap</code>’
       property</a>
      <li><a href="#flex-flow-property"><span class=secno>5.3. </span> Flex
       Direction and Wrap: the ‘<code class=property>flex-flow</code>’
       shorthand</a>
      <li><a href="#order-property"><span class=secno>5.4. </span> Display
       Order: the ‘<code class=property>order</code>’ property</a>
       <ul class=toc>
        <li><a href="#order-accessibility"><span class=secno>5.4.1. </span>
         Reordering and Accessibility</a>
       </ul>
     </ul>
    <li><a href="#flex-lines"><span class=secno>6. </span> Flex Lines</a>
    <li><a href="#flexibility"><span class=secno>7. </span> Flexibility</a>
     <ul class=toc>
      <li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code
       class=property>flex</code>’ Shorthand</a>
      <li><a href="#flex-common"><span class=secno>7.2. </span> Common Values
       of ‘<code class=property>flex</code>’</a>
      <li><a href="#flex-components"><span class=secno>7.3. </span> Components
       of Flexibility</a>
       <ul class=toc>
        <li><a href="#flex-grow-property"><span class=secno>7.3.1. </span> The
         ‘<code class=property>flex-grow</code>’ property</a>
        <li><a href="#flex-shrink-property"><span class=secno>7.3.2. </span>
         The ‘<code class=property>flex-shrink</code>’ property</a>
        <li><a href="#flex-basis-property"><span class=secno>7.3.3. </span>
         The ‘<code class=property>flex-basis</code>’ property</a>
       </ul>
     </ul>
    <li><a href="#alignment"><span class=secno>8. </span> Alignment</a>
     <ul class=toc>
      <li><a href="#auto-margins"><span class=secno>8.1. </span> Aligning with
       ‘<code class=css>auto</code>’ margins</a>
      <li><a href="#justify-content-property"><span class=secno>8.2. </span>
       Axis Alignment: the ‘<code class=property>justify-content</code>’
       property</a>
      <li><a href="#align-items-property"><span class=secno>8.3. </span>
       Cross-axis Alignment: the ‘<code class=property>align-items</code>’
       and ‘<code class=property>align-self</code>’ properties</a>
      <li><a href="#align-content-property"><span class=secno>8.4. </span>
       Packing Flex Lines: the ‘<code class=property>align-content</code>’
       property</a>
      <li><a href="#flex-baselines"><span class=secno>8.5. </span> Flex
       Baselines</a>
     </ul>
    <li><a href="#layout-algorithm"><span class=secno>9. </span> Flex Layout
     Algorithm</a>
     <ul class=toc>
      <li><a href="#box-manip"><span class=secno>9.1. </span> Initial
       Setup</a>
      <li><a href="#line-sizing"><span class=secno>9.2. </span> Line Length
       Determination</a>
      <li><a href="#main-sizing"><span class=secno>9.3. </span> Main Size
       Determination</a>
      <li><a href="#cross-sizing"><span class=secno>9.4. </span> Cross size
       determination</a>
      <li><a href="#main-alignment"><span class=secno>9.5. </span> Main-Axis
       Alignment</a>
      <li><a href="#cross-alignment"><span class=secno>9.6. </span> Cross-Axis
       Alignment</a>
      <li><a href="#resolve-flexible-lengths"><span class=secno>9.7. </span>
       Resolving Flexible Lengths</a>
     </ul>
    <li><a href="#pagination"><span class=secno>10. </span> Fragmenting Flex
     Layout</a>
     <ul class=toc>
      <li><a href="#pagination-algo"><span class=secno>10.1. </span> Sample
       Flex Fragmentation Algorithm</a>
     </ul>
    <li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
     <ul class=toc>
      <li><a href="#conventions"><span class=secno>11.1. </span> Document
       conventions</a>
      <li><a href="#conformance-classes"><span class=secno>11.2. </span>
       Conformance classes</a>
      <li><a href="#partial"><span class=secno>11.3. </span> Partial
       implementations</a>
      <li><a href="#experimental"><span class=secno>11.4. </span> Experimental
       implementations</a>
      <li><a href="#testing"><span class=secno>11.5. </span> Non-experimental
       implementations</a>
      <li><a href="#cr-exit-criteria"><span class=secno>11.6. </span> CR exit
       criteria</a>
     </ul>
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
    <li class=no-num><a href="#references">References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative">Normative references</a>
      <li class=no-num><a href="#informative">Other references</a>
     </ul>
    <li class=no-num><a href="#changes">Changes</a>
    <li class=no-num><a href="#property">Property index</a>
    <li class=no-num><a href="#index">Index</a>
   </ul>
   <!--end-toc-->
   <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   <p><em>This section is not normative.</em>
   <p> CSS 2.1 defined four layout modes — algorithms which determine the
    size and position of boxes based on their relationships with their sibling
    and ancestor boxes:
   <ul class=compact>
    <li>block layout, designed for laying out documents
    <li>inline layout, designed for laying out text
    <li>table layout, designed for laying out 2D data in a tabular format
    <li>positioned layout, designed for very explicit positioning without much
     regard for other elements in the document
   </ul>
   <p> This module introduces a new layout mode, <dfn id=flex-layout>flex
    layout</dfn>, which is designed for laying out more complex applications
    and webpages.
   <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
   <p><em>This section is not normative.</em>
   <p> 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/CSS21/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 webapps and complex web pages often need. The contents of a flex
    container:
   <ul>
    <li> can be laid out in any <a href="#flex-direction-property">flow
     direction</a> (leftwards, rightwards, downwards, or even upwards!)
    <li> can have their display order <a
     href="#flex-flow-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)
    <li> can be laid out linearly along a single (<a href="#main-axis"><i
     title="main axis">main</i></a>) axis or <a
     href="#flex-wrap-property">wrapped</a> into multiple lines along a
     secondary (<a href="#cross-axis"><i title="cross axis">cross</i></a>)
     axis
    <li> can <a href="#flexibility">“flex” their sizes</a> to respond to
     the available space
    <li> can be <a href="#alignment">aligned</a> with respect to their
     container or each other
    <li> can be dynamically <a href="#visibility-collapse">collapsed</a> or
     uncollapsed along the <a href="#main-axis"><i>main axis</i></a> while
     preserving the container's <a href="#cross-size"><i>cross size</i></a>
   </ul>
   <div class=example>
    <p> Here's an example of a catalog where each item has a title, an photo,
     a description, and a purchase button. The designer's intention is that
     each entry has the same overall size, that the photo be above the text,
     and that the purchase buttons aligned at the bottom, regardless of the
     length of the item's description. Flex layout makes many aspects of this
     design easy:
    <ul>
     <li> 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.
     <li> 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, ‘<a
      href="#order"><code class=property>order</code></a>’ is used to pull
      the image up from later in the content to the top, and ‘<a
      href="#align-self"><code class=property>align-self</code></a>’ is used
      to center it horizontally.
     <li> An <a href="#auto-margins">‘<code class=css>auto</code>’
      margin</a> above the purchase button forces it to the bottom within each
      entry box, regardless of the height of that item's description.
    </ul>
    <pre>
 &lt;style>
 #deals {
 	display: flex;        /* Flex layout so items <a
     href="#align-self"
     title="Flex items stretch by default.">have equal height</a>  */
 	flex-flow: row wrap;  /* <a
     href="http://dev.w3.org/csswg/css3-flexbox/#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
     href="#flex-flow-property">Lay out item's contents vertically</a>  */
 }
 .sale-item > img {
 	order: -1;            /* <a
     href="#order-property">Shift image before other content (in visual order)</a> */
 	align-self: center;   /* <a
     href="#align-self">Center the image cross-wise (horizontally)</a>         */
 }
 .sale-item > button {
 	margin-top: auto;     /* <a
     href="#auto-margins">Auto top margin pushes button to bottom</a> */
 }
 &lt;/style></pre>
    <pre>
 &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'>
     …
   &lt;/section>
   …
 &lt;/section></pre>
    <figure>
    <div id=overview-example>
     <div class=col></div>
     <div class=col></div>
     <div class=desc> <img
      alt="You get: a white computer with matching keyboard and monitor."
      src="images/computer.jpg">
      <h1 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 alt="You get: beautiful ASCII art."
      src="images/printer.png">
      <h1 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><span class=secno>1.2. </span> Module interactions</h3>
   <p> This module extends the definition of the ‘<code
    class=property>display</code>’ property <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, 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 ‘<code
    class=css>::first-line</code>’ or ‘<code
    class=css>::first-letter</code>’ pseudo-elements.
   <h3 id=values><span class=secno>1.3. </span> Values</h3>
   <p> This specification follows the <a
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
    this specification are defined in CSS Level 2 Revision 1 <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
    modules may expand the definitions of these value types: for example <a
    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{CSS3VAL}}--></a>, when
    combined with this module, expands the definition of the
    <var>&lt;length&gt;</var> value type as used in this specification.
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">‘<code
    class=css>inherit</code>’</a> keyword as their property value. For
    readability it has not been repeated explicitly.
   <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
    Terminology</h2>
   <p> An element with ‘<code class=css>display:flex</code>’ or ‘<code
    class=css>display:inline-flex</code>’ is a <a
    href="#flex-container"><i>flex container</i></a>. Children of a flex
    container are called <a href="#flex-item"><i>flex items</i></a> and are
    laid out using the flex layout model.
   <p> 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 <a
    href="#flex-flow-property">flex flow</a> directions. To make it easier to
    talk about flex layout, this section defines a set of flex flow–relative
    terms. The ‘<a href="#flex-flow"><code
    class=property>flex-flow</code></a>’ value determines how these terms
    map to physical directions (top/right/bottom/left), axes
    (vertical/horizontal), and sizes (width/height). <figure> <img alt=alt
    height=277 src="images/flex-direction-terms.svg" width=665> <figcaption>
    An illustration of the various directions and sizing terms as applied to a
    ‘<a href="#flex-flow-row"><code class=css>row</code></a>’ flex
    container. </figcaption> </figure>
   <dl id=main>
    <dt class=axis title="main axis|main-axis">main axis
    <dt class=axis>main dimension
    <dd> The <dfn id=main-axis>main axis</dfn> of a flex container is the
     primary axis along which <a href="#flex-item"><i>flex items</i></a> are
     laid out. It extends in the <dfn id=main-dimension>main dimension</dfn>.
    <dt class=side>main-start
    <dt class=side>main-end
    <dd> The <a href="#flex-item"><i>flex items</i></a> are placed within the
     container starting on the <dfn id=main-start>main-start</dfn> side and
     going toward the <dfn id=main-end>main-end</dfn> side.
    <dt class=size>main size
    <dt class=size>main size property
    <dd> A <a href="#flex-item"><i>flex item</i></a>&apos;s width or height,
     whichever is in the <a href="#main-dimension"><i>main dimension</i></a>,
     is the item's <dfn id=main-size>main size</dfn>. The <a
     href="#flex-item"><i>flex item</i></a>&apos;s <dfn
     id=main-size-property>main size property</dfn> is either the ‘<code
     class=property>width</code>’ or ‘<code
     class=property>height</code>’ property, whichever is in the <a
     href="#main-dimension"><i>main dimension</i></a>.
   </dl>
   <dl id=cross>
    <dt class=axis title="cross axis|cross-axis">cross axis
    <dt class=axis>cross dimension
    <dd> The axis perpendicular to the <a href="#main-axis"><i>main
     axis</i></a> is called the <dfn id=cross-axis>cross axis</dfn>. It
     extends in the <dfn id=cross-dimension>cross dimension</dfn>.
    <dt class=side>cross-start
    <dt class=side>cross-end
    <dd> <i>Flex lines</i> are filled with items and placed into the container
     starting on the <dfn id=cross-start>cross-start</dfn> side of the flex
     container and going toward the <dfn id=cross-end>cross-end</dfn> side.
    <dt class=size>cross size
    <dt class=size>cross size property
    <dd> The width or height of a <a href="#flex-item"><i>flex item</i></a>,
     whichever is in the <a href="#cross-dimension"><i>cross
     dimension</i></a>, is the item's <dfn id=cross-size>cross size</dfn>. The
     <dfn id=cross-size-property>cross size property</dfn> is whichever of
     ‘<code class=property>width</code>’ or ‘<code
     class=property>height</code>’ that is in the <a
     href="#cross-dimension"><i>cross dimension</i></a>.
   </dl>
   <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the <a
    href="#display-flex">‘<code class=css>flex</code>’</a> and <a
    href="#display-inline-flex">‘<code class=css>inline-flex</code>’</a>
    ‘<code class=property>display</code>’ values</h2>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td>display
     <tr>
      <th><a href="#values">New value</a>:
      <td>flex | inline-flex
   </table>
   <dl>
    <dt><dfn id=display-flex>‘<code class=css>flex</code>’</dfn>
    <dd> This value causes an element to generate a block-level <a
     href="#flex-container"><i>flex container</i></a> box.
    <dt><dfn id=display-inline-flex>‘<code
     class=css>inline-flex</code>’</dfn>
    <dd> This value causes an element to generate a inline-level <a
     href="#flex-container"><i>flex container</i></a> box.
   </dl>
   <p> A <dfn id=flex-container>flex container</dfn> establishes a new <dfn
    id=flex-formatting-context>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: floats do not intrude into
    the flex container, and the flex container's margins do not collapse with
    the margins of its contents. <a href="#flex-container"><i>Flex
    containers</i></a> form a containing block for their contents <a
    href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly
    like block containers do</a>. <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The ‘<code
    class=property>overflow</code>’ property applies to <a
    href="#flex-container"><i>flex containers</i></a>.
   <p> 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:
   <ul>
    <li> all of the ‘<code class=css>column-*</code>’ properties in the
     Multicol module have no effect on a flex container.
    <li> ‘<code class=property>float</code>’ and ‘<code
     class=property>clear</code>’ have no effect on a <a
     href="#flex-item"><i>flex item</i></a>. (However, the ‘<code
     class=property>float</code>’ property still affects the computed value
     of ‘<code class=property>display</code>’ on children of a flex
     container, as this occurs <em title="">before</em> <a
     href="#flex-item"><i>flex items</i></a> are determined.)
    <li> ‘<code class=property>vertical-align</code>’ has no effect on a
     flex item.
    <li> the ‘<code class=css>::first-line</code>’ and ‘<code
     class=css>::first-letter</code>’ pseudo-elements do not apply to <a
     href="#flex-container"><i>flex containers</i></a>.
   </ul>
   <p> If an element's specified ‘<code class=property>display</code>’ is
    ‘<a href="#display-inline-flex"><code
    class=css>inline-flex</code></a>’ and the element is floated or
    absolutely positioned, the computed value of ‘<code
    class=property>display</code>’ is <a href="#display-flex">‘<code
    class=css>flex</code>’</a>. The table in <a
    href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
 .7</a> is thus amended to contain an additional row, with ‘<a
    href="#display-inline-flex"><code class=css>inline-flex</code></a>’ in
    the "Specified Value" column and <a href="#display-flex">‘<code
    class=css>flex</code>’</a> in the "Computed Value" column.
   <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
   <p> The contents of a <a href="#flex-container"><i>flex container</i></a>
    consists of zero or more <dfn id=flex-item title="flex item">flex
    items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex
    container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and
    each contiguous run of text that is directly contained inside a <a
    href="#flex-container"><i>flex container</i></a> is wrapped in an
    anonymous <a href="#flex-item"><i>flex item</i></a> element. However, an
    anonymous flex item that contains only <a
    href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white
    space</a> is not rendered, as if it were ‘<code
    class=css>display:none</code>’.
   <p class=note> Authors reading this spec may want to <a
    href="#item-margins">skip past these box-generation details</a>.
   <p> A <a href="#flex-item"><i>flex item</i></a> establishes a new
    formatting context for its contents. The type of this formatting context
    is determined by its ‘<code class=property>display</code>’ value, as
    usual. The computed ‘<code class=property>display</code>’ of a <a
    href="#flex-item"><i>flex item</i></a> is determined by applying the table
    in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1
    Chapter 9.7</a>. However, flex items are flex-level boxes, not block-level
    boxes: they participate in their container's flex formatting context, not
    in a block formatting context.
   <p class=note> The ‘<code class=property>display</code>’ computation on
    flex items as defined here is expected to be superseded by a future
    specification that defines a new ‘<code class=property>display</code>’
    value specific to flex items.
   <div class=example>
    <p>Examples of flex items:
    <pre>
 &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 split around blocks -->
         &lt;div id=not-an-item>item 4&lt;/div>
         item 4
     &lt;/span>
 &lt;/div></pre>
   </div>
   <p> Some values of ‘<code class=property>display</code>’ trigger the
    generation of anonymous boxes. For example, a misparented ‘<code
    class=css>table-cell</code>’ child is fixed up by <a
    href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating
    anonymous ‘<code class=css>table</code>’ and ‘<code
    class=css>table-row</code>’ elements</a> around it. <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> This fixup must occur
    <em>before</em> a flex container's children are promoted to <a
    href="#flex-item"><i>flex items</i></a>. For example, given two contiguous
    child elements with ‘<code class=css>display:table-cell</code>’, an
    anonymous table wrapper box around them becomes the <a
    href="#flex-item"><i>flex item</i></a>.
   <p class=note> Future display types may generate anonymous containers (e.g.
    ruby) or otherwise mangle the box tree (e.g. run-ins). It is intended that
    flex item determination run after these operations.
   <p id=table-items> On a flex item with ‘<code class=css>display:
    table</code>’, the table wrapper box becomes the <a
    href="#flex-item"><i>flex item</i></a>, and the ‘<a href="#order"><code
    class=property>order</code></a>’ and ‘<a href="#align-self"><code
    class=property>align-self</code></a>’ properties apply to it. The
    contents of any caption boxes contribute to the calculation of the table
    wrapper box's min-content and max-content sizes. However, like ‘<code
    class=property>width</code>’ and ‘<code
    class=property>height</code>’, the ‘<a href="#flex"><code
    class=property>flex</code></a>’ longhands apply to the table box as
    follows: the <a href="#flex-item"><i>flex item</i></a>&apos;s final size
    is calculated by performing layout as if the distance between the table
    wrapper box's edges and the table box's content edges were all part of the
    table box's border+padding area, and the table box were the <a
    href="#flex-item"><i>flex item</i></a>.
   <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned
    Flex Children</h3>
   <p> An absolutely-positioned child element of a <a
    href="#flex-container"><i>flex container</i></a> does not participate in
    flex layout beyond the <a href="#algo-flex-order">reordering step</a>.
    However, if both ‘<code class=property>left</code>’ and ‘<code
    class=property>right</code>’ or both ‘<code
    class=property>top</code>’ and ‘<code class=property>bottom</code>’
    are ‘<code class=css>auto</code>’, then the used value of those
    properties are computed from its <dfn id=flex-item-static-position>static
    position</dfn>, as follows:
   <p> If both ‘<code class=property>left</code>’ and ‘<code
    class=property>right</code>’ are ‘<code class=css>auto</code>’, the
    absolutely-positioned child must be positioned so that its <a
    href="#main-start"><i>main-start</i></a> or <a
    href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
    horizontal axis) is aligned with the <a
    href="#flex-item-static-position"><i>static position</i></a>. If both
    ‘<code class=property>top</code>’ and ‘<code
    class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the
    absolutely-positioned child must be positioned so that its <a
    href="#main-start"><i>main-start</i></a> or <a
    href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
    vertical axis) is aligned with the <a
    href="#flex-item-static-position"><i>static position</i></a>.
   <p> In the <a href="#main-axis"><i>main axis</i></a>,
   <ol>
    <li> If the <a href="#flex-container"><i>flex container</i></a> does not
     contain any <a href="#flex-item"><i>flex items</i></a>, the <a
     href="#flex-item-static-position"><i>static position</i></a> is
     determined by the value of ‘<a href="#justify-content"><code
     class=property>justify-content</code></a>’ on the <a
     href="#flex-container"><i>flex container</i></a> as if the <a
     href="#flex-item-static-position"><i>static position</i></a> were
     represented by a single zero-sized <a href="#flex-item"><i>flex
     item</i></a>.
    <li> If there is no preceding flex item or the preceding flex item and the
     subsequent flex item are on the same flex line, the <a
     href="#flex-item-static-position"><i>static position</i></a> is the outer
     <a href="#main-start"><i>main-start</i></a> edge of that <a
     href="#flex-item"><i>flex item</i></a>.
    <li> Otherwise, if there is a preceding <a href="#flex-item"><i>flex
     item</i></a>, the <a href="#flex-item-static-position"><i>static
     position</i></a> is the outer <a href="#main-end"><i>main-end</i></a>
     edge of that <a href="#flex-item"><i>flex item</i></a>.
   </ol>
   <p> In the <a href="#cross-axis"><i>cross axis</i></a>,
   <ol>
    <li> If there is a preceding <a href="#flex-item"><i>flex item</i></a>,
     the <a href="#flex-item-static-position"><i>static position</i></a> is
     the <a href="#cross-start"><i>cross-start</i></a> edge of the
     <i>flex-line</i> that item is in.
    <li> Otherwise, the <a href="#flex-item-static-position"><i>static
     position</i></a> is the <i>cross-start edge</i> of the first <i>flex
     line</i>.
   </ol>
   <p class=note> The static position is intended to more-or-less match the
    position of an anonymous 0×0 in-flow <a href="#align-self">‘<code
    class=css>flex-start</code>’-aligned</a> flex item that participates in
    flex layout, the primary difference being that any packing spaces due to
    ‘<code class=css>justify-content: space-around</code>’ or ‘<code
    class=css>justify-content: space-between</code>’ 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.
   <h3 id=item-margins><span class=secno>4.2. </span> Flex Item Margins</h3>
   <p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do
    not collapse. Auto margins absorb extra space in the corresponding
    dimension and can be used for alignment and to push adjacent flex items
    apart; see <a href="#auto-margins">Aligning with ‘<code
    class=css>auto</code>’ margins</a>.
   <h3 id=painting><span class=secno>4.3. </span> Flex Item Z-Ordering</h3>
   <p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as
    block-level elements in the normal flow, except that <a
    href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code
    class=property>z-index</code>’</a> values other than ‘<code
    class=css>auto</code>’ create a stacking context even if ‘<code
    class=property>position</code>’ is ‘<code class=css>static</code>’.
   <p class=note> Note: Descendants that are positioned outside a flex item
    still participate in any stacking context established by the flex item.
   <h3 id=visibility-collapse><span class=secno>4.4. </span> Collapsed Items</h3>
   <p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex
    item causes it to become a <dfn id=collapsed-flex-item
    title="collapsed flex item|collapsed">collapsed flex item</dfn>, producing
    an effect similar to ‘<code class=css>visibility:collapse</code>’ on a
    table-row or table-column: the collapsed element is removed from rendering
    entirely, but leaves behind a "strut" that keeps the flex line's
    cross-size stable. Thus, if a flex container has only one flex line,
    dynamically collapsing or uncollapsing items is guaranteed to have no
    effect on the flex container's <a href="#cross-size"><i>cross size</i></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.
   <p> Though collapsed flex items aren't rendered, they do appear in the <a
    href="http://www.w3.org/TR/CSS21/intro.html#formatting-structure">formatting
    structure</a>. Therefore, unlike on ‘<code
    class=css>display:none</code>’ items <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, effects that depend on an
    element appearing in the formatting structure (like incrementing counters
    or running animations and transitions) still operate on collapsed items.
   <div class=example>
    <p>In the following example, a sidebar is sized to fit its content.
     ‘<code class=css>Visibility: collapse</code>’ is used to dynamically
     hide parts of a navigation sidebar without affecting its width, even
     though the widest item (“Architecture”) is in a collapsed section.
     <figure> <figcaption>Sample 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> Interesting Stuff to Read </article></div>
     </figure>
    <pre>
 <!--		-->&lt;style>
 <!--		-->  @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) */
 <!--		-->    header + 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; /* <a
     href="#min-size-opt">Optimize main content area sizing</a> */
 <!--		-->    }
 <!--		-->  }
 <!--		-->  /* 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;
 <!--		-->  }
 <!--		-->&lt;/style>
 <!--		-->…
 <!--		-->&lt;/header>
 <!--		-->&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>
 <!--		-->        …
 <!--		-->      &lt;li id="nav-projects">&lt;a href="#nav-projects">Projects&lt;/a>
 <!--		-->        &lt;ul>
 <!--		-->          &lt;li>&lt;a href="…">Art&lt;/a>
 <!--		-->          &lt;li>&lt;a href="…">Architecture&lt;/a>
 <!--		-->          &lt;li>&lt;a href="…">Music&lt;/a>
 <!--		-->        &lt;/ul>
 <!--		-->      &lt;li id="nav-interact">&lt;a href="#nav-interact">Interact&lt;/a>
 <!--		-->        …
 <!--		-->    &lt;/ul>
 <!--		-->  &lt;/nav>
 <!--		-->&lt;/div>
 <!--		-->&lt;footer>
 <!--		-->…
 </pre>
   </div>
   <p> 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 ‘<code
    class=css>visibility:collapse</code>’ interacts with flex layout.
   <p class=note> Note that using ‘<code
    class=css>visibility:collapse</code>’ 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 ‘<code
    class=css>display:none</code>’ 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
    ‘<code class=property>visibility</code>’ is changed, however, ‘<code
    class=css>visibility: collapse</code>’ is still recommended for dynamic
    cases.)
   <h2 id=flow-order><span class=secno>5. </span> Ordering and Orientation</h2>
   <p> 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 ‘<code class=property>float</code>’ and ‘<code
    class=property>clear</code>’ properties. This functionality is exposed
    through the ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’, ‘<a href="#flex-wrap"><code
    class=property>flex-wrap</code></a>’, and ‘<a href="#order"><code
    class=property>order</code></a>’ properties.
   <p class=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.
   <p> Authors <em>must not</em> use these techniques as a substitute for
    correct source ordering, as that can ruin the accessibility of the
    document.
   <h3 id=flex-direction-property><span class=secno>5.1. </span> Flex Flow
    Direction: the ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-direction>flex-direction</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>row | row-reverse | column | column-reverse
     <tr>
      <th>Initial:
      <td>row
     <tr>
      <th>Applies to:
      <td>flex containers
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’ property specifies how <a
    href="#flex-item"><i>flex items</i></a> are placed in the flex container,
    by setting the direction of the flex container's <a
    href="#main-axis"><i>main axis</i></a>. This determines the direction that
    flex items are laid out in.
   <dl>
    <dt><dfn id=flex-flow-row>‘<code class=css>row</code>’</dfn>
    <dd> The flex container's <a href="#main-axis"><i>main axis</i></a> has
     the same orientation as the <a
     href="http://www.w3.org/TR/css3-writing-modes/#inline-axis">inline
     axis</a> of the current <i>writing mode</i>. The <a
     href="#main-start"><i>main-start</i></a> and <a
     href="#main-end"><i>main-end</i></a> directions are equivalent to the <a
     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> and <a
     href="http://www.w3.org/TR/css3-writing-modes/#end">end</a> directions,
     respectively, of the current <i>writing mode</i>.
    <dt><dfn id=flex-flow-row-reverse>‘<code
     class=css>row-reverse</code>’</dfn>
    <dd> Same as ‘<a href="#flex-flow-row"><code
     class=css>row</code></a>’, except the <a
     href="#main-start"><i>main-start</i></a> and <a
     href="#main-end"><i>main-end</i></a> directions are swapped.
    <dt><dfn id=flex-flow-column>‘<code class=css>column</code>’</dfn>
    <dd> The flex container's <a href="#main-axis"><i>main axis</i></a> has
     the same orientation as the <a
     href="http://www.w3.org/TR/css3-writing-modes/#block-axis">block axis</a>
     of the current <i>writing mode</i>. The <a
     href="#main-start"><i>main-start</i></a> and <a
     href="#main-end"><i>main-end</i></a> directions are equivalent to the <a
     href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> and <a
     href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>
     directions, respectively, of the current <i>writing mode</i>.
    <dt><dfn id=flex-flow-column-reverse>‘<code
     class=css>column-reverse</code>’</dfn>
    <dd> Same as ‘<a href="#flex-flow-column"><code
     class=css>column</code></a>’, except the <a
     href="#main-start"><i>main-start</i></a> and <a
     href="#main-end"><i>main-end</i></a> directions are swapped.
   </dl>
   <p class=note> The reverse values do not reverse box ordering; like
    ‘<code class=property>writing-mode</code>’ and ‘<code
    class=property>direction</code>’ <a href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>,
    they only change the direction of flow. Painting order, speech order, and
    sequential navigation orders are not affected.
   <h3 id=flex-wrap-property><span class=secno>5.2. </span> Flex Line
    Wrapping: the ‘<a href="#flex-wrap"><code
    class=property>flex-wrap</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-wrap>flex-wrap</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>nowrap | wrap | wrap-reverse
     <tr>
      <th>Initial:
      <td>nowrap
     <tr>
      <th>Applies to:
      <td>flex containers
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#flex-wrap"><code
    class=property>flex-wrap</code></a>’ property controls whether the flex
    container is <a href="#single-line"><i>single-line</i></a> or <a
    href="#multi-line"><i>multi-line</i></a>, and the direction of the
    <i>cross-axis</i>, which determines the direction new lines are stacked
    in.
   <dl>
    <dt><dfn id=flex-flow-nowrap>‘<code class=css>nowrap</code>’</dfn>
    <dd> The flex container is <a href="#single-line"><i>single-line</i></a>.
     The <a href="#cross-start"><i>cross-start</i></a> direction is equivalent
     to either the <a
     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> or
     <i>before</i><!-- <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> -->
     direction of the current <i>writing mode</i>, whichever is in the <a
     href="#cross-axis"><i>cross axis</i></a>, and the <a
     href="#cross-end"><i>cross-end</i></a> direction is the opposite
     direction of <a href="#cross-start"><i>cross-start</i></a>.
    <dt><dfn id=flex-flow-wrap>‘<code class=css>wrap</code>’</dfn>
    <dd> The flex container is <a href="#multi-line"><i>multi-line</i></a>.
     The <a href="#cross-start"><i>cross-start</i></a> direction is equivalent
     to either the <a
     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> or
     <i>before</i><!-- <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> -->
     direction of the current <i>writing mode</i>, whichever is in the <a
     href="#cross-axis"><i>cross axis</i></a>, and the <a
     href="#cross-end"><i>cross-end</i></a> direction is the opposite
     direction of <a href="#cross-start"><i>cross-start</i></a>.
    <dt><dfn id=flex-flow-wrap-reverse>‘<code
     class=css>wrap-reverse</code>’</dfn>
    <dd> Same as ‘<a href="#flex-flow-wrap"><code
     class=css>wrap</code></a>’, except the <a
     href="#cross-start"><i>cross-start</i></a> and <a
     href="#cross-end"><i>cross-end</i></a> directions are swapped.
   </dl>
   <h3 id=flex-flow-property><span class=secno>5.3. </span> Flex Direction and
    Wrap: the ‘<a href="#flex-flow"><code
    class=property>flex-flow</code></a>’ shorthand</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-flow>flex-flow</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>&lt;‘<a href="#flex-direction"><code
       class=property>flex-direction</code></a>’> || &lt;‘<a
       href="#flex-wrap"><code class=property>flex-wrap</code></a>’>
     <tr>
      <th>Initial:
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>flex containers
     <tr>
      <th>Inherited:
      <td>see individual properties
     <tr>
      <th>Computed value:
      <td>see individual properties
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p>The ‘<a href="#flex-flow"><code class=property>flex-flow</code></a>’
    property is a shorthand for setting the ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’ and ‘<a
    href="#flex-wrap"><code class=property>flex-wrap</code></a>’ properties,
    which together define the flex container's main and cross axes.
   <div class=example>
    <p>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;">
     <tbody>
      <tr>
       <td>
        <pre>
 div { flex-flow: row; }
 /* Initial value. Main-axis is
    inline, no wrap. */</pre>
       <td><img alt=alt height=46 src="images/flex-flow1.svg" width=205>
      <tr>
       <td>
        <pre>
 div { flex-flow: column wrap; }
 /* Main-axis is block-direction (top to bottom)
    and lines wrap in the inline direction (rightwards). */</pre>
       <td><img alt=alt height=160 src="images/flex-flow2.svg" width=89>
      <tr>
       <td>
        <pre>
 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 alt=alt height=89 src="images/flex-flow3.svg" width=160>
    </table>
   </div>
   <div class=note>
    <p> Note that the ‘<a href="#flex-flow"><code
     class=property>flex-flow</code></a>’ directions are <i>writing-mode</i>
     sensitive. In vertical Japanese, for example, a ‘<a
     href="#flex-flow-row"><code class=css>row</code></a>’ 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>flex-flow: row wrap;<br>writing-mode: horizontal-tb;</pre>
       <td>
        <pre>flex-flow: row wrap;<br>writing-mode: vertical-rl;</pre>
      <tr>
       <td><img alt=alt src="images/flex-flow-english.svg">
       <td><img alt=alt src="images/flex-flow-japanese.svg">
    </table>
   </div>
   <h3 id=order-property><span class=secno>5.4. </span> Display Order: the
    ‘<a href="#order"><code class=property>order</code></a>’ property</h3>
   <p> <a href="#flex-item"><i>Flex items</i></a> are, by default, displayed
    and laid out in the same order as they appear in the source document. The
    ‘<a href="#order"><code class=property>order</code></a>’ property can
    be used to change this ordering.
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=order>order</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>&lt;integer>
     <tr>
      <th>Initial:
      <td>0
     <tr>
      <th>Applies to:
      <td>flex items and absolutely-positioned flex container children
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>yes
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#order"><code class=property>order</code></a>’
    property controls the order in which flex items appear within their flex
    container, by assigning them to ordinal groups.
   <p> A flex container will lay out its content starting from the lowest
    numbered ordinal group and going up. Items with the same ordinal group are
    laid out in the order they appear in the source document. This also
    affects the <a href="http://www.w3.org/TR/CSS2/zindex.html">painting
    order</a> <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
    exactly as if the elements were reordered in the document.
   <div class=example>
    <p>The following figure shows a simple tabbed interface, where the tab for
     the active pane is always first:
    <div class=figure><img alt=alt src="images/flex-order-example.png"></div>
    <p>This could be implemented with the following CSS (showing only the
     relevant code):
    <pre>
 .tabs {
 	display: flex;
 }
 .tabs > * {
 	min-width: min-content;
 	/* Prevent tabs from getting too small for their content. */
 }
 .tabs > .current {
 	order: -1; /* Lower than the default of 0 */
 }</pre>
   </div>
   <p> Unless otherwise specified by a future specification, this property has
    no effect on elements that are not <a href="#flex-item"><i>flex
    items</i></a>. <!--
 	<p class='note'>
 		It is expected that future layout modes like Grid Layout
 		will also use 'order' for similar purposes.
 -->
   <h4 id=order-accessibility><span class=secno>5.4.1. </span> Reordering and
    Accessibility</h4>
   <p> The ‘<a href="#order"><code class=property>order</code></a>’
    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, ‘<a
    href="#order"><code class=property>order</code></a>’ does not affect the
    default traversal order of sequential navigation modes (such as cycling
    through links, see e.g. ‘<code class=property>nav-index</code>’ <a
    href="#CSS3UI" rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> or <a
    href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a>
    <a href="#HTML40" rel=biblioentry>[HTML40]<!--{{HTML40}}--></a>). Authors
    <em>must</em> use ‘<a href="#order"><code
    class=property>order</code></a>’ only for visual, not logical,
    reordering of content; style sheets that use ‘<a href="#order"><code
    class=property>order</code></a>’ to perform logical reordering are
    non-conforming.
   <p class=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 ‘<a href="#order"><code class=property>order</code></a>’ 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>
    <p> 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. ‘<a href="#order"><code
     class=property>order</code></a>’ makes this trivial. For example, take
     the following sketch of a page's code and desired layout:
    <div class=code-and-figure>
     <div>
      <pre>
 &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
      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."
      height=360 src="images/flex-order-page.svg" width=400></div>
    </div>
    <p> This layout can be easily achieved with flex layout:
    <pre>
 #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>
    <p> As an added bonus, the columns will all be <a
     href="#align-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>
 @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>
    <p><small>(Further use of multi-line flex containers to achieve even more
     intelligent wrapping left as an exercise for the reader.)</small>
   </div>
   <h2 id=flex-lines><span class=secno>6. </span> Flex Lines</h2>
   <p> A flex container can be either <a
    href="#single-line"><i>single-line</i></a> or <a
    href="#multi-line"><i>multi-line</i></a>, depending on the ‘<a
    href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property:
   <ul>
    <li> A <dfn id=single-line>single-line</dfn> flex container lays out all
     of its children in a single line, even if that would cause its contents
     to overflow.
    <li> A <dfn id=multi-line>multi-line</dfn> flex container breaks its <a
     href="#flex-item"><i>flex items</i></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 href="#cross-axis"><i>cross axis</i></a>
     according to the ‘<a href="#flex-wrap"><code
     class=property>flex-wrap</code></a>’ property. Every line contains at
     least one <a href="#flex-item"><i>flex item</i></a>, unless the flex
     container itself is completely empty.
   </ul>
   <div class=example>
    <p> This example shows four buttons that do not fit horizontally.
    <pre>&lt;style>
 #flex {
 	display: flex;
 	flex-flow: row wrap;
 	width: 300px;
 }
 .item {
 	width: 80px;
 }
 &lt;/style>
 &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>
    <p> 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 ‘<a href="#flex-flow"><code
     class=property>flex-flow</code></a>’ property specifies a <a
     href="#multi-line"><i>multi-line</i></a> flex container (due to the ‘<a
     href="#flex-flow-wrap"><code class=css>wrap</code></a>’ 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>
   <p> Once content is broken into lines, each line is laid out independently;
    flexible lengths and the ‘<a href="#justify-content"><code
    class=property>justify-content</code></a>’ and ‘<a
    href="#align-self"><code class=property>align-self</code></a>’
    properties only consider the items on a single line at a time.
   <p> When a flex container has multiple lines, the <a
    href="#cross-size"><i>cross size</i></a> of each line is the minimum size
    necessary to contain the <a href="#flex-item"><i>flex items</i></a> on the
    line (after aligment due to ‘<a href="#align-self"><code
    class=property>align-self</code></a>’), and the lines are aligned within
    the flex container with the ‘<a href="#align-content"><code
    class=property>align-content</code></a>’ property. When a flex container
    (even a <a href="#multi-line"><i>multi-line</i></a> one) has only one
    line, the <a href="#cross-size"><i>cross size</i></a> of the line is the
    <a href="#cross-size"><i>cross size</i></a> of the flex container, and
    ‘<a href="#align-content"><code
    class=property>align-content</code></a>’ has no effect. The <a
    href="#main-size"><i>main size</i></a> of a line is always the same as the
    <a href="#main-size"><i>main size</i></a> of the flex container's content
    box.
   <div class=example>
    <p> Here's the same example as the previous, except that the flex items
     have all been given ‘<code class=css>flex: auto</code>’. The first
     line has 60px of remaining space, and all of the items have the same
     flexibility, so each of the three items on that line will receives 20px
     of extra width, ending up 100px wide. The remaining item is on a line of
     its own and will stretch to the entire width of the line, or 300px.
     <figure> <img src="images/multiline-flex.svg"> <figcaption> A rendering
     of the same as above, but with the items all given ‘<code
     class=css>flex: auto</code>’. </figcaption> </figure>
   </div>
   <h2 id=flexibility><span class=secno>7. </span> Flexibility</h2>
   <p> The defining aspect of flex layout is the ability to make the <a
    href="#flex-item"><i>flex items</i></a> "flex", altering their width or
    height to fill the available space. This is done with the ‘<a
    href="#flex"><code class=property>flex</code></a>’ property. A flex
    container distributes free space to its items proportional to their <a
    href="#flex-grow-factor"><i>flex grow factor</i></a>, or shrinks them to
    prevent overflow proportional to their <a
    href="#flex-shrink-factor"><i>flex shrink factor</i></a>.
   <h3 id=flex-property><span class=secno>7.1. </span> The ‘<a
    href="#flex"><code class=property>flex</code></a>’ Shorthand</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex>flex</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
       &lt;&apos;flex-basis&apos;> ]
     <tr>
      <th>Initial:
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>flex items
     <tr>
      <th>Inherited:
      <td>see individual properties
     <tr>
      <th>Computed value:
      <td>see individual properties
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>see individual properties
     <tr>
      <th>Canonical Order:
      <td>per grammar
   </table>
   <p> The ‘<a href="#flex"><code class=property>flex</code></a>’ property
    specifies the components of a <dfn id=flexible-length
    title="flexible length|flexible length's">flexible length</dfn>: the <a
    href="#flex-grow-factor"><i>flex grow factor</i></a> and <a
    href="#flex-shrink-factor"><i>flex shrink factor</i></a>, and the <a
    href="#flex-basis"><i>flex basis</i></a>. When an element is a <a
    href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code
    class=property>flex</code></a>’ is consulted <em>instead of</em> the <a
    href="#main-size-property"><i>main size property</i></a> to determine the
    <a href="#main-size"><i>main size</i></a> of the element. If an element is
    not a <a href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code
    class=property>flex</code></a>’ has no effect.
   <dl>
    <dt><var>&lt;‘<a href="#flex-grow"><code
     class=property>flex-grow</code></a>’></var>
    <dd>
     <p> This <var>&lt;number></var> component sets ‘<a
      href="#flex-grow"><code class=property>flex-grow</code></a>’ <a
      href="#flex-components">longhand</a> and specifies the <dfn
      id=flex-grow-factor>flex grow factor</dfn>, which determines how much
      the <a href="#flex-item"><i>flex item</i></a> will grow relative to the
      rest of the <a href="#flex-item"><i>flex items</i></a> in the flex
      container when positive free space is distributed. When omitted, it is
      set to ‘<code class=css>1</code>’.
    <dt><var>&lt;‘<a href="#flex-shrink"><code
     class=property>flex-shrink</code></a>’></var>
    <dd>
     <p> This <var>&lt;number></var> component sets ‘<a
      href="#flex-shrink"><code class=property>flex-shrink</code></a>’ <a
      href="#flex-components">longhand</a> and specifies the <dfn
      id=flex-shrink-factor>flex shrink factor</dfn>, which determines how
      much the <a href="#flex-item"><i>flex item</i></a> will shrink relative
      to the rest of the <a href="#flex-item"><i>flex items</i></a> in the
      flex container when negative free space is distributed. When omitted, it
      is set to ‘<code class=css>1</code>’. The <a
      href="#flex-shrink-factor"><i>flex shrink factor</i></a> is multiplied
      by the <a href="#flex-basis"><i>flex basis</i></a> when distributing
      negative space.
    <dt><var>&lt;‘<a href="#flex-basis-propdef"><code
     class=property>flex-basis</code></a>’></var>
    <dd>
     <p> This component, which takes the same values as the ‘<code
      class=property>width</code>’ property, sets the ‘<a
      href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
      <a href="#flex-components">longhand</a> and specifies the <dfn
      id=flex-basis>flex basis</dfn>: the initial <a href="#main-size"><i>main
      size</i></a> of the <a href="#flex-item"><i>flex item</i></a>, before
      free space is distributed according to the flex factors. When omitted
      from the ‘<a href="#flex"><code class=property>flex</code></a>’
      shorthand, its specified value is the length zero.
     <p> If the specified ‘<a href="#flex-basis-propdef"><code
      class=property>flex-basis</code></a>’ is <a
      href="#flex-basis-auto">‘<code class=css>auto</code>’</a>, the used
      <a href="#flex-basis"><i>flex basis</i></a> is the value of the
      element's <a href="#main-size-property"><i>main size property</i></a>.
      (This can itself be the keyword ‘<code class=css>auto</code>’, which
      sizes the element based on its contents.) <figure> <img height=240
      src="images/rel-vs-abs-flex.svg" width=504> <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 ‘<code
      class=css>1</code>’, ‘<code class=css>1</code>’, and ‘<code
      class=css>2</code>’, respectively. </figcaption> </figure>
    <dt><dfn id=flex-none>‘<code class=css>none</code>’</dfn>
    <dd>
     <p>The keyword ‘<a href="#flex-none"><code
      class=property>none</code></a>’ computes to ‘<code class=css>0 0
      auto</code>’.
   </dl>
   <p> The initial values of the ‘<a href="#flex"><code
    class=property>flex</code></a>’ components are equivalent to <a
    href="#flex-initial">‘<code class=css>flex: 0 1 auto</code>’</a>.
   <p class=note> Note that the initial values of ‘<a
    href="#flex-grow"><code class=property>flex-grow</code></a>’ and ‘<a
    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
    are different from their defaults when omitted in the ‘<a
    href="#flex"><code class=property>flex</code></a>’ shorthand. This so
    that the ‘<a href="#flex"><code class=property>flex</code></a>’
    shorthand can better accommodate the most <a href="#flex-common">common
    cases</a>.
   <p> 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 <var>&lt;flex-basis></var>
    component with a unit or precede it by two flex factors.
   <h3 id=flex-common><span class=secno>7.2. </span> Common Values of ‘<a
    href="#flex"><code class=property>flex</code></a>’</h3>
   <p><em>This section is informative.</em>
   <p> The list below summarizes the effects of the most common ‘<a
    href="#flex"><code class=property>flex</code></a>’ values:
   <dl>
    <dt id=flex-initial>‘<code class=css>flex: 0 auto</code>’
    <dt>‘<code class=css>flex: initial</code>’
    <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. (This is
     the initial value.) Sizes the item based on the ‘<code
     class=property>width</code>’/‘<code class=property>height</code>’
     properties. (If the item's <a href="#main-size-property"><i>main size
     property</i></a> computes to ‘<code class=css>auto</code>’, 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
     min-size when there is insufficient space. The <a
     href="#alignment">alignment abilities</a> or <a
     href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be
     used to align flex items along the <a href="#main-axis"><i>main
     axis</i></a>.
    <dt>‘<code class=css>flex: auto</code>’
    <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. Sizes the
     item based on the ‘<code class=property>width</code>’/‘<code
     class=property>height</code>’ properties, but makes them fully
     flexible, so that they absorb any free space along the <a
     href="#main-axis"><i>main axis</i></a>. If all items are either ‘<code
     class=css>flex: auto</code>’, ‘<code class=css>flex:
     initial</code>’, or ‘<code class=css>flex: none</code>’, any
     positive free space after the items have been sized will be distributed
     evenly to the items with ‘<code class=css>flex: auto</code>’.
    <dt>‘<code class=css>flex: none</code>’
    <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value
     sizes the item according to the ‘<code
     class=property>width</code>’/‘<code class=property>height</code>’
     properties, but makes the flex item fully inflexible. This is similar to
     <a href="#flex-initial">‘<code class=css>initial</code>’</a>, except
     that flex items are not allowed to shrink, even in overflow situations.
    <dt>‘<code class=css>flex: &lt;positive-number></code>’
    <dd> Equivalent to ‘<code class=css>flex: &lt;positive-number> 1
 px</code>’. Makes the flex item flexible and sets the <a
     href="#flex-basis"><i>flex basis</i></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>
   <div class=note> Note that, because flex items typically can shrink, it is
    often recommended that a minimum main size be set (with ‘<code
    class=property>min-width</code>’ or ‘<code
    class=property>min-height</code>’) to prevent them from shrinking too
    small to fit their contents. This problem is especially common with
    horizontal navigation or toolbars.
    <pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
   </div>
   <h3 id=flex-components><span class=secno>7.3. </span> Components of
    Flexibility</h3>
   <p> Individual components of flexibility can be controlled by independent
    longhand properties.
   <p class=note> Authors are encouraged to control flexibility using the
    ‘<a href="#flex"><code class=property>flex</code></a>’ shorthand
    rather than with component properties, as the shorthand correctly resets
    any unspecified components to accommodate <a href="#flex-common">common
    uses</a>.
   <h4 id=flex-grow-property><span class=secno>7.3.1. </span> The ‘<a
    href="#flex-grow"><code class=property>flex-grow</code></a>’ property</h4>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-grow>flex-grow</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>&lt;number>
     <tr>
      <th>Initial:
      <td>0
     <tr>
      <th>Applies to:
      <td>flex items
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>yes, except between ‘<code class=css>0</code>’ and other values
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#flex-grow"><code
    class=property>flex-grow</code></a>’ property sets the <a
    href="#flex-grow-factor"><i>flex grow factor</i></a>. Negative numbers are
    invalid.
   <h4 id=flex-shrink-property><span class=secno>7.3.2. </span> The ‘<a
    href="#flex-shrink"><code class=property>flex-shrink</code></a>’
    property</h4>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-shrink>flex-shrink</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>&lt;number>
     <tr>
      <th>Initial:
      <td>1
     <tr>
      <th>Applies to:
      <td>flex items
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>yes, except between ‘<code class=css>0</code>’ and other values
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#flex-shrink"><code
    class=property>flex-shrink</code></a>’ property sets the <a
    href="#flex-shrink-factor"><i>flex shrink factor</i></a>. Negative numbers
    are invalid.
   <h4 id=flex-basis-property><span class=secno>7.3.3. </span> The ‘<a
    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
    property</h4>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=flex-basis-propdef>flex-basis</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><var>&lt;&apos;width&apos;></var>
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td>flex items
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>as specified, with lengths made absolute
     <tr>
      <th>Percentages:
      <td>relative to the flex container's inner <a href="#main-size"><i>main
       size</i></a>
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>yes, insofar as ‘<code class=property>width</code>’ is
       animatable
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#flex-basis-propdef"><code
    class=property>flex-basis</code></a>’ property sets the <a
    href="#flex-basis"><i>flex basis</i></a>. Negative lengths are invalid.
   <p> Except for <dfn id=flex-basis-auto title="flex-basis: auto">‘<code
    class=css>auto</code>’</dfn>, which retrieves the value of the <a
    href="#main-size-property"><i>main size property</i></a>, ‘<a
    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
    is resolved the same way as <a
    href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">‘<code
    class=property>width</code>’</a> in horizontal writing modes <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>: percentage
    values of ‘<a href="#flex-basis-propdef"><code
    class=property>flex-basis</code></a>’ are resolved against the flex
    item's containing block, i.e. its flex container, and if that containing
    block's size is indefinite, the result is undefined. Similarly, ‘<a
    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
    determines the size of the content box, unless otherwise specified such as
    by ‘<code class=property>box-sizing</code>’ <a href="#CSS3UI"
    rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>.
   <h2 id=alignment><span class=secno>8. </span> Alignment</h2>
   <p> 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.
   <p> The ‘<code class=property>margin</code>’ properties can be used to
    align items in a manner similar to, but more powerful than, what margins
    can do in block layout. <a href="#flex-item"><i>Flex items</i></a> also
    respect the alignment properties from the Box Alignment spec, which allow
    easy keyword-based alignment of items in both the <a
    href="#main-axis"><i>main axis</i></a> and <a href="#cross-axis"><i>cross
    axis</i></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.
   <p class=note> While the alignment properties are defined in the Box
    Alignment spec, 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 Box Alignment is finished and defines their effect for other
    layout modes.
   <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code
    class=css>auto</code>’ margins</h3>
   <p> <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>
   <p> Auto margins on flex items have an effect very similar to auto margins
    in block flow:
   <ul>
    <li> During calculations of flex bases and flexible lengths, auto margins
     are treated as ‘<code class=css>0</code>’.
    <li> Prior to alignment via ‘<a href="#justify-content"><code
     class=property>justify-content</code></a>’ and ‘<a
     href="#align-self"><code class=property>align-self</code></a>’, any
     positive free space is distributed to auto margins in that dimension.
    <li> Overflowing elements ignore their auto margins and overflow in the
     <i>end</i>/<i>after</i> direction.
   </ul>
   <p class=note> Note that, if free space is distributed to auto margins, the
    alignment properties will have no effect in that dimension because the
    margins will have stolen all the free space left over after flexing.
   <div class=example>
    <p> One use of ‘<code class=css>auto</code>’ 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>
 &lt;style>
 nav > ul {
 	display: flex;
 }
 nav > ul > li {
 	min-width: min-content;
 	/* Prevent items from getting too small for their content. */
 }
 nav > ul > #login {
 	margin-left: auto;
 }
 &lt;/style>
 &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>
    <p> The figure below illustrates the difference in cross-axis alignment in
     overflow situations between using <a href="#auto-margins">‘<code
     class=css>auto</code>’ margins</a> and using the <a
     href="#align-items-property">alignment properties</a>. <figure>
     <div style="display:table; margin: 0 auto 1em;">
      <div class=cross-auto-figure
       style="display:table-cell; padding-right: 50px;">
       <div>
        <div>About</div>
        <div>Authoritarianism</div>
        <div>Blog</div>
       </div>
      </div>
      <div class=cross-auto-figure
       style="display:table-cell; padding-left: 50px;">
       <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 ‘<a
     href="#align-self"><code class=property>align-self</code></a>’. 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><span class=secno>8.2. </span> Axis
    Alignment: the ‘<a href="#justify-content"><code
    class=property>justify-content</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=justify-content>justify-content</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>flex-start | flex-end | center | space-between | space-around
     <tr>
      <th>Initial:
      <td>flex-start
     <tr>
      <th>Applies to:
      <td>flex containers
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#justify-content"><code
    class=property>justify-content</code></a>’ property aligns <a
    href="#flex-item"><i>flex items</i></a> along the <a
    href="#main-axis"><i>main axis</i></a> of the current line of the flex
    container. This is done <em title="">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
    href="#flex-item"><i>flex items</i></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>
    <dt><dfn id=justify-flex-start>‘<code
     class=css>flex-start</code>’</dfn>
    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the
     start of the line. The <a href="#main-start"><i>main-start</i></a> margin
     edge of the first <a href="#flex-item"><i>flex item</i></a> on the line
     is placed flush with the <a href="#main-start"><i>main-start</i></a> edge
     of the line, and each subsequent <a href="#flex-item"><i>flex
     item</i></a> is placed flush with the preceding item.
    <dt><dfn id=justify-flex-end>‘<code class=css>flex-end</code>’</dfn>
    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the end
     of the line. The <a href="#main-end"><i>main-end</i></a> margin edge of
     the last <a href="#flex-item"><i>flex item</i></a> is placed flush with
     the <a href="#main-end"><i>main-end</i></a> edge of the line, and each
     preceding <a href="#flex-item"><i>flex item</i></a> is placed flush with
     the subsequent item.
    <dt><dfn id=justify-center>‘<code class=css>center</code>’</dfn>
    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the
     center of the line. The <a href="#flex-item"><i>flex items</i></a> on the
     line are placed flush with each other and aligned in the center of the
     line, with equal amounts of empty space between the <a
     href="#main-start"><i>main-start</i></a> edge of the line and the first
     item on the line and between the <a href="#main-end"><i>main-end</i></a>
     edge of the line and the last item on the line. (If the leftover
     free-space is negative, the <a href="#flex-item"><i>flex items</i></a>
     will overflow equally in both directions.)
    <dt><dfn id=justify-space-between>‘<code
     class=css>space-between</code>’</dfn>
    <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in
     the line. If the leftover free-space is negative or there is only a
     single <a href="#flex-item"><i>flex item</i></a> on the line, this value
     is identical to <a href="#justify-flex-start">‘<code
     class=css>flex-start</code>’</a>. Otherwise, the <a
     href="#main-start"><i>main-start</i></a> margin edge of the first <a
     href="#flex-item"><i>flex item</i></a> on the line is placed flush with
     the <a href="#main-start"><i>main-start</i></a> edge of the line, the <a
     href="#main-end"><i>main-end</i></a> margin edge of the last <a
     href="#flex-item"><i>flex item</i></a> on the line is placed flush with
     the <a href="#main-end"><i>main-end</i></a> edge of the line, and the
     remaining <a href="#flex-item"><i>flex items</i></a> on the line are
     distributed so that the empty space between any two adjacent items is the
     same.
    <dt><dfn id=justify-space-around>‘<code
     class=css>space-around</code>’</dfn>
    <dd> <a href="#flex-item"><i>Flex items</i></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 href="#flex-item"><i>flex
     item</i></a> on the line, this value is identical to <a
     href="#justify-center">‘<code class=css>center</code>’</a>.
     Otherwise, the <a href="#flex-item"><i>flex items</i></a> on the line are
     distributed such that the empty space between any two adjacent <a
     href="#flex-item"><i>flex items</i></a> on the line is the same, and the
     empty space before the first and after the last <a
     href="#flex-item"><i>flex items</i></a> on the line are half the size of
     the other empty spaces.
   </dl>
   <div class=figure> <img alt=alt height=270 src="images/flex-pack.svg"
    width=504>
    <p class=caption>An illustration of the five ‘<a
     href="#justify-content"><code
     class=property>justify-content</code></a>’ keywords and their effects
     on a flex container with three colored items.
   </div>
   <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
    Alignment: the ‘<a href="#align-items"><code
    class=property>align-items</code></a>’ and ‘<a
    href="#align-self"><code class=property>align-self</code></a>’
    properties</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=align-items>align-items</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>flex-start | flex-end | center | baseline | stretch
     <tr>
      <th>Initial:
      <td>stretch
     <tr>
      <th>Applies to:
      <td>flex containers
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=align-self>align-self</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>auto | flex-start | flex-end | center | baseline | stretch
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td><a href="#flex-item"><i>flex items</i></a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>‘<code class=css>auto</code>’ computes to parent's ‘<a
       href="#align-items"><code class=property>align-items</code></a>’;
       otherwise as specified
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> <a href="#flex-item"><i>Flex items</i></a> can be aligned in the <a
    href="#cross-axis"><i>cross axis</i></a> of the current line of the flex
    container, similar to ‘<a href="#justify-content"><code
    class=property>justify-content</code></a>’ but in the perpendicular
    direction. ‘<a href="#align-items"><code
    class=property>align-items</code></a>’ sets the default alignment for
    all of the flex container's <a href="#flex-item"><i
    title="flex items">items</i></a>, including anonymous <a
    href="#flex-item"><i>flex items</i></a>. ‘<a href="#align-self"><code
    class=property>align-self</code></a>’ allows this default alignment to
    be overridden for individual <a href="#flex-item"><i>flex items</i></a>.
    (For anonymous flex items, ‘<a href="#align-self"><code
    class=property>align-self</code></a>’ always matches the value of ‘<a
    href="#align-items"><code class=property>align-items</code></a>’ on
    their associated flex container.)
   <p> If either of the <a href="#flex-item"><i>flex item's</i></a> cross-axis
    margins are ‘<code class=css>auto</code>’, ‘<a
    href="#align-self"><code class=property>align-self</code></a>’ has no
    effect.
   <p> A value of <dfn id=align-self-auto title="align-self: auto">‘<code
    class=css>auto</code>’</dfn> for ‘<a href="#align-self"><code
    class=property>align-self</code></a>’ computes to the value of ‘<a
    href="#align-items"><code class=property>align-items</code></a>’ on the
    element's parent, or <a href="#align-items-stretch">‘<code
    class=css>stretch</code>’</a> if the element has no parent. The
    alignments are defined as:
   <dl>
    <dt><dfn id=align-flex-start>‘<code class=css>flex-start</code>’</dfn>
    <dd> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
     <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> edge of the line.
    <dt><dfn id=align-flex-end>‘<code class=css>flex-end</code>’</dfn>
    <dd> The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
     href="#flex-item"><i>flex item</i></a> is placed flush with the <a
     href="#cross-end"><i>cross-end</i></a> edge of the line.
    <dt><dfn id=align-center>‘<code class=css>center</code>’</dfn>
    <dd> The <a href="#flex-item"><i>flex item</i></a>&apos;s margin box is
     centered in the <a href="#cross-axis"><i>cross axis</i></a> within the
     line. (If the <a href="#cross-size"><i>cross size</i></a> of the flex
     line is less than that of the <a href="#flex-item"><i>flex item</i></a>,
     it will overflow equally in both directions.)
    <dt><dfn id=align-baseline>‘<code class=css>baseline</code>’</dfn>
    <dd>
     <p> If the <a href="#flex-item"><i>flex item</i></a>&apos;s inline axis
      is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this
      value is identical to <a href="#align-flex-start">‘<code
      class=css>flex-start</code>’</a>.
     <p> Otherwise, it <dfn id=baseline-participation>participates in baseline
      alignment</dfn>: all participating <a href="#flex-item"><i>flex
      items</i></a> on the line are aligned such that their baselines align,
      and the item with the largest distance between its baseline and its <a
      href="#cross-start"><i>cross-start</i></a> margin edge is placed flush
      against the <a href="#cross-start"><i>cross-start</i></a> edge of the
      line.
    <dt><dfn id=align-stretch>‘<code class=css>stretch</code>’</dfn>
    <dd>
     <p> If the <a href="#cross-size-property"><i>cross size property</i></a>
      of the <a href="#flex-item"><i>flex item</i></a> computes to ‘<code
      class=css>auto</code>’, its used value is the length necessary to make
      the <a href="#cross-size"><i>cross size</i></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 ‘<code
      class=css>min/max-width/height</code>’.
     <p class=note> Note that if the flex container's height is constrained
      this value may cause the contents of the <a href="#flex-item"><i>flex
      item</i></a> to overflow the item.
     <p> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
      <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a
      href="#cross-start"><i>cross-start</i></a> edge of the line.
   </dl>
   <div class=figure> <img alt=alt height=377 src="images/flex-align.svg"
    width=508>
    <p class=caption>An illustration of the five ‘<a
     href="#align-items"><code class=property>align-items</code></a>’
     keywords and their effects on a flex container with four colored items.
   </div>
   <h3 id=align-content-property><span class=secno>8.4. </span> Packing Flex
    Lines: the ‘<a href="#align-content"><code
    class=property>align-content</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=align-content>align-content</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>flex-start | flex-end | center | space-between | space-around |
       stretch
     <tr>
      <th>Initial:
      <td>stretch
     <tr>
      <th>Applies to:
      <td><a href="#multi-line"><i>multi-line</i></a> flex containers
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Computed value:
      <td>specified value
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animatable:
      <td>no
     <tr>
      <th>Canonical Order:
      <td><abbr title="follows order of property value definition">per
       grammar</abbr>
   </table>
   <p> The ‘<a href="#align-content"><code
    class=property>align-content</code></a>’ property aligns a flex
    container's lines within the flex container when there is extra space in
    the <i>cross-axis</i>, similar to how ‘<a href="#justify-content"><code
    class=property>justify-content</code></a>’ aligns individual items
    within the <i>main-axis</i>. Note, this property has no effect when the
    flex container has only a single line. Values have the following meanings:
   <dl>
    <dt><dfn id=align-content-flex-start>‘<code
     class=css>flex-start</code>’</dfn>
    <dd> Lines are packed toward the start of the flex container. The <a
     href="#cross-start"><i>cross-start</i></a> edge of the first line in the
     flex container is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> edge of the flex container,
     and each subsequent line is placed flush with the preceding line.
    <dt><dfn id=align-content-flex-end>‘<code
     class=css>flex-end</code>’</dfn>
    <dd> Lines are packed toward the end of the flex container. The <a
     href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
     flush with the <a href="#cross-end"><i>cross-end</i></a> edge of the flex
     container, and each preceding line is placed flush with the subsequent
     line.
    <dt><dfn id=align-content-center>‘<code class=css>center</code>’</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 empty space between
     the <a href="#cross-start"><i>cross-start</i></a> content edge of the
     flex container and the first line in the flex container, and between the
     <a href="#cross-end"><i>cross-end</i></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 id=align-content-space-between>‘<code
     class=css>space-between</code>’</dfn>
    <dd> Lines are evenly distributed in the flex container. If the leftover
     free-space is negative this value is identical to <a
     href="#align-content-flex-start">‘<code
     class=css>flex-start</code>’</a>. Otherwise, the <a
     href="#cross-start"><i>cross-start</i></a> edge of the first line in the
     flex container is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> content edge of the flex
     container, the <a href="#cross-end"><i>cross-end</i></a> edge of the last
     line in the flex container is placed flush with the <a
     href="#cross-end"><i>cross-end</i></a> content edge of the flex
     container, and the remaining lines in the flex container are distributed
     so that the empty space between any two adjacent lines is the same.
    <dt><dfn id=align-content-space-around>‘<code
     class=css>space-around</code>’</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 href="#align-content-center">‘<code
     class=css>center</code>’</a>. Otherwise, the lines in the flex
     container are distributed such that the empty space between any two
     adjacent lines is the same, and the empty space before the first and
     after the last lines in the flex container are half the size of the other
     empty spaces.
    <dt><dfn id=align-content-stretch>‘<code
     class=css>stretch</code>’</dfn>
    <dd> Lines stretch to take up the remaining space. If the leftover
     free-space is negative, this value is identical to <a
     href="#align-content-flex-start">‘<code
     class=css>flex-start</code>’</a>. Otherwise, the free-space is split
     equally between all of the lines, increasing their cross size.
   </dl>
   <p class=note> Note: Only flex containers with multiple lines ever have
    free space in the <i>cross-axis</i> for lines to be aligned in, because in
    a flex container with a single line the sole line automatically stretches
    to fill the space.
   <div class=figure> <img alt=alt height=508
    src="images/align-content-example.svg" width=612>
    <p class=caption> An illustration of the ‘<a href="#align-content"><code
     class=property>align-content</code></a>’ keywords and their effects on
     a <a href="#multi-line"><i>multi-line</i></a> flex container.
   </div>
   <h3 id=flex-baselines><span class=secno>8.5. </span> Flex Baselines</h3>
   <p> The baselines of a flex container are determined as follows (after
    reordering with ‘<a href="#order"><code
    class=property>order</code></a>’):
   <dl>
    <dt><dfn id=main-axis-baseline>main-axis baseline</dfn>
    <dd>
     <ol>
      <li> If any of the <a href="#flex-item"><i>flex items</i></a> on the
       flex container's first line <a
       href="#baseline-participation">participate in baseline alignment</a>,
       the flex container's <a href="#main-axis-baseline"><i>main-axis
       baseline</i></a> is the baseline of those <a href="#flex-item"><i>flex
       items</i></a>.
      <li> Otherwise, if the flex container has at least one <a
       href="#flex-item"><i>flex item</i></a>, and its first <a
       href="#flex-item"><i>flex item</i></a> has a baseline parallel to the
       flex container's <a href="#main-axis"><i>main axis</i></a>, the flex
       container's <a href="#main-axis-baseline"><i>main-axis baseline</i></a>
       is that baseline.
      <li> Otherwise, the flex container's <a
       href="#main-axis-baseline"><i>main-axis baseline</i></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.
 					-->
     </ol>
    <dt><dfn id=cross-axis-baseline>cross-axis baseline</dfn>
    <dd>
     <ol>
      <li> If the flex container has at least one <a href="#flex-item"><i>flex
       item</i></a>, and its first <a href="#flex-item"><i>flex item</i></a>
       has a baseline parallel to the flex container's <a
       href="#cross-axis"><i>cross axis</i></a>, the flex container's <a
       href="#cross-axis-baseline"><i>cross-axis baseline</i></a> is that
       baseline.
      <li> Otherwise, the flex container's <a
       href="#cross-axis-baseline"><i>cross-axis baseline</i></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.
     </ol>
   </dl>
   <p> When calculating the baseline according to the above rules, if the box
    contributing a baseline has an ‘<code class=property>overflow</code>’
    value that allows scrolling, the box must be treated as being in its
    initial scroll position for the purpose of determining its baseline.
   <p> When <a
    href="http://www.w3.org/TR/CSS21/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. <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   <div class=note>
    <p> CSS 2.1 did not define the baseline of block or table boxes. It is
     expected that they will be defined consistent with those of <a
     href="http://www.w3.org/TR/CSS2/tables.html#height-layout">table
     cells</a>, as follows:
    <dl>
     <dt>‘<code class=css>block</code>’
     <dt>‘<code class=css>list-item</code>’
     <dd>
      <p> The inline-axis baseline of a block is the baseline of the first
       in-flow line box in the block, or the first in-flow block-level child
       in the block that has a baseline, whichever comes first. If there is no
       such line box or child, then the block has no baseline. For the
       purposes of finding a baseline, in-flow boxes with a scrolling
       mechanisms (see the ‘<code class=property>overflow</code>’
       property) must be considered as if scrolled to their origin position.
      <p> A block has no block-axis baseline.
     <dt>‘<code class=css>table</code>’
     <dd>
      <p> The inline-axis baseline of a table box is the baseline of its first
       row. However, when calculating the baseline of an inline-block, table
       boxes must be skipped.
      <p> The block-axis baseline of a table is undefined.
    </dl>
   </div>
   <h2 id=layout-algorithm><span class=secno>9. </span> Flex Layout Algorithm</h2>
   <p> 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.
   <p class=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.
   <p> For the purposes of these definitions, a <dfn id=definite-size
    title="definite|definite size">definite size</dfn> is one that can be
    determined without measuring content, i.e. is a <var>&lt;length></var>, a
    size of the initial containing block, or a <var>&lt;percentage></var> that
    is resolved against a definite size. If a <a
    href="#single-line"><i>single-line</i></a> <a
    href="#flex-container"><i>flex container</i></a> has a definite cross
    size, any <a href="#flex-item"><i>flex items</i></a> with ‘<code
    class=css>align-self: stretch</code>’ must also be treated as having a
    definite cross size. An <dfn id=indefinite-size
    title="indefinite|indefinite size">indefinite size</dfn> is one that is
    not <a href="#definite-size"><i>definite</i></a>.
   <p> The following sections define the algorithm for laying out a flex
    container and its contents.
   <h3 id=box-manip><span class=secno>9.1. </span> 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 absolutely
     positioned flex container children according to their ‘<a
     href="#order"><code class=property>order</code></a>’.</strong> The
     elements with the lowest (most negative) ‘<a href="#order"><code
     class=property>order</code></a>’ values are first in the ordering. If
     multiple elements share an ‘<a href="#order"><code
     class=property>order</code></a>’ value, they're ordered by document
     order. This affects the order in which the elements generate boxes in the
     box-tree, and how the rest of this algorithm deals with the generated
     flex items.
   </ol>
   <h3 id=line-sizing><span class=secno>9.2. </span> 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 flex container is a <a href="#definite-size"><i>definite
     size</i></a>, use that; otherwise, subtract the flex container's margin,
     border, and padding from the space available to the flex container in
     that dimension and use that value. <span class=note>This might result in
     an infinite value.</span>
    <li id=algo-main-item> <strong>Determine the <dfn id=flex-base-size>flex
     base size</dfn> and <dfn id=hypothetical-main-size>hypothetical main
     size</dfn> of each item:</strong>
     <ul>
      <li> If the item has a <a href="#definite-size"><i>definite</i></a> flex
       basis, that's the <a href="#flex-base-size"><i>flex base size</i></a>.
      <li> If the flex basis is ‘<code class=css>auto</code>’ 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/CSS21/tables.html#auto-table-layout">automatic
       table layout</a> <a href="#CSS21"
       rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), size the item under that
       constraint. The <a href="#flex-base-size"><i>flex base size</i></a> is
       the item's resulting main size.
      <li> If flex item has an intrinsic aspect ratio, the flex item has
       ‘<code class=css>align-self: stretch</code>’, the flex basis and
       cross size are both ‘<code class=css>auto</code>’ , and the flex
       container is <a href="#single-line"><i>single-line</i></a> and has a <a
       href="#definite-size"><i>definite</i></a> cross size, the <a
       href="#flex-base-size"><i>flex base size</i></a> is computed from the
       flex container's inner cross size (clamped to the <a
       href="#flex-item"><i>flex item</i></a>’s min and max <a
       href="#cross-size"><i>cross size</i></a>) and the <a
       href="#flex-item"><i>flex item</i></a>’s intrinsic aspect ratio.
       <p class=issue> This substep needs review, see thread at <a
        href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html">http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html</a>.
      <li> Otherwise, if the flex basis is ‘<code class=css>auto</code>’
       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> <a href="#CSS3-WRITING-MODES"
       rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
       The <a href="#flex-base-size"><i>flex base size</i></a> is the item's
       max-content main size.
      <li> Otherwise, lay out the item into the available space using its flex
       basis in place of its main size, and treating ‘<code
       class=css>auto</code>’ as ‘<code class=css>max-content</code>’.
       The <a href="#flex-base-size"><i>flex base size</i></a> is the item's
       resulting main size.
     </ul>
     The <a href="#hypothetical-main-size"><i>hypothetical main size</i></a>
     is the item's <a href="#flex-base-size"><i>flex base size</i></a> clamped
     according to its min and max main size properties.
    <li id=algo-main-container> <strong>Determine the main size of the flex
     container</strong> using the rules of the formatting context in which it
     participates. In this calculation, the <i>min-content main size</i> of
     the flex container is the maximum of the flex container's items'
     <i>min-content size contributions</i>, and the <i>max content main
     size</i> of the flex container is the sum of the flex container's items'
     <i>max-content size contributions</i>. The min-content/max-content main
     size contribution of an item is its outer <a
     href="#hypothetical-main-size"><i>hypothetical main size</i></a> when
     sized under a min-content/max-content constraint (respectively). For this
     computation, ‘<code class=css>auto</code>’ margins on flex items are
     treated as ‘<code class=css>0</code>’.
   </ol>
   <h3 id=main-sizing><span class=secno>9.3. </span> 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
       href="#single-line"><i>single-line</i></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. If the very
       first uncollected item wouldn't fit, collect just it into the line. A
       break is forced wherever the CSS2.1 ‘<code
       class=css>page-break-before/after</code>’ <a href="#CSS21"
       rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> or the CSS3 ‘<code
       class=css>break-before/after</code>’ <a href="#CSS3-BREAK"
       rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> properties
       specify a fragmentation break.
       <p> For this step, the size of a flex item is its outer <a
        href="#hypothetical-main-size"><i>hypothetical main size</i></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
     main size (see section 9.7.).
   </ol>
   <h3 id=cross-sizing><span class=secno>9.4. </span> Cross size determination</h3>
   <ol class=continue>
    <li id=algo-cross-item> <strong>Determine the <dfn
     id=hypothetical-cross-size>hypothetical cross size</dfn> of each
     item</strong> by performing layout with the used main size and the
     available space, treating ‘<code class=css>auto</code>’ as ‘<code
     class=css>fit-content</code>’.
    <li id=algo-cross-line> <strong>Calculate the cross size of each flex
     line.</strong>
     <p> If the flex container has only a single line (even if it's a <a
      href="#multi-line"><i>multi-line</i></a> flex container) and has a <a
      href="#definite-size"><i>definite</i></a> cross size, the cross size of
      the flex line is the flex container's inner cross size.
     <p> Otherwise, for each flex line:
     <ol>
      <li> Collect all the flex items whose inline-axis is parallel to the
       main-axis, whose ‘<a href="#align-self"><code
       class=property>align-self</code></a>’ is <a
       href="#align-baseline">‘<code class=css>baseline</code>’</a>, and
       whose cross-axis margins are both non-‘<code
       class=css>auto</code>’. 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 href="#hypothetical-cross-size"><i>hypothetical cross
       size</i></a>.
      <li> The used cross-size of the flex line is the largest of the numbers
       found in the previous two steps and zero.
     </ol>
    <li id=algo-line-stretch> <strong>Handle ‘<code class=css>align-content:
     stretch</code>’.</strong> If the flex container has a <a
     href="#definite-size"><i>definite</i></a> cross size, ‘<a
     href="#align-content"><code class=property>align-content</code></a>’ is
     <a href="#align-content-stretch">‘<code
     class=css>stretch</code>’</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 ‘<code
     class=css>visibility:collapse</code>’ items.</strong> If any flex items
     have ‘<code class=css>visibility: collapse</code>’, note the cross
     size of the line they're in as the item's <dfn id=strut-size>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 main size. For the rest of the algorithm
      following that step, ignore the collapsed items entirely (as if they
      were ‘<code class=css>display:none</code>’) 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 <a
      href="#strut-size"><var>strut size</var></a> among all the collapsed
      items in the line, set its cross size to that <a
      href="#strut-size"><var>strut size</var></a>.
     <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 ‘<code class=css>align-self:
     stretch</code>’, its computed cross size property is ‘<code
     class=css>auto</code>’, and neither of its cross-axis margins are
     ‘<code class=css>auto</code>’, 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
     href="#hypothetical-cross-size"><i>hypothetical cross size</i></a>.
     <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.
   </ol>
   <h3 id=main-alignment><span class=secno>9.5. </span> 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 ‘<code class=css>auto</code>’, distribute
       the free space equally among these margins. Otherwise, set all ‘<code
       class=css>auto</code>’ margins to zero.
      <li> Align the items along the main-axis per ‘<a
       href="#justify-content"><code
       class=property>justify-content</code></a>’.
     </ol>
   </ol>
   <h3 id=cross-alignment><span class=secno>9.6. </span> Cross-Axis Alignment</h3>
   <ol class=continue>
    <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<code
     class=css>auto</code>’ margins.</strong> If a flex item has ‘<code
     class=css>auto</code>’ cross-axis margins:
     <ul>
      <li> If its outer cross size (treating those ‘<code
       class=css>auto</code>’ margins as zero) is less than the cross size
       of its flex line, distribute the difference in those sizes equally to
       the ‘<code class=css>auto</code>’ margins.
      <li> Otherwise, if the <i>start</i> or <i>block-before</i> margin
       (whichever is in the cross axis) is ‘<code class=css>auto</code>’,
       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 ‘<a href="#align-self"><code
     class=property>align-self</code></a>’, if neither of the item's
     cross-axis margins are ‘<code class=css>auto</code>’.
    <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
       href="#definite-size"><i>definite</i></a> size, use that.
      <li> Otherwise, use the sum of the flex lines' cross sizes.
     </ul>
    <li id=algo-line-align> <strong>Align all flex lines</strong> per ‘<a
     href="#align-content"><code class=property>align-content</code></a>’.
   </ol>
   <h3 id=resolve-flexible-lengths><span class=secno>9.7. </span> 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 <a
     href="#hypothetical-main-size"><i>hypothetical main sizes</i></a> of all
     items on the line. If the sum is less than the flex container's inner
     main size, use the <a href="#flex-grow-factor"><i>flex grow
     factor</i></a> for the rest of this algorithm; otherwise, use the <a
     href="#flex-shrink-factor"><i>flex shrink factor</i></a>.
    <li> <strong>Size inflexible items.</strong> For any items that have a
     flex factor of zero, set their used main size to their <a
     href="#hypothetical-main-size"><i>hypothetical main size</i></a>.
    <li> <strong>Check that you can distribute any space.</strong> If all the
     flex items on the line are either frozen or have a flex factor of zero,
     exit the algorithm.
    <li> <strong>Calculate free space.</strong> Sum the outer <a
     href="#flex-base-size"><i>flex base sizes</i></a> of all items on the
     line, and subtract this from the flex container's inner main size. This
     is the free space.
    <li> <strong>Distribute free space proportional to the flex
     factors.</strong> If the sign of the free space is positive and the
     algorithm is using the <a href="#flex-grow-factor"><i>flex grow
     factor</i></a>, or if the sign of the free space is negative and the
     algorithm is using the <a href="#flex-shrink-factor"><i>flex shrink
     factor</i></a>, distribute the free space to each flexible item's main
     size in proportion to the item's flex factor:
     <dl>
      <dt>If the free space is positive
      <dd> Find the ratio of the item's <a href="#flex-grow-factor"><i>flex
       grow factor</i></a> to the sum of the <a
       href="#flex-grow-factor"><i>flex grow factors</i></a> of all items on
       the line. Set the item's main size to its <a
       href="#flex-base-size"><i>flex base size</i></a> plus a fraction of the
       free space proportional to the ratio.
      <dt>If the free space is negative
      <dd> For every item on the line, multiply its <a
       href="#flex-shrink-factor"><i>flex shrink factor</i></a> by its outer
       <a href="#flex-base-size"><i>flex base size</i></a>, and note this as
       its <dfn id=scaled-flex-shrink-factor>scaled flex shrink factor</dfn>.
       Find the ratio of the item's <a
       href="#scaled-flex-shrink-factor"><i>scaled flex shrink factor</i></a>
       to the sum of the <a href="#scaled-flex-shrink-factor"><i>scaled flex
       shrink factors</i></a> of all items on the line. Set the item's main
       size to its <a href="#flex-base-size"><i>flex base size</i></a> minus a
       fraction of the absolute value of the free space proportional to the
       ratio. <span class=note>Note this may result in a negative inner main
       size; it will be corrected in the next step.</span>
     </dl>
    <li> <strong>Fix min/max violations.</strong> Clamp each item's main size
     by its min and max main size properties. If the item's main size was made
     smaller by this, it's a max violation. If the item's main size was made
     larger by this, it's a min violation.
    <li> The total violation is the sum of the adjustments from the previous
     step (<code><var>clamped size</var> - <var>unclamped size</var></code>).
     If the total violation is:
     <dl>
      <dt>Zero
      <dd> Exit the algorithm.
      <dt>Positive
      <dd> Freeze all the items with min violations, reset all other items to
       their size upon entering this algorithm, and return to step 2 of this
       algorithm.
      <dt>Negative
      <dd> Freeze all the items with max violations, reset all other items to
       their size upon entering this algorithm, and return to step 2 of this
       algorithm.
     </dl>
   </ol>
   <h2 id=pagination><span class=secno>10. </span> Fragmenting Flex Layout</h2>
   <p> Flex containers can break across pages between items, between lines of
    items (in <a href="#multi-line"><i>multi-line</i></a> mode), and inside
    items. The ‘<code class=css>break-*</code>’ properties apply to flex
    containers as normal for block-level or inline-level boxes. This section
    defines how they apply to flex items and elements inside flex items.
   <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 <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>. 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 ‘<code
     class=property>break-before</code>’ and ‘<code
     class=property>break-after</code>’ properties on flex items are
     propagated to the flex line. The ‘<code
     class=property>break-before</code>’ property on the first line and the
     ‘<code class=property>break-after</code>’ property on the last line
     are propagated to the flex container.
    <li> In a column flex container, the ‘<code
     class=property>break-before</code>’ property on the first item and the
     ‘<code class=property>break-after</code>’ 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 1 break
     opportunities</a> occur between sibling flex lines, and <a
     href="http://www.w3.org/TR/css3-break/#end-block">Class 3 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 1 break
     opportunities</a> occur between sibling flex items, and <a
     href="http://www.w3.org/TR/css3-break/#end-block">Class 3 break
     opportunities</a> occur between the first/last flex items on a line and
     the flex container's content edges. <a href="#CSS3-BREAK"
     rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>
    <li> When a flex container is continued after a break, the space available
     to its <a href="#flex-item"><i>flex items</i></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 href="#multi-line"><i>multi-line</i></a> colum flex
     container breaks, each fragment has its own "stack" of flex lines, just
     like each fragment of a multi-column element has its own row of column
     boxes.
    <li> Aside from the rearrangement of items imposed by the previous point,
     UAs should attempt to minimize distortation of the flex container with
     respect to unfragmented flow.
   </ul>
   <h3 id=pagination-algo><span class=secno>10.1. </span> 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 href="#single-line"><i>Single-line</i></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 href="#single-line"><i>single-line</i></a> flex containers paginate
       very similarly to block flow. As a test of the intent, a flex container
       with ‘<code class=css>justify-content:start</code>’ 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 href="#multi-line"><i>Multi-line</i></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
       href="#multi-line"><i>multi-line</i></a> column flex containers.
     <dt><a href="#single-line"><i>Single-line</i></a> row flex container
     <dd>
      <ol>
       <li> Run the entire flex layout algorithm (without regards to
        pagination), except treat any ‘<a href="#align-self"><code
        class=property>align-self</code></a>’ other than ‘<code
        class=css>start</code>’ or ‘<a href="#align-baseline"><code
        class=css>baseline</code></a>’ as ‘<code
        class=css>start</code>’.
       <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 ‘<a
        href="#align-self"><code class=property>align-self</code></a>’ and
        ‘<a href="#align-content"><code
        class=property>align-content</code></a>’ as being ‘<code
        class=css>start</code>’ for all item fragments and lines.
       <li> If any item, when aligned according to its original ‘<a
        href="#align-self"><code class=property>align-self</code></a>’ value
        into the combined cross size 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 href="#multi-line"><i>Multi-line</i></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 id=conformance><span class=secno>11. </span> Conformance</h2>
   <h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
   <p>Conformance requirements are expressed with a combination of descriptive
    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
    normative parts of this document are to be interpreted as described in RFC
 . However, for readability, these words do not appear in all uppercase
    letters in this specification.
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a
    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
   <p>Examples in this specification are introduced with the words “for
    example” or are set apart from the normative text with
    <code>class="example"</code>, like this:
   <div class=example>
    <p>This is an example of an informative example.
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from
    the normative text with <code>class="note"</code>, like this:
   <p class=note>Note, this is an informative note.
   <h3 id=conformance-classes><span class=secno>11.2. </span> Conformance
    classes</h3>
   <p>Conformance to CSS Flexible Box Layout Module is defined for three
    conformance classes:
   <dl>
    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
     sheet</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
     style sheet</a>.
    <dt><dfn id=renderer>renderer</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that interprets the semantics of a style sheet and renders documents that
     use them.
    <dt><dfn id=authoring-tool>authoring tool</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that writes a style sheet.
   </dl>
   <p>A style sheet is conformant to CSS Flexible Box Layout Module if all of
    its statements that use syntax defined in this module are valid according
    to the generic CSS grammar and the individual grammars of each feature
    defined in this module.
   <p>A renderer is conformant to CSS Flexible Box Layout Module if, in
    addition to interpreting the style sheet as defined by the appropriate
    specifications, it supports all the features defined by CSS Flexible Box
    Layout Module by parsing them correctly and rendering the document
    accordingly. However, the inability of a UA to correctly render a document
    due to limitations of the device does not make the UA non-conformant. (For
    example, a UA is not required to render color on a monochrome monitor.)
   <p>An authoring tool is conformant to CSS Flexible Box Layout Module if it
    writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in this
    module, and meet all other conformance requirements of style sheets as
    described in this module.
   <h3 id=partial><span class=secno>11.3. </span> Partial implementations</h3>
   <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as
    invalid (and <a
    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
    appropriate</a>) any at-rules, properties, property values, keywords, and
    other syntactic constructs for which they have no usable level of support.
    In particular, user agents <strong>must not</strong> selectively ignore
    unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid (as
    unsupported values must be), CSS requires that the entire declaration be
    ignored.
   <h3 id=experimental><span class=secno>11.4. </span> Experimental
    implementations</h3>
   <p>To avoid clashes with future CSS features, the CSS2.1 specification
    reserves a <a
    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
    syntax</a> for proprietary and experimental extensions to CSS.
   <p>Prior to a specification reaching the Candidate Recommendation stage in
    the W3C process, all implementations of a CSS feature are considered
    experimental. The CSS Working Group recommends that implementations use a
    vendor-prefixed syntax for such features, including those in W3C Working
    Drafts. This avoids incompatibilities with future changes in the draft.
   <h3 id=testing><span class=secno>11.5. </span> Non-experimental
    implementations</h3>
   <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementers should
    release an unprefixed implementation of any CR-level feature they can
    demonstrate to be correctly implemented according to spec.
   <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental CSS
    renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before releasing
    an unprefixed implementation of any CSS features. Testcases submitted to
    W3C are subject to review and correction by the CSS Working Group.
   <p>Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group's website at <a
    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
    mailing list.
   <h3 id=cr-exit-criteria><span class=secno>11.6. </span> CR exit criteria</h3>
   <p> For this specification to be advanced to Proposed Recommendation, there
    must be at least two independent, interoperable implementations of each
    feature. Each feature may be implemented by a different set of products,
    there is no requirement that all features be implemented by a single
    product. For the purposes of this criterion, we define the following
    terms:
   <dl>
    <dt>independent
    <dd>each implementation must be developed by a different party and cannot
     share, reuse, or derive from code used by another qualifying
     implementation. Sections of code that have no bearing on the
     implementation of this specification are exempt from this requirement.
    <dt>interoperable
    <dd>passing the respective test case(s) in the official CSS test suite,
     or, if the implementation is not a Web browser, an equivalent test. Every
     relevant test in the test suite should have an equivalent test created if
     such a user agent (UA) is to be used to claim interoperability. In
     addition if such a UA is to be used to claim interoperability, then there
     must one or more additional UAs which can also pass those equivalent
     tests in the same way for the purpose of interoperability. The equivalent
     tests must be made publicly available for the purposes of peer review.
    <dt>implementation
    <dd>a user agent which:
     <ol class=inline>
      <li>implements the specification.
      <li>is available to the general public. The implementation may be a
       shipping product or other publicly available version (i.e., beta
       version, preview release, or “nightly build”). Non-shipping product
       releases must have implemented the feature(s) for a period of at least
       one month in order to demonstrate stability.
      <li>is not experimental (i.e., a version specifically designed to pass
       the test suite and is not intended for normal usage going forward).
     </ol>
   </dl>
   <p>The specification will remain Candidate Recommendation for at least six
    months.
   <hr title="Separator from footer">
   <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, Robert O'Callahan, Christoph Päper, Ning
    Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai,
    Eugene Veselov, Boris Zbarsky.
   <h2 class=no-num id=references>References</h2>
   <h3 class=no-num id=normative>Normative references</h3>
   <!--begin-normative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS21>[CSS21]
    <dd>Bert Bos; et al. <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 . W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
    <!---->
    <dt id=CSS3-BREAK>[CSS3-BREAK]
    <dd>Rossen Atanassov; Elika J. Etemad. <a
     href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
     Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
     Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
    </dd>
    <!---->
    <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
    <dd>Elika J. Etemad; Koji Ishii. <a
     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
     Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
     Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
    </dd>
    <!---->
    <dt id=RFC2119>[RFC2119]
    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
     RFC 2119. URL: <a
     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
    <!---->
   </dl>
   <!--end-normative-->
   <h3 class=no-num id=informative>Other references</h3>
   <!--begin-informative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS3UI>[CSS3UI]
    <dd>Tantek Çelik. <a
     href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"><cite>CSS Basic
     User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C
     Working Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
    </dd>
    <!---->
    <dt id=CSS3VAL>[CSS3VAL]
    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
     Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
    </dd>
    <!---->
    <dt id=HTML40>[HTML40]
    <dd>Ian Jacobs; David Raggett; Arnaud Le Hors. <a
     href="http://www.w3.org/TR/1998/REC-html40-19980424"><cite>HTML 4.0
     Specification.</cite></a> 24 April 1998. W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/1998/REC-html40-19980424">http://www.w3.org/TR/1998/REC-html40-19980424</a>
    </dd>
    <!---->
   </dl>
   <!--end-informative-->
   <h2 class=no-num id=changes>Changes</h2>
   <p> The following significant changes were made since the <a
    href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September
 Candidate Recommendation</a>:
   <ul>
    <li> Absolutely positioned children of a flex container are no longer
     called "flex items" (to avoid terminology confusion).
    <li> Clarified that ‘<code class=property>float</code>’ still makes
     the children of a flex container turn into block-level elements.
    <li> Clarified that ‘<code class=property>overflow</code>’ applies to
     flex containers.
    <li> Clarified that ‘<code class=css>::first-line</code>’ and ‘<code
     class=css>::first-letter</code>’ pseudo-elements do not apply to flex
     containers (because they are not block containers).
    <li> <a href="#algo-main-item">Allow intrinsic aspect ratios to inform the
     main-size calculation.</a>
    <li> Correct an omission in the flex-line size determination, so a <a
     href="#single-line"><i>single-line</i></a> flexbox will size to its
     contents if it doesn't have a definite size.
    <li> Clarify that ‘<a href="#align-content-stretch"><code
     class=css>stretch</code></a>’ checks for the <em>computed</em> value of
     the cross-size property being ‘<code class=css>auto</code>’, which
     means that percentage cross-sizes that behave as ‘<code
     class=css>auto</code>’ (because they don't resolve against definite
     sizes) aren't stretched.
   </ul>
   <p>A <a
    href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of
    Last Call Comments</a> is available.
   <h2 class=no-num id=property>Property index</h2>
   <!--begin-properties-->
   <table class=proptable>
    <thead>
     <tr>
      <th>Property
      <th>Values
      <th>Initial
      <th>Applies to
      <th>Inh.
      <th>Percentages
      <th>Media
    <tbody>
     <tr>
      <th><a class=property href="#align-content">align-content</a>
      <td>flex-start | flex-end | center | space-between | space-around |
       stretch
      <td>stretch
      <td>multi-line flex containers
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#align-items">align-items</a>
      <td>flex-start | flex-end | center | baseline | stretch
      <td>stretch
      <td>flex containers
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#align-self">align-self</a>
      <td>auto | flex-start | flex-end | center | baseline | stretch
      <td>auto
      <td>flex items
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex">flex</a>
      <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
       &lt;&apos;flex-basis&apos;> ]
      <td>see individual properties
      <td>flex items
      <td>see individual properties
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex-basis-propdef">flex-basis</a>
      <td>&lt;&apos;width&apos;>
      <td>auto
      <td>flex items
      <td>no
      <td>relative to the flex container's inner main size
      <td>visual
     <tr>
      <th><a class=property href="#flex-direction">flex-direction</a>
      <td>row | row-reverse | column | column-reverse
      <td>row
      <td>flex containers
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex-flow">flex-flow</a>
      <td>&lt;‘flex-direction’> || &lt;‘flex-wrap’>
      <td>see individual properties
      <td>flex containers
      <td>see individual properties
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex-grow">flex-grow</a>
      <td>&lt;number>
      <td>0
      <td>flex items
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex-shrink">flex-shrink</a>
      <td>&lt;number>
      <td>1
      <td>flex items
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#flex-wrap">flex-wrap</a>
      <td>nowrap | wrap | wrap-reverse
      <td>nowrap
      <td>flex containers
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#justify-content">justify-content</a>
      <td>flex-start | flex-end | center | space-between | space-around
      <td>flex-start
      <td>flex containers
      <td>no
      <td>
      <td>visual
     <tr>
      <th><a class=property href="#order">order</a>
      <td>&lt;integer>
      <td>0
      <td>flex items and absolutely-positioned flex container children
      <td>no
      <td>
      <td>visual
   </table>
   <!--end-properties-->
   <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
   <ul class=indexlist>
    <li>align-content, <a href="#align-content"
     title="section 8.4."><strong>8.4.</strong></a>
    <li>align-items, <a href="#align-items"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>align-self, <a href="#align-self"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>align-self: auto, <a href="#align-self-auto"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>authoring tool, <a href="#authoring-tool"
     title="section 11.2."><strong>11.2.</strong></a>
    <li>‘<a href="#align-baseline"><code class=css>baseline</code></a>’,
     <a href="#align-baseline" title="section 8.3."><strong>8.3.</strong></a>
    <li>‘<a href="#align-content-center"><code
     class=css>center</code></a>’, <a href="#align-center"
     title="section 8.3."><strong>8.3.</strong></a>, <a
     href="#align-content-center"
     title="section 8.4."><strong>8.4.</strong></a>, <a href="#justify-center"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>collapsed, <a href="#collapsed-flex-item"
     title="section 4.4."><strong>4.4.</strong></a>
    <li>collapsed flex item, <a href="#collapsed-flex-item"
     title="section 4.4."><strong>4.4.</strong></a>
    <li>‘<a href="#flex-flow-column"><code class=css>column</code></a>’,
     <a href="#flex-flow-column"
     title="section 5.1."><strong>5.1.</strong></a>
    <li>‘<a href="#flex-flow-column-reverse"><code
     class=css>column-reverse</code></a>’, <a
     href="#flex-flow-column-reverse"
     title="section 5.1."><strong>5.1.</strong></a>
    <li>cross axis, <a href="#cross-axis"
     title="section 2."><strong>2.</strong></a>
    <li>cross-axis baseline, <a href="#cross-axis-baseline"
     title="section 8.5."><strong>8.5.</strong></a>
    <li>cross dimension, <a href="#cross-dimension"
     title="section 2."><strong>2.</strong></a>
    <li>cross-end, <a href="#cross-end"
     title="section 2."><strong>2.</strong></a>
    <li>cross size, <a href="#cross-size"
     title="section 2."><strong>2.</strong></a>
    <li>cross size property, <a href="#cross-size-property"
     title="section 2."><strong>2.</strong></a>
    <li>cross-start, <a href="#cross-start"
     title="section 2."><strong>2.</strong></a>
    <li>definite, <a href="#definite-size"
     title="section 9."><strong>9.</strong></a>
    <li>definite size, <a href="#definite-size"
     title="section 9."><strong>9.</strong></a>
    <li>flex, <a href="#flex" title="section 7.1."><strong>7.1.</strong></a>
    <li>‘<a href="#flex"><code class=css>flex</code></a>’, <a
     href="#display-flex" title="section 3."><strong>3.</strong></a>
    <li>flex base size, <a href="#flex-base-size"
     title="section 9.2."><strong>9.2.</strong></a>
    <li>flex basis, <a href="#flex-basis"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>flex-basis, <a href="#flex-basis-propdef"
     title="section 7.3.3."><strong>7.3.3.</strong></a>
    <li>flex-basis: auto, <a href="#flex-basis-auto"
     title="section 7.3.3."><strong>7.3.3.</strong></a>
    <li>flex container, <a href="#flex-container"
     title="section 3."><strong>3.</strong></a>
    <li>flex-direction, <a href="#flex-direction"
     title="section 5.1."><strong>5.1.</strong></a>
    <li>‘<a href="#align-content-flex-end"><code
     class=css>flex-end</code></a>’, <a href="#align-content-flex-end"
     title="section 8.4."><strong>8.4.</strong></a>, <a href="#align-flex-end"
     title="section 8.3."><strong>8.3.</strong></a>, <a
     href="#justify-flex-end" title="section 8.2."><strong>8.2.</strong></a>
    <li>flex-flow, <a href="#flex-flow"
     title="section 5.3."><strong>5.3.</strong></a>
    <li>flex formatting context, <a href="#flex-formatting-context"
     title="section 3."><strong>3.</strong></a>
    <li>flex-grow, <a href="#flex-grow"
     title="section 7.3.1."><strong>7.3.1.</strong></a>
    <li>flex grow factor, <a href="#flex-grow-factor"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>flexible length, <a href="#flexible-length"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>flexible length's, <a href="#flexible-length"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>flex item, <a href="#flex-item"
     title="section 4."><strong>4.</strong></a>
    <li>flex layout, <a href="#flex-layout"
     title="section 1."><strong>1.</strong></a>
    <li>flex-shrink, <a href="#flex-shrink"
     title="section 7.3.2."><strong>7.3.2.</strong></a>
    <li>flex shrink factor, <a href="#flex-shrink-factor"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>‘<a href="#align-content-flex-start"><code
     class=css>flex-start</code></a>’, <a href="#align-content-flex-start"
     title="section 8.4."><strong>8.4.</strong></a>, <a
     href="#align-flex-start" title="section 8.3."><strong>8.3.</strong></a>,
     <a href="#justify-flex-start"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>flex-wrap, <a href="#flex-wrap"
     title="section 5.2."><strong>5.2.</strong></a>
    <li>hypothetical cross size, <a href="#hypothetical-cross-size"
     title="section 9.4."><strong>9.4.</strong></a>
    <li>hypothetical main size, <a href="#hypothetical-main-size"
     title="section 9.2."><strong>9.2.</strong></a>
    <li>indefinite, <a href="#indefinite-size"
     title="section 9."><strong>9.</strong></a>
    <li>indefinite size, <a href="#indefinite-size"
     title="section 9."><strong>9.</strong></a>
    <li>‘<a href="#display-inline-flex"><code
     class=css>inline-flex</code></a>’, <a href="#display-inline-flex"
     title="section 3."><strong>3.</strong></a>
    <li>justify-content, <a href="#justify-content"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>main axis, <a href="#main-axis"
     title="section 2."><strong>2.</strong></a>
    <li>main-axis baseline, <a href="#main-axis-baseline"
     title="section 8.5."><strong>8.5.</strong></a>
    <li>main dimension, <a href="#main-dimension"
     title="section 2."><strong>2.</strong></a>
    <li>main-end, <a href="#main-end"
     title="section 2."><strong>2.</strong></a>
    <li>main size, <a href="#main-size"
     title="section 2."><strong>2.</strong></a>
    <li>main size property, <a href="#main-size-property"
     title="section 2."><strong>2.</strong></a>
    <li>main-start, <a href="#main-start"
     title="section 2."><strong>2.</strong></a>
    <li>multi-line, <a href="#multi-line"
     title="section 6."><strong>6.</strong></a>
    <li>‘<a href="#flex-none"><code class=css>none</code></a>’, <a
     href="#flex-none" title="section 7.1."><strong>7.1.</strong></a>
    <li>‘<a href="#flex-flow-nowrap"><code class=css>nowrap</code></a>’,
     <a href="#flex-flow-nowrap"
     title="section 5.2."><strong>5.2.</strong></a>
    <li>order, <a href="#order" title="section 5.4."><strong>5.4.</strong></a>
    <li>participates in baseline alignment, <a href="#baseline-participation"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>renderer, <a href="#renderer"
     title="section 11.2."><strong>11.2.</strong></a>
    <li>‘<a href="#flex-flow-row"><code class=css>row</code></a>’, <a
     href="#flex-flow-row" title="section 5.1."><strong>5.1.</strong></a>
    <li>‘<a href="#flex-flow-row-reverse"><code
     class=css>row-reverse</code></a>’, <a href="#flex-flow-row-reverse"
     title="section 5.1."><strong>5.1.</strong></a>
    <li>scaled flex shrink factor, <a href="#scaled-flex-shrink-factor"
     title="section 9.7."><strong>9.7.</strong></a>
    <li>single-line, <a href="#single-line"
     title="section 6."><strong>6.</strong></a>
    <li>‘<a href="#align-content-space-around"><code
     class=css>space-around</code></a>’, <a
     href="#align-content-space-around"
     title="section 8.4."><strong>8.4.</strong></a>, <a
     href="#justify-space-around"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>‘<a href="#align-content-space-between"><code
     class=css>space-between</code></a>’, <a
     href="#align-content-space-between"
     title="section 8.4."><strong>8.4.</strong></a>, <a
     href="#justify-space-between"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>static position, <a href="#flex-item-static-position"
     title="section 4.1."><strong>4.1.</strong></a>
    <li>‘<a href="#align-content-stretch"><code
     class=css>stretch</code></a>’, <a href="#align-content-stretch"
     title="section 8.4."><strong>8.4.</strong></a>, <a href="#align-stretch"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>strut size, <a href="#strut-size"
     title="section 9.4."><strong>9.4.</strong></a>
    <li>style sheet
     <ul>
      <li>as conformance class, <a href="#style-sheet"
       title="section 11.2."><strong>11.2.</strong></a>
     </ul>
    <li>‘<a href="#flex-flow-wrap"><code class=css>wrap</code></a>’, <a
     href="#flex-flow-wrap" title="section 5.2."><strong>5.2.</strong></a>
    <li>‘<a href="#flex-flow-wrap-reverse"><code
     class=css>wrap-reverse</code></a>’, <a href="#flex-flow-wrap-reverse"
     title="section 5.2."><strong>5.2.</strong></a>
   </ul>
   <!--end-index-->
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
 sgml-declaration:"~/SGML/HTML4.decl"
 sgml-default-doctype-name:"html"
 sgml-minimize-attributes:t
 sgml-nofill-elements:("pre" "style" "br")
 sgml-live-element-indicator:t
 sgml-omittag:nil
 sgml-shorttag:nil
 sgml-namecase-general:t
 sgml-general-insert-case:lower
 sgml-always-quote-attributes:t
 sgml-indent-step:nil
 sgml-indent-data:t
 sgml-parent-document:nil
 sgml-exposed-tags:nil
 sgml-local-catalogs:nil
 sgml-local-ecat-files:nil
 End:
 -->

Mercurial > drafts / annotate

css3-flexbox/Overview.html@9437131b3d6e (annotated)

css3-flexbox/Overview.html