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.

     1 <!DOCTYPE html>
     3 <html lang=en>
     4  <head>
     5   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
     6   <title>CSS Flexible Box Layout Module</title>
     7   <!--
     8   <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
     9   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
    10   -->
    12   <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
    13   <meta content=text name=dcterms.type>
    14   <meta content=2013-03-14 name=dcterms.issued>
    15   <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator>
    16   <meta content=W3C name=dcterms.publisher>
    17   <meta content="http://dev.w3.org/csswg/css3-flexbox/"
    18    name=dcterms.identifier>
    19   <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
    20    type="text/css">
    21   <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
    22   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
    23    type="text/css">
    24   <style>
    25 	code.one-line { white-space: pre; }
    26 	.code-and-figure {
    27 		display: table;
    28 		margin: 0 auto;
    29 		border-spacing: 1em;
    30 	}
    31 	.code-and-figure > div {
    32 		display: table-cell;
    33 		vertical-align: middle;
    34 	}
    35     :not(code) var { font-style: normal; color: #005A9C; }
    37     i { font-style: normal; }
    39     ol[start="0"] { counter-reset: list -1; }
    40     ol[start="0"],
    41     ol.continue { list-style: none; }
    42     ol[start="0"] > li,
    43     ol.continue > li { position: relative; counter-increment: list; }
    44     ol[start="0"] > li::before,
    45     ol.continue > li::before { content: counter(list) "."; position: absolute; left: -4.5em; width: 4em; text-align: right; }
    46     .compact, .compact li {
    47       margin-top: 0;
    48       margin-bottom: 0;
    49     }
    51 	/* Overview catalog example */
    52 	#overview-example {
    53 		display:table;
    54 		margin: 0 auto 1em;
    55 		border-spacing: .5em 0;
    56 		min-width: 672px;
    57 	}
    58 	#overview-example > .col {
    59 		display: table-column;
    60 		background: hsl(60,100%,90%);
    61 	}
    62 	#overview-example > .desc {
    63 		display: table-cell;
    64 		vertical-align: top;
    65 		width: 300px;
    66 		padding: 1em 1em 0;
    67 		text-align: left;
    68 		border: thick solid hsl(60,80%,50%);
    69 		border-radius: 1em 1em 0 0;
    70 		border-bottom: none;
    71 	}
    72 	#overview-example > .desc > img {
    73 		margin: 0 auto;
    74 		display: block;
    75 	}
    76 	#overview-example > .desc > h1 {
    77 		background: transparent;
    78 	}
    79 	#overview-example > .buttons {
    80 		display: table-row;
    81 	}
    82 	#overview-example > .buttons > div {
    83 		display: table-cell;
    84 		border: thick solid hsl(60,80%,50%);
    85 		border-radius: 0 0 1em 1em;
    86 		border-top: none;
    87 		text-align: center;
    88 	}
    89 	#overview-example button {
    90 		background-color: hsl(120,100%,40%);
    91 		border: medium inset hsl(120,70%,40%);
    92 		border-radius: 1em;
    93 		padding: .5em;
    94 		font-weight: bold;
    95 		color: white;
    96 		font-size: 1.6em;
    97 		cursor: pointer;
    98 		width: 90%;
    99 		margin: 1em auto;
   100 	}
   102 	/* Visibility: Collapse example */
   103 	#visibility-collapse-example {
   104 		display: table;
   105 		width: 100%;
   106 		box-shadow: 3px 3px 10px #333;
   107 	}
   108 	#visibility-collapse-example > article,
   109 	#visibility-collapse-example > nav {
   110 		display: table-cell;
   111 	}
   112 	#visibility-collapse-example > article {
   113 		width: 100%;
   114 		background: white;
   115 	}
   116 	#visibility-collapse-example ul,
   117 	#visibility-collapse-example li {
   118 		list-style: none;
   119 		margin: 0;
   120 		padding: 0;
   121 	}
   122 	#visibility-collapse-example > nav > ul {
   123 		background: #444;
   124 		border-radius: 0.5em;
   125 		padding: 0.075em;
   126 	}
   127 	#visibility-collapse-example li {
   128 		padding: 0 0.5em;
   129 		background: #ddd;
   130 		color: black;
   131 		border-radius: 0.40em;
   132 		border: #444 solid 0.075em;
   133 	}
   134 	#visibility-collapse-example li li {
   135 		background: #444;
   136 		color: white;
   137 		margin: 0 -0.5em;
   138 		border-radius: 0;
   139 	}
   140 	#visibility-collapse-example li li:first-child {
   141 		border-radius: 0.375em 0.375em 0 0;
   142 	}
   143 	#visibility-collapse-example a {
   144 		background: transparent;
   145 		color: inherit;
   146 	}
   147 	#visibility-collapse-example > nav > ul > li:target,
   148 	#visibility-collapse-example > nav > ul > li:hover {
   149 		background: #888;
   150 		color: white;
   151 	}
   152 	#visibility-collapse-example > nav > ul > li:not(:target):not(:hover) > ul {
   153 		height: 0;
   154 		overflow: hidden;
   155 	}
   157 	#auto-bar {
   158 		overflow: hidden;
   159 		padding: .25em 1em;
   160 		background: #ddd;
   161 		list-style: none;
   162 		margin: 0;
   163 		border-radius: .3em;
   164 	}
   165 	#auto-bar > li {
   166 		float: left;
   167 		color: black;
   168 		margin: 0;
   169 	}
   170 	#auto-bar > li:first-child:after,
   171 	#auto-bar > li:first-child + li:after {
   172 		content: " |  ";
   173 		white-space: pre;
   174 	}
   175 	#auto-bar > li > a {
   176 		display: inline-block;
   177 		padding: 0 .25em;
   178 		border-radius: .3em;
   179 	}
   180 	#auto-bar > li > a:not(:hover):not(:focus) {
   181 		text-decoration: none;
   182 	}
   183 	#auto-bar > li > a:hover {
   184 		color: #ddd;
   185 		background: #444;
   186 	}
   187 	#auto-bar > #login { float: right; }
   190 	.cross-auto-figure > div {
   191 		margin: 0 auto;
   192 		width: 70px;
   193 		background: #888;
   194 		padding: 0 .5em;
   195 		border-radius: 1em;
   196 		border: 1px solid transparent;
   197 	}
   198 	.cross-auto-figure > div > div {
   199 		border-spacing: 0;
   200 		display: table;
   201 		background: #ddd;
   202 		color: black;
   203 		text-align: center;
   204 		margin: .5em auto;
   205 		padding: .5em;
   206 		border-radius: .5em;
   207 	}
   209     .axis { color: hsl(  0,80%,40%); }
   210     .side { color: hsl(240,80%,50%); }
   211     .size { color: hsl(120,80%,30%); }
   212 	</style>
   214  <body class=h-entry>
   215   <div class=head> <!--begin-logo-->
   216    <p><a href="http://www.w3.org/"><img alt=W3C height=48
   217     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
   219    <h1 class=p-name id=head-box-flexible>CSS Flexible Box Layout Module</h1>
   221    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, <time
   222     class=dt-updated datetime=20130314>14 March 2013</time></h2>
   224    <dl>
   225     <dt>This version:
   226      <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130314/</a>-->
   228     <dd><a class=u-url
   229      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   231     <dt>Latest version:
   232      <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
   234     <dd><a
   235      href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
   237     <dt>Editor's Draft:
   239     <dd><a
   240      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
   242     <dt>Previous version:
   244     <dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/"
   245      rel=previous>http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a>
   247     <dt>Issues List:
   249     <dd><a
   250      href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Flexbox&amp;resolution=---">Bugzilla
   251      Bugs for Flexbox</a>
   253     <dt>Discussion:
   255     <dd><a
   256      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
   257      with subject line "<code>[css3-flexbox] …message topic…</code>"
   259     <dt>Editors:
   261     <dd class="p-author h-card vcard"><a class="p-name fn u-url url"
   262      href="http://www.xanthir.com/contact" rel=author>Tab Atkins Jr.</a>,
   263      <span class="p-org org">Google Inc.</span>
   265     <dd class="p-author h-card vcard"><a class="p-name fn u-url url"
   266      href="http://fantasai.inkedblade.net/contact" rel=author>Elika J.
   267      Etemad</a>, <span class="p-org org">Mozilla</span>
   269     <dd class="p-author h-card vcard"><span class="p-name fn">Rossen
   270      Atanassov</span>, <span class="p-org org">Microsoft Corporation</span>,
   271      <a class="u-email email"
   272      href="mailto:ratan@microsoft.com">ratan@microsoft.com</a>
   274     <dt>Authors and former editors:
   276     <dd class="p-author h-card"><span class=p-name>Alex Mogilevsky</span>,
   277      <span class=p-org>Microsoft Corporation</span>, <a class=u-email
   278      href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
   280     <dd class="p-author h-card"><span class=p-name>L. David Baron</span>,
   281      <span class=p-org>Mozilla Corporation</span>, <a class=u-email
   282      href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
   284     <dd class="p-author h-card"><span class=p-name>Neil Deakin</span>, <span
   285      class=p-org>Mozilla Corporation</span>, <a class=u-email
   286      href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>
   288     <dd class="p-author h-card"><span class=p-name>Ian Hickson</span>,
   289      formerly of Opera Software, <a class=u-email
   290      href="mailto:ian@hixie.ch">ian@hixie.ch</a>
   292     <dd class="p-author h-card"><span class=p-name>David Hyatt</span>,
   293      formerly of Netscape Corporation, <a class=u-email
   294      href="mailto:hyatt@apple.com">hyatt@apple.com</a>
   295    </dl>
   296    <!--begin-copyright-->
   297    <p class=copyright><a
   298     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   299     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
   300     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   301     href="http://www.csail.mit.edu/"><abbr
   302     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   303     href="http://www.ercim.eu/"><abbr
   304     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   305     <a href="http://www.keio.ac.jp/">Keio</a>, <a
   306     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
   307     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   308     <a
   309     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   310     and <a
   311     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   312     use</a> rules apply.</p>
   313    <!--end-copyright-->
   314    <hr title="Separator for header">
   315   </div>
   317   <h2 class="no-num no-toc" id=abstract> Abstract</h2>
   319   <p> <span class=p-summary> The specification describes a CSS box model
   320    optimized for user interface design. In the flex layout model, the
   321    children of a flex container can be laid out in any direction, and can
   322    "flex" their sizes, either growing to fill unused space or shrinking to
   323    avoid overflowing the parent. </span> Both horizontal and vertical
   324    alignment of the children can be easily manipulated. Nesting of these
   325    boxes (horizontal inside vertical, or vertical inside horizontal) can be
   326    used to build layouts in two dimensions.
   328   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   329   <!--begin-status-->
   331   <p>This is a public copy of the editors' draft. It is provided for
   332    discussion only and may change at any moment. Its publication here does
   333    not imply endorsement of its contents by W3C. Don't cite this document
   334    other than as work in progress.
   336   <p>The (<a
   337    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   338    mailing list <a
   339    href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE">
   340    www-style@w3.org</a> (see <a
   341    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   342    discussion of this specification. When sending e-mail, please put the text
   343    “css3-flexbox” in the subject, preferably like this:
   344    “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>”
   346   <p>This document was produced by the <a
   347    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   348    the <a href="http://www.w3.org/Style/">Style Activity</a>).
   350   <p>This document was produced by a group operating under the <a
   351    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   352    2004 W3C Patent Policy</a>. W3C maintains a <a
   353    href="http://www.w3.org/2004/01/pp-impl/32061/status"
   354    rel=disclosure>public list of any patent disclosures</a> made in
   355    connection with the deliverables of the group; that page also includes
   356    instructions for disclosing a patent. An individual who has actual
   357    knowledge of a patent which the individual believes contains <a
   358    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   359    Claim(s)</a> must disclose the information in accordance with <a
   360    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   361    6 of the W3C Patent Policy</a>.</p>
   362   <!--end-status-->
   364   <p>The CR period will last at least until 20 March 2013. At the time of
   365    publication, no test suite and implementation report have yet been made.
   366    They will be made available from the <a href="/Style/CSS/Test/">CSS test
   367    suites page</a>. See the section <a href="#cr-exit-criteria">“CR exit
   368    criteria”</a> for details.
   370   <p>See the section <a href="#changes">“Changes”</a> for changes made to
   371    this specification since the last Working Draft.
   373   <p> The following features are at-risk:
   375   <ul>
   376    <li>Calculation of the static position of absolutely-positioned flex
   377     items.
   378   </ul>
   380   <h2 class="no-num no-toc" id=table>Table of contents</h2>
   381   <!--begin-toc-->
   383   <ul class=toc>
   384    <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
   385     <ul class=toc>
   386      <li><a href="#overview"><span class=secno>1.1. </span> Overview</a>
   388      <li><a href="#placement"><span class=secno>1.2. </span> Module
   389       interactions</a>
   391      <li><a href="#values"><span class=secno>1.3. </span> Values</a>
   392     </ul>
   394    <li><a href="#box-model"><span class=secno>2. </span> Flex Layout Box
   395     Model and Terminology</a>
   397    <li><a href="#flex-containers"><span class=secno>3. </span> Flex
   398     Containers: the ‘<code class=css>flex</code>’ and ‘<code
   399     class=css>inline-flex</code>’ ‘<code class=property>display</code>’
   400     values</a>
   402    <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a>
   403     <ul class=toc>
   404      <li><a href="#abspos-items"><span class=secno>4.1. </span>
   405       Absolutely-Positioned Flex Children</a>
   407      <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item
   408       Margins</a>
   410      <li><a href="#painting"><span class=secno>4.3. </span> Flex Item
   411       Z-Ordering</a>
   413      <li><a href="#visibility-collapse"><span class=secno>4.4. </span>
   414       Collapsed Items</a>
   415     </ul>
   417    <li><a href="#flow-order"><span class=secno>5. </span> Ordering and
   418     Orientation</a>
   419     <ul class=toc>
   420      <li><a href="#flex-direction-property"><span class=secno>5.1. </span>
   421       Flex Flow Direction: the ‘<code
   422       class=property>flex-direction</code>’ property</a>
   424      <li><a href="#flex-wrap-property"><span class=secno>5.2. </span> Flex
   425       Line Wrapping: the ‘<code class=property>flex-wrap</code>’
   426       property</a>
   428      <li><a href="#flex-flow-property"><span class=secno>5.3. </span> Flex
   429       Direction and Wrap: the ‘<code class=property>flex-flow</code>’
   430       shorthand</a>
   432      <li><a href="#order-property"><span class=secno>5.4. </span> Display
   433       Order: the ‘<code class=property>order</code>’ property</a>
   434       <ul class=toc>
   435        <li><a href="#order-accessibility"><span class=secno>5.4.1. </span>
   436         Reordering and Accessibility</a>
   437       </ul>
   438     </ul>
   440    <li><a href="#flex-lines"><span class=secno>6. </span> Flex Lines</a>
   442    <li><a href="#flexibility"><span class=secno>7. </span> Flexibility</a>
   443     <ul class=toc>
   444      <li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code
   445       class=property>flex</code>’ Shorthand</a>
   447      <li><a href="#flex-common"><span class=secno>7.2. </span> Common Values
   448       of ‘<code class=property>flex</code>’</a>
   450      <li><a href="#flex-components"><span class=secno>7.3. </span> Components
   451       of Flexibility</a>
   452       <ul class=toc>
   453        <li><a href="#flex-grow-property"><span class=secno>7.3.1. </span> The
   454         ‘<code class=property>flex-grow</code>’ property</a>
   456        <li><a href="#flex-shrink-property"><span class=secno>7.3.2. </span>
   457         The ‘<code class=property>flex-shrink</code>’ property</a>
   459        <li><a href="#flex-basis-property"><span class=secno>7.3.3. </span>
   460         The ‘<code class=property>flex-basis</code>’ property</a>
   461       </ul>
   462     </ul>
   464    <li><a href="#alignment"><span class=secno>8. </span> Alignment</a>
   465     <ul class=toc>
   466      <li><a href="#auto-margins"><span class=secno>8.1. </span> Aligning with
   467       ‘<code class=css>auto</code>’ margins</a>
   469      <li><a href="#justify-content-property"><span class=secno>8.2. </span>
   470       Axis Alignment: the ‘<code class=property>justify-content</code>’
   471       property</a>
   473      <li><a href="#align-items-property"><span class=secno>8.3. </span>
   474       Cross-axis Alignment: the ‘<code class=property>align-items</code>’
   475       and ‘<code class=property>align-self</code>’ properties</a>
   477      <li><a href="#align-content-property"><span class=secno>8.4. </span>
   478       Packing Flex Lines: the ‘<code class=property>align-content</code>’
   479       property</a>
   481      <li><a href="#flex-baselines"><span class=secno>8.5. </span> Flex
   482       Baselines</a>
   483     </ul>
   485    <li><a href="#layout-algorithm"><span class=secno>9. </span> Flex Layout
   486     Algorithm</a>
   487     <ul class=toc>
   488      <li><a href="#box-manip"><span class=secno>9.1. </span> Initial
   489       Setup</a>
   491      <li><a href="#line-sizing"><span class=secno>9.2. </span> Line Length
   492       Determination</a>
   494      <li><a href="#main-sizing"><span class=secno>9.3. </span> Main Size
   495       Determination</a>
   497      <li><a href="#cross-sizing"><span class=secno>9.4. </span> Cross size
   498       determination</a>
   500      <li><a href="#main-alignment"><span class=secno>9.5. </span> Main-Axis
   501       Alignment</a>
   503      <li><a href="#cross-alignment"><span class=secno>9.6. </span> Cross-Axis
   504       Alignment</a>
   506      <li><a href="#resolve-flexible-lengths"><span class=secno>9.7. </span>
   507       Resolving Flexible Lengths</a>
   508     </ul>
   510    <li><a href="#pagination"><span class=secno>10. </span> Fragmenting Flex
   511     Layout</a>
   512     <ul class=toc>
   513      <li><a href="#pagination-algo"><span class=secno>10.1. </span> Sample
   514       Flex Fragmentation Algorithm</a>
   515     </ul>
   517    <li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
   518     <ul class=toc>
   519      <li><a href="#conventions"><span class=secno>11.1. </span> Document
   520       conventions</a>
   522      <li><a href="#conformance-classes"><span class=secno>11.2. </span>
   523       Conformance classes</a>
   525      <li><a href="#partial"><span class=secno>11.3. </span> Partial
   526       implementations</a>
   528      <li><a href="#experimental"><span class=secno>11.4. </span> Experimental
   529       implementations</a>
   531      <li><a href="#testing"><span class=secno>11.5. </span> Non-experimental
   532       implementations</a>
   534      <li><a href="#cr-exit-criteria"><span class=secno>11.6. </span> CR exit
   535       criteria</a>
   536     </ul>
   538    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
   540    <li class=no-num><a href="#references">References</a>
   541     <ul class=toc>
   542      <li class=no-num><a href="#normative">Normative references</a>
   544      <li class=no-num><a href="#informative">Other references</a>
   545     </ul>
   547    <li class=no-num><a href="#changes">Changes</a>
   549    <li class=no-num><a href="#property">Property index</a>
   551    <li class=no-num><a href="#index">Index</a>
   552   </ul>
   553   <!--end-toc-->
   555   <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   557   <p><em>This section is not normative.</em>
   559   <p> CSS 2.1 defined four layout modes — algorithms which determine the
   560    size and position of boxes based on their relationships with their sibling
   561    and ancestor boxes:
   563   <ul class=compact>
   564    <li>block layout, designed for laying out documents
   566    <li>inline layout, designed for laying out text
   568    <li>table layout, designed for laying out 2D data in a tabular format
   570    <li>positioned layout, designed for very explicit positioning without much
   571     regard for other elements in the document
   572   </ul>
   574   <p> This module introduces a new layout mode, <dfn id=flex-layout>flex
   575    layout</dfn>, which is designed for laying out more complex applications
   576    and webpages.
   578   <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
   580   <p><em>This section is not normative.</em>
   582   <p> Flex layout is superficially similar to block layout. It lacks many of
   583    the more complex text- or document-centric properties that can be used in
   584    block layout, such as <a
   585    href="http://www.w3.org/TR/CSS21/visuren.html#floats">floats</a> and <a
   586    href="http://www.w3.org/TR/css3-multicol/">columns</a>. In return it gains
   587    simple and powerful tools for distributing space and aligning content in
   588    ways that webapps and complex web pages often need. The contents of a flex
   589    container:
   591   <ul>
   592    <li> can be laid out in any <a href="#flex-direction-property">flow
   593     direction</a> (leftwards, rightwards, downwards, or even upwards!)
   595    <li> can have their display order <a
   596     href="#flex-flow-row-reverse">reversed</a> or <a
   597     href="#order-property">rearranged</a> at the style layer (i.e., visual
   598     order can be independent of source and speech order)
   600    <li> can be laid out linearly along a single (<a href="#main-axis"><i
   601     title="main axis">main</i></a>) axis or <a
   602     href="#flex-wrap-property">wrapped</a> into multiple lines along a
   603     secondary (<a href="#cross-axis"><i title="cross axis">cross</i></a>)
   604     axis
   606    <li> can <a href="#flexibility">“flex” their sizes</a> to respond to
   607     the available space
   609    <li> can be <a href="#alignment">aligned</a> with respect to their
   610     container or each other
   612    <li> can be dynamically <a href="#visibility-collapse">collapsed</a> or
   613     uncollapsed along the <a href="#main-axis"><i>main axis</i></a> while
   614     preserving the container's <a href="#cross-size"><i>cross size</i></a>
   615   </ul>
   617   <div class=example>
   618    <p> Here's an example of a catalog where each item has a title, an photo,
   619     a description, and a purchase button. The designer's intention is that
   620     each entry has the same overall size, that the photo be above the text,
   621     and that the purchase buttons aligned at the bottom, regardless of the
   622     length of the item's description. Flex layout makes many aspects of this
   623     design easy:
   625    <ul>
   626     <li> The catalog uses flex layout to lay out rows of items horizontally,
   627      and to ensure that items within a row are all equal-height. Each entry
   628      is then itself a column flex container, laying out its contents
   629      vertically.
   631     <li> Within each entry, the source document content is ordered logically
   632      with the title first, followed by the description and the photo. This
   633      provides a sensible ordering for speech rendering and in non-CSS
   634      browsers. For a more compelling visual presentation, however, ‘<a
   635      href="#order"><code class=property>order</code></a>’ is used to pull
   636      the image up from later in the content to the top, and ‘<a
   637      href="#align-self"><code class=property>align-self</code></a>’ is used
   638      to center it horizontally.
   640     <li> An <a href="#auto-margins">‘<code class=css>auto</code>’
   641      margin</a> above the purchase button forces it to the bottom within each
   642      entry box, regardless of the height of that item's description.
   643    </ul>
   645    <pre>
   646 &lt;style>
   647 #deals {
   648 	display: flex;        /* Flex layout so items <a
   649     href="#align-self"
   650     title="Flex items stretch by default.">have equal height</a>  */
   651 	flex-flow: row wrap;  /* <a
   652     href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property">Allow items to wrap into multiple lines</a> */
   653 }
   654 .sale-item { 
   655 	display: flex;        /* Lay out each item using flex layout */
   656 	flex-flow: column;    /* <a
   657     href="#flex-flow-property">Lay out item's contents vertically</a>  */
   658 }
   659 .sale-item > img { 
   660 	order: -1;            /* <a
   661     href="#order-property">Shift image before other content (in visual order)</a> */
   662 	align-self: center;   /* <a
   663     href="#align-self">Center the image cross-wise (horizontally)</a>         */
   664 }
   665 .sale-item > button {
   666 	margin-top: auto;     /* <a
   667     href="#auto-margins">Auto top margin pushes button to bottom</a> */
   668 }
   669 &lt;/style></pre>
   671    <pre>
   672 &lt;section id='deals'>
   673   &lt;section class='sale-item'>
   674     &lt;h1>Computer Starter Kit&lt;/h1>
   675     &lt;p>This is the best computer money can buy, if you don't have much money.
   676     &lt;ul>
   677       &lt;li>Computer
   678       &lt;li>Monitor
   679       &lt;li>Keyboard
   680       &lt;li>Mouse
   681     &lt;/ul>
   682     &lt;img src='images/computer.jpg'
   683          alt='You get: a white computer with matching peripherals.'>
   684     &lt;button>BUY NOW&lt;/button>
   685   &lt;/section>
   686   &lt;section class='sale-item'>
   687
   688   &lt;/section>
   689
   690 &lt;/section></pre>
   691    <figure>
   692    <div id=overview-example>
   693     <div class=col></div>
   695     <div class=col></div>
   697     <div class=desc> <img
   698      alt="You get: a white computer with matching keyboard and monitor."
   699      src="images/computer.jpg">
   700      <h1 style="font-size: 1.4em;">Computer Starter Kit</h1>
   702      <p> This is the best computer money can buy, if you don't have much
   703       money.
   705      <ul>
   706       <li>Computer
   708       <li>Monitor
   710       <li>Keyboard
   712       <li>Mouse
   713      </ul>
   714     </div>
   716     <div class=desc> <img alt="You get: beautiful ASCII art."
   717      src="images/printer.png">
   718      <h1 style="font-size: 1.4em;">Printer</h1>
   720      <p> Only capable of printing ASCII art.
   722      <ul>
   723       <li>Paper and ink not included.
   724      </ul>
   725     </div>
   727     <div class=buttons>
   728      <div><button>BUY NOW</button></div>
   730      <div><button>BUY NOW</button></div>
   731     </div>
   732    </div>
   733    <figcaption> An example rendering of the code above. </figcaption>
   734    </figure></div>
   736   <h3 id=placement><span class=secno>1.2. </span> Module interactions</h3>
   738   <p> This module extends the definition of the ‘<code
   739    class=property>display</code>’ property <a href="#CSS21"
   740    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, adding a new block-level and
   741    new inline-level display type, and defining a new type of formatting
   742    context along with properties to control its layout. None of the
   743    properties defined in this module apply to the ‘<code
   744    class=css>::first-line</code>’ or ‘<code
   745    class=css>::first-letter</code>’ pseudo-elements.
   747   <h3 id=values><span class=secno>1.3. </span> Values</h3>
   749   <p> This specification follows the <a
   750    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   751    definition conventions</a> from <a href="#CSS21"
   752    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   753    this specification are defined in CSS Level 2 Revision 1 <a
   754    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   755    modules may expand the definitions of these value types: for example <a
   756    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{CSS3VAL}}--></a>, when
   757    combined with this module, expands the definition of the
   758    <var>&lt;length&gt;</var> value type as used in this specification.
   760   <p>In addition to the property-specific values listed in their definitions,
   761    all properties defined in this specification also accept the <a
   762    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">‘<code
   763    class=css>inherit</code>’</a> keyword as their property value. For
   764    readability it has not been repeated explicitly.
   766   <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
   767    Terminology</h2>
   769   <p> An element with ‘<code class=css>display:flex</code>’ or ‘<code
   770    class=css>display:inline-flex</code>’ is a <a
   771    href="#flex-container"><i>flex container</i></a>. Children of a flex
   772    container are called <a href="#flex-item"><i>flex items</i></a> and are
   773    laid out using the flex layout model.
   775   <p> Unlike block and inline layout, whose layout calculations are biased to
   776    the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block
   777    and inline flow directions</a>, flex layout is biased to the <a
   778    href="#flex-flow-property">flex flow</a> directions. To make it easier to
   779    talk about flex layout, this section defines a set of flex flow–relative
   780    terms. The ‘<a href="#flex-flow"><code
   781    class=property>flex-flow</code></a>’ value determines how these terms
   782    map to physical directions (top/right/bottom/left), axes
   783    (vertical/horizontal), and sizes (width/height). <figure> <img alt=alt
   784    height=277 src="images/flex-direction-terms.svg" width=665> <figcaption>
   785    An illustration of the various directions and sizing terms as applied to a
   786    ‘<a href="#flex-flow-row"><code class=css>row</code></a>’ flex
   787    container. </figcaption> </figure>
   789   <dl id=main>
   790    <dt class=axis title="main axis|main-axis">main axis
   792    <dt class=axis>main dimension
   794    <dd> The <dfn id=main-axis>main axis</dfn> of a flex container is the
   795     primary axis along which <a href="#flex-item"><i>flex items</i></a> are
   796     laid out. It extends in the <dfn id=main-dimension>main dimension</dfn>.
   798    <dt class=side>main-start
   800    <dt class=side>main-end
   802    <dd> The <a href="#flex-item"><i>flex items</i></a> are placed within the
   803     container starting on the <dfn id=main-start>main-start</dfn> side and
   804     going toward the <dfn id=main-end>main-end</dfn> side.
   806    <dt class=size>main size
   808    <dt class=size>main size property
   810    <dd> A <a href="#flex-item"><i>flex item</i></a>&apos;s width or height,
   811     whichever is in the <a href="#main-dimension"><i>main dimension</i></a>,
   812     is the item's <dfn id=main-size>main size</dfn>. The <a
   813     href="#flex-item"><i>flex item</i></a>&apos;s <dfn
   814     id=main-size-property>main size property</dfn> is either the ‘<code
   815     class=property>width</code>’ or ‘<code
   816     class=property>height</code>’ property, whichever is in the <a
   817     href="#main-dimension"><i>main dimension</i></a>.
   818   </dl>
   820   <dl id=cross>
   821    <dt class=axis title="cross axis|cross-axis">cross axis
   823    <dt class=axis>cross dimension
   825    <dd> The axis perpendicular to the <a href="#main-axis"><i>main
   826     axis</i></a> is called the <dfn id=cross-axis>cross axis</dfn>. It
   827     extends in the <dfn id=cross-dimension>cross dimension</dfn>.
   829    <dt class=side>cross-start
   831    <dt class=side>cross-end
   833    <dd> <i>Flex lines</i> are filled with items and placed into the container
   834     starting on the <dfn id=cross-start>cross-start</dfn> side of the flex
   835     container and going toward the <dfn id=cross-end>cross-end</dfn> side.
   837    <dt class=size>cross size
   839    <dt class=size>cross size property
   841    <dd> The width or height of a <a href="#flex-item"><i>flex item</i></a>,
   842     whichever is in the <a href="#cross-dimension"><i>cross
   843     dimension</i></a>, is the item's <dfn id=cross-size>cross size</dfn>. The
   844     <dfn id=cross-size-property>cross size property</dfn> is whichever of
   845     ‘<code class=property>width</code>’ or ‘<code
   846     class=property>height</code>’ that is in the <a
   847     href="#cross-dimension"><i>cross dimension</i></a>.
   848   </dl>
   850   <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the <a
   851    href="#display-flex">‘<code class=css>flex</code>’</a> and <a
   852    href="#display-inline-flex">‘<code class=css>inline-flex</code>’</a>
   853    ‘<code class=property>display</code>’ values</h2>
   855   <table class=propdef>
   856    <tbody>
   857     <tr>
   858      <th>Name:
   860      <td>display
   862     <tr>
   863      <th><a href="#values">New value</a>:
   865      <td>flex | inline-flex
   866   </table>
   868   <dl>
   869    <dt><dfn id=display-flex>‘<code class=css>flex</code>’</dfn>
   871    <dd> This value causes an element to generate a block-level <a
   872     href="#flex-container"><i>flex container</i></a> box.
   874    <dt><dfn id=display-inline-flex>‘<code
   875     class=css>inline-flex</code>’</dfn>
   877    <dd> This value causes an element to generate a inline-level <a
   878     href="#flex-container"><i>flex container</i></a> box.
   879   </dl>
   881   <p> A <dfn id=flex-container>flex container</dfn> establishes a new <dfn
   882    id=flex-formatting-context>flex formatting context</dfn> for its contents.
   883    This is the same as establishing a block formatting context, except that
   884    flex layout is used instead of block layout: floats do not intrude into
   885    the flex container, and the flex container's margins do not collapse with
   886    the margins of its contents. <a href="#flex-container"><i>Flex
   887    containers</i></a> form a containing block for their contents <a
   888    href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly
   889    like block containers do</a>. <a href="#CSS21"
   890    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The ‘<code
   891    class=property>overflow</code>’ property applies to <a
   892    href="#flex-container"><i>flex containers</i></a>.
   894   <p> Flex containers are not block containers, and so some properties that
   895    were designed with the assumption of block layout don't apply in the
   896    context of flex layout. In particular:
   898   <ul>
   899    <li> all of the ‘<code class=css>column-*</code>’ properties in the
   900     Multicol module have no effect on a flex container.
   902    <li> ‘<code class=property>float</code>’ and ‘<code
   903     class=property>clear</code>’ have no effect on a <a
   904     href="#flex-item"><i>flex item</i></a>. (However, the ‘<code
   905     class=property>float</code>’ property still affects the computed value
   906     of ‘<code class=property>display</code>’ on children of a flex
   907     container, as this occurs <em title="">before</em> <a
   908     href="#flex-item"><i>flex items</i></a> are determined.)
   910    <li> ‘<code class=property>vertical-align</code>’ has no effect on a
   911     flex item.
   913    <li> the ‘<code class=css>::first-line</code>’ and ‘<code
   914     class=css>::first-letter</code>’ pseudo-elements do not apply to <a
   915     href="#flex-container"><i>flex containers</i></a>.
   916   </ul>
   918   <p> If an element's specified ‘<code class=property>display</code>’ is
   919    ‘<a href="#display-inline-flex"><code
   920    class=css>inline-flex</code></a>’ and the element is floated or
   921    absolutely positioned, the computed value of ‘<code
   922    class=property>display</code>’ is <a href="#display-flex">‘<code
   923    class=css>flex</code>’</a>. The table in <a
   924    href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
   925    9.7</a> is thus amended to contain an additional row, with ‘<a
   926    href="#display-inline-flex"><code class=css>inline-flex</code></a>’ in
   927    the "Specified Value" column and <a href="#display-flex">‘<code
   928    class=css>flex</code>’</a> in the "Computed Value" column.
   930   <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
   932   <p> The contents of a <a href="#flex-container"><i>flex container</i></a>
   933    consists of zero or more <dfn id=flex-item title="flex item">flex
   934    items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex
   935    container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and
   936    each contiguous run of text that is directly contained inside a <a
   937    href="#flex-container"><i>flex container</i></a> is wrapped in an
   938    anonymous <a href="#flex-item"><i>flex item</i></a> element. However, an
   939    anonymous flex item that contains only <a
   940    href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white
   941    space</a> is not rendered, as if it were ‘<code
   942    class=css>display:none</code>’.
   944   <p class=note> Authors reading this spec may want to <a
   945    href="#item-margins">skip past these box-generation details</a>.
   947   <p> A <a href="#flex-item"><i>flex item</i></a> establishes a new
   948    formatting context for its contents. The type of this formatting context
   949    is determined by its ‘<code class=property>display</code>’ value, as
   950    usual. The computed ‘<code class=property>display</code>’ of a <a
   951    href="#flex-item"><i>flex item</i></a> is determined by applying the table
   952    in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1
   953    Chapter 9.7</a>. However, flex items are flex-level boxes, not block-level
   954    boxes: they participate in their container's flex formatting context, not
   955    in a block formatting context.
   957   <p class=note> The ‘<code class=property>display</code>’ computation on
   958    flex items as defined here is expected to be superseded by a future
   959    specification that defines a new ‘<code class=property>display</code>’
   960    value specific to flex items.
   962   <div class=example>
   963    <p>Examples of flex items:
   965    <pre>
   966 &lt;div style="display:flex">
   968     &lt;!-- flex item: block child -->
   969     &lt;div id="item1">block&lt;/div>
   971     &lt;!-- flex item: floated element; floating is ignored -->
   972     &lt;div id="item2" style="float: left;">float&lt;/div>
   974     &lt;!-- flex item: anonymous block box around inline content -->
   975     anonymous item 3
   977     &lt;!-- flex item: inline child -->
   978     &lt;span>
   979         item 4
   980         &lt;!-- flex items do not split around blocks -->
   981         &lt;div id=not-an-item>item 4&lt;/div>
   982         item 4
   983     &lt;/span>
   984 &lt;/div></pre>
   985   </div>
   987   <p> Some values of ‘<code class=property>display</code>’ trigger the
   988    generation of anonymous boxes. For example, a misparented ‘<code
   989    class=css>table-cell</code>’ child is fixed up by <a
   990    href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating
   991    anonymous ‘<code class=css>table</code>’ and ‘<code
   992    class=css>table-row</code>’ elements</a> around it. <a href="#CSS21"
   993    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> This fixup must occur
   994    <em>before</em> a flex container's children are promoted to <a
   995    href="#flex-item"><i>flex items</i></a>. For example, given two contiguous
   996    child elements with ‘<code class=css>display:table-cell</code>’, an
   997    anonymous table wrapper box around them becomes the <a
   998    href="#flex-item"><i>flex item</i></a>.
  1000   <p class=note> Future display types may generate anonymous containers (e.g.
  1001    ruby) or otherwise mangle the box tree (e.g. run-ins). It is intended that
  1002    flex item determination run after these operations.
  1004   <p id=table-items> On a flex item with ‘<code class=css>display:
  1005    table</code>’, the table wrapper box becomes the <a
  1006    href="#flex-item"><i>flex item</i></a>, and the ‘<a href="#order"><code
  1007    class=property>order</code></a>’ and ‘<a href="#align-self"><code
  1008    class=property>align-self</code></a>’ properties apply to it. The
  1009    contents of any caption boxes contribute to the calculation of the table
  1010    wrapper box's min-content and max-content sizes. However, like ‘<code
  1011    class=property>width</code>’ and ‘<code
  1012    class=property>height</code>’, the ‘<a href="#flex"><code
  1013    class=property>flex</code></a>’ longhands apply to the table box as
  1014    follows: the <a href="#flex-item"><i>flex item</i></a>&apos;s final size
  1015    is calculated by performing layout as if the distance between the table
  1016    wrapper box's edges and the table box's content edges were all part of the
  1017    table box's border+padding area, and the table box were the <a
  1018    href="#flex-item"><i>flex item</i></a>.
  1020   <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned
  1021    Flex Children</h3>
  1023   <p> An absolutely-positioned child element of a <a
  1024    href="#flex-container"><i>flex container</i></a> does not participate in
  1025    flex layout beyond the <a href="#algo-flex-order">reordering step</a>.
  1026    However, if both ‘<code class=property>left</code>’ and ‘<code
  1027    class=property>right</code>’ or both ‘<code
  1028    class=property>top</code>’ and ‘<code class=property>bottom</code>’
  1029    are ‘<code class=css>auto</code>’, then the used value of those
  1030    properties are computed from its <dfn id=flex-item-static-position>static
  1031    position</dfn>, as follows:
  1033   <p> If both ‘<code class=property>left</code>’ and ‘<code
  1034    class=property>right</code>’ are ‘<code class=css>auto</code>’, the
  1035    absolutely-positioned child must be positioned so that its <a
  1036    href="#main-start"><i>main-start</i></a> or <a
  1037    href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
  1038    horizontal axis) is aligned with the <a
  1039    href="#flex-item-static-position"><i>static position</i></a>. If both
  1040    ‘<code class=property>top</code>’ and ‘<code
  1041    class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the
  1042    absolutely-positioned child must be positioned so that its <a
  1043    href="#main-start"><i>main-start</i></a> or <a
  1044    href="#cross-start"><i>cross-start</i></a> edge (whichever is in the
  1045    vertical axis) is aligned with the <a
  1046    href="#flex-item-static-position"><i>static position</i></a>.
  1048   <p> In the <a href="#main-axis"><i>main axis</i></a>,
  1050   <ol>
  1051    <li> If the <a href="#flex-container"><i>flex container</i></a> does not
  1052     contain any <a href="#flex-item"><i>flex items</i></a>, the <a
  1053     href="#flex-item-static-position"><i>static position</i></a> is
  1054     determined by the value of ‘<a href="#justify-content"><code
  1055     class=property>justify-content</code></a>’ on the <a
  1056     href="#flex-container"><i>flex container</i></a> as if the <a
  1057     href="#flex-item-static-position"><i>static position</i></a> were
  1058     represented by a single zero-sized <a href="#flex-item"><i>flex
  1059     item</i></a>.
  1061    <li> If there is no preceding flex item or the preceding flex item and the
  1062     subsequent flex item are on the same flex line, the <a
  1063     href="#flex-item-static-position"><i>static position</i></a> is the outer
  1064     <a href="#main-start"><i>main-start</i></a> edge of that <a
  1065     href="#flex-item"><i>flex item</i></a>.
  1067    <li> Otherwise, if there is a preceding <a href="#flex-item"><i>flex
  1068     item</i></a>, the <a href="#flex-item-static-position"><i>static
  1069     position</i></a> is the outer <a href="#main-end"><i>main-end</i></a>
  1070     edge of that <a href="#flex-item"><i>flex item</i></a>.
  1071   </ol>
  1073   <p> In the <a href="#cross-axis"><i>cross axis</i></a>,
  1075   <ol>
  1076    <li> If there is a preceding <a href="#flex-item"><i>flex item</i></a>,
  1077     the <a href="#flex-item-static-position"><i>static position</i></a> is
  1078     the <a href="#cross-start"><i>cross-start</i></a> edge of the
  1079     <i>flex-line</i> that item is in.
  1081    <li> Otherwise, the <a href="#flex-item-static-position"><i>static
  1082     position</i></a> is the <i>cross-start edge</i> of the first <i>flex
  1083     line</i>.
  1084   </ol>
  1086   <p class=note> The static position is intended to more-or-less match the
  1087    position of an anonymous 0×0 in-flow <a href="#align-self">‘<code
  1088    class=css>flex-start</code>’-aligned</a> flex item that participates in
  1089    flex layout, the primary difference being that any packing spaces due to
  1090    ‘<code class=css>justify-content: space-around</code>’ or ‘<code
  1091    class=css>justify-content: space-between</code>’ are suppressed around
  1092    the hypothetical item: between it and the next item if there is a real
  1093    item after it, else between it and the previous item (if any) if there
  1094    isn't.
  1096   <h3 id=item-margins><span class=secno>4.2. </span> Flex Item Margins</h3>
  1098   <p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do
  1099    not collapse. Auto margins absorb extra space in the corresponding
  1100    dimension and can be used for alignment and to push adjacent flex items
  1101    apart; see <a href="#auto-margins">Aligning with ‘<code
  1102    class=css>auto</code>’ margins</a>.
  1104   <h3 id=painting><span class=secno>4.3. </span> Flex Item Z-Ordering</h3>
  1106   <p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as
  1107    block-level elements in the normal flow, except that <a
  1108    href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code
  1109    class=property>z-index</code>’</a> values other than ‘<code
  1110    class=css>auto</code>’ create a stacking context even if ‘<code
  1111    class=property>position</code>’ is ‘<code class=css>static</code>’.
  1113   <p class=note> Note: Descendants that are positioned outside a flex item
  1114    still participate in any stacking context established by the flex item.
  1116   <h3 id=visibility-collapse><span class=secno>4.4. </span> Collapsed Items</h3>
  1118   <p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex
  1119    item causes it to become a <dfn id=collapsed-flex-item
  1120    title="collapsed flex item|collapsed">collapsed flex item</dfn>, producing
  1121    an effect similar to ‘<code class=css>visibility:collapse</code>’ on a
  1122    table-row or table-column: the collapsed element is removed from rendering
  1123    entirely, but leaves behind a "strut" that keeps the flex line's
  1124    cross-size stable. Thus, if a flex container has only one flex line,
  1125    dynamically collapsing or uncollapsing items is guaranteed to have no
  1126    effect on the flex container's <a href="#cross-size"><i>cross size</i></a>
  1127    and won't cause the rest of the page's layout to "wobble". Flex line
  1128    wrapping <em>is</em> re-done after collapsing, however, so the cross-size
  1129    of a flex container with multiple lines might or might not change.
  1131   <p> Though collapsed flex items aren't rendered, they do appear in the <a
  1132    href="http://www.w3.org/TR/CSS21/intro.html#formatting-structure">formatting
  1133    structure</a>. Therefore, unlike on ‘<code
  1134    class=css>display:none</code>’ items <a href="#CSS21"
  1135    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, effects that depend on an
  1136    element appearing in the formatting structure (like incrementing counters
  1137    or running animations and transitions) still operate on collapsed items.
  1139   <div class=example>
  1140    <p>In the following example, a sidebar is sized to fit its content.
  1141     ‘<code class=css>Visibility: collapse</code>’ is used to dynamically
  1142     hide parts of a navigation sidebar without affecting its width, even
  1143     though the widest item (“Architecture”) is in a collapsed section.
  1144     <figure> <figcaption>Sample rendering for example code below</figcaption>
  1146     <div id=visibility-collapse-example>
  1147      <!-- No, don't look at this source code, look at the other source code. -->
  1148      <nav>
  1149      <ul>
  1150       <li id=nav-about><a href="#nav-about">About</a>
  1151        <ul>
  1152         <li><a href="#">History</a>
  1154         <li><a href="#">Mission</a>
  1156         <li><a href="#">People</a>
  1157        </ul>
  1159       <li id=nav-projects><a href="#nav-projects">Projects</a>
  1160        <ul>
  1161         <li><a href="#">Art</a>
  1163         <li><a href="#">Architecture</a>
  1165         <li><a href="#">Music</a>
  1166        </ul>
  1168       <li id=nav-interact><a href="#nav-interact">Interact</a>
  1169        <ul>
  1170         <li><a href="#">Blog</a>
  1172         <li><a href="#">Forums</a>
  1174         <li><a href="#">Events</a>
  1175        </ul>
  1176      </ul>
  1177      </nav> <article> Interesting Stuff to Read </article></div>
  1178     </figure>
  1180    <pre>
  1181 <!--		-->&lt;style>
  1182 <!--		-->  @media (min-width: 60em) {
  1183 <!--		-->    /* <a
  1184     href="http://www.w3.org/TR/css3-mediaqueries/#width">two column layout only when enough room</a> (relative to default text size) */
  1185 <!--		-->    header + div { display: flex; }
  1186 <!--		-->    #main {
  1187 <!--		-->      flex: 1;         /* <a
  1188     href="#flexibility">Main takes up all remaining space</a> */
  1189 <!--		-->      order: 1;        /* <a
  1190     href="#order-property">Place it after (to the right of) the navigation</a> */
  1191 <!--		-->      min-width: 12em; /* <a
  1192     href="#min-size-opt">Optimize main content area sizing</a> */
  1193 <!--		-->    }
  1194 <!--		-->  }
  1195 <!--		-->  /* menu items use flex layout so that visibility:collapse will work */
  1196 <!--		-->  nav > ul > li { 
  1197 <!--		-->    display: flex;
  1198 <!--		-->    flex-flow: column;
  1199 <!--		-->  }
  1200 <!--		-->  /* dynamically collapse submenus when not targetted */
  1201 <!--		-->  nav > ul > li:not(:target):not(:hover) > ul {
  1202 <!--		-->    visibility: collapse;
  1203 <!--		-->  }
  1204 <!--		-->&lt;/style>
  1205 <!--		-->…
  1206 <!--		-->&lt;/header>
  1207 <!--		-->&lt;div>
  1208 <!--		-->  &lt;article id="main">
  1209 <!--		-->    Interesting Stuff to Read
  1210 <!--		-->  &lt;/article>
  1211 <!--		-->  &lt;nav>
  1212 <!--		-->    &lt;ul>
  1213 <!--		-->      &lt;li id="nav-about">&lt;a href="#nav-about">About&lt;/a>
  1214 <!--		-->        …
  1215 <!--		-->      &lt;li id="nav-projects">&lt;a href="#nav-projects">Projects&lt;/a>
  1216 <!--		-->        &lt;ul>
  1217 <!--		-->          &lt;li>&lt;a href="…">Art&lt;/a>
  1218 <!--		-->          &lt;li>&lt;a href="…">Architecture&lt;/a>
  1219 <!--		-->          &lt;li>&lt;a href="…">Music&lt;/a>
  1220 <!--		-->        &lt;/ul>
  1221 <!--		-->      &lt;li id="nav-interact">&lt;a href="#nav-interact">Interact&lt;/a>
  1222 <!--		-->        …
  1223 <!--		-->    &lt;/ul>
  1224 <!--		-->  &lt;/nav>
  1225 <!--		-->&lt;/div>
  1226 <!--		-->&lt;footer>
  1227 <!--		-->…
  1228 </pre>
  1229   </div>
  1231   <p> To compute the size of the strut, flex layout is first performed with
  1232    all items uncollapsed, and then re-run with each collapsed item replaced
  1233    by a strut that maintains the original cross-size of the item's original
  1234    line. See the <a href="#layout-algorithm">Flex Layout Algorithm</a> for
  1235    the normative definition of how ‘<code
  1236    class=css>visibility:collapse</code>’ interacts with flex layout.
  1238   <p class=note> Note that using ‘<code
  1239    class=css>visibility:collapse</code>’ on any flex items will cause the
  1240    flex layout algorithm to repeat partway through, re-running the most
  1241    expensive steps. It's recommended that authors continue to use ‘<code
  1242    class=css>display:none</code>’ to hide items if the items will not be
  1243    dynamically collapsed and uncollapsed, as that is more efficient for the
  1244    layout engine. (Since only part of the steps need to be repeated when
  1245    ‘<code class=property>visibility</code>’ is changed, however, ‘<code
  1246    class=css>visibility: collapse</code>’ is still recommended for dynamic
  1247    cases.)
  1249   <h2 id=flow-order><span class=secno>5. </span> Ordering and Orientation</h2>
  1251   <p> The contents of a flex container can be laid out in any direction and
  1252    in any order. This allows an author to trivially achieve effects that
  1253    would previously have required complex or fragile methods, such as hacks
  1254    using the ‘<code class=property>float</code>’ and ‘<code
  1255    class=property>clear</code>’ properties. This functionality is exposed
  1256    through the ‘<a href="#flex-direction"><code
  1257    class=property>flex-direction</code></a>’, ‘<a href="#flex-wrap"><code
  1258    class=property>flex-wrap</code></a>’, and ‘<a href="#order"><code
  1259    class=property>order</code></a>’ properties.
  1261   <p class=note> The reordering capabilities of flex layout intentionally
  1262    affect <em>only the visual rendering</em>, leaving speech order and
  1263    navigation based on the source order. This allows authors to manipulate
  1264    the visual presentation while leaving the source order intact for non-CSS
  1265    UAs and for linear models such as speech and sequential navigation. See <a
  1266    href="#order-accessibility">Reordering and Accessibility</a> and the <a
  1267    href="#overview">Flex Layout Overview</a> for examples that use this
  1268    dichotomy to improve accessibility.
  1270   <p> Authors <em>must not</em> use these techniques as a substitute for
  1271    correct source ordering, as that can ruin the accessibility of the
  1272    document.
  1274   <h3 id=flex-direction-property><span class=secno>5.1. </span> Flex Flow
  1275    Direction: the ‘<a href="#flex-direction"><code
  1276    class=property>flex-direction</code></a>’ property</h3>
  1278   <table class=propdef>
  1279    <tbody>
  1280     <tr>
  1281      <th>Name:
  1283      <td><dfn id=flex-direction>flex-direction</dfn>
  1285     <tr>
  1286      <th><a href="#values">Value</a>:
  1288      <td>row | row-reverse | column | column-reverse
  1290     <tr>
  1291      <th>Initial:
  1293      <td>row
  1295     <tr>
  1296      <th>Applies to:
  1298      <td>flex containers
  1300     <tr>
  1301      <th>Inherited:
  1303      <td>no
  1305     <tr>
  1306      <th>Computed value:
  1308      <td>specified value
  1310     <tr>
  1311      <th>Media:
  1313      <td>visual
  1315     <tr>
  1316      <th>Animatable:
  1318      <td>no
  1320     <tr>
  1321      <th>Canonical Order:
  1323      <td><abbr title="follows order of property value definition">per
  1324       grammar</abbr>
  1325   </table>
  1327   <p> The ‘<a href="#flex-direction"><code
  1328    class=property>flex-direction</code></a>’ property specifies how <a
  1329    href="#flex-item"><i>flex items</i></a> are placed in the flex container,
  1330    by setting the direction of the flex container's <a
  1331    href="#main-axis"><i>main axis</i></a>. This determines the direction that
  1332    flex items are laid out in.
  1334   <dl>
  1335    <dt><dfn id=flex-flow-row>‘<code class=css>row</code>’</dfn>
  1337    <dd> The flex container's <a href="#main-axis"><i>main axis</i></a> has
  1338     the same orientation as the <a
  1339     href="http://www.w3.org/TR/css3-writing-modes/#inline-axis">inline
  1340     axis</a> of the current <i>writing mode</i>. The <a
  1341     href="#main-start"><i>main-start</i></a> and <a
  1342     href="#main-end"><i>main-end</i></a> directions are equivalent to the <a
  1343     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> and <a
  1344     href="http://www.w3.org/TR/css3-writing-modes/#end">end</a> directions,
  1345     respectively, of the current <i>writing mode</i>.
  1347    <dt><dfn id=flex-flow-row-reverse>‘<code
  1348     class=css>row-reverse</code>’</dfn>
  1350    <dd> Same as ‘<a href="#flex-flow-row"><code
  1351     class=css>row</code></a>’, except the <a
  1352     href="#main-start"><i>main-start</i></a> and <a
  1353     href="#main-end"><i>main-end</i></a> directions are swapped.
  1355    <dt><dfn id=flex-flow-column>‘<code class=css>column</code>’</dfn>
  1357    <dd> The flex container's <a href="#main-axis"><i>main axis</i></a> has
  1358     the same orientation as the <a
  1359     href="http://www.w3.org/TR/css3-writing-modes/#block-axis">block axis</a>
  1360     of the current <i>writing mode</i>. The <a
  1361     href="#main-start"><i>main-start</i></a> and <a
  1362     href="#main-end"><i>main-end</i></a> directions are equivalent to the <a
  1363     href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> and <a
  1364     href="http://www.w3.org/TR/css3-writing-modes/#after">after</a>
  1365     directions, respectively, of the current <i>writing mode</i>.
  1367    <dt><dfn id=flex-flow-column-reverse>‘<code
  1368     class=css>column-reverse</code>’</dfn>
  1370    <dd> Same as ‘<a href="#flex-flow-column"><code
  1371     class=css>column</code></a>’, except the <a
  1372     href="#main-start"><i>main-start</i></a> and <a
  1373     href="#main-end"><i>main-end</i></a> directions are swapped.
  1374   </dl>
  1376   <p class=note> The reverse values do not reverse box ordering; like
  1377    ‘<code class=property>writing-mode</code>’ and ‘<code
  1378    class=property>direction</code>’ <a href="#CSS3-WRITING-MODES"
  1379    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>,
  1380    they only change the direction of flow. Painting order, speech order, and
  1381    sequential navigation orders are not affected.
  1383   <h3 id=flex-wrap-property><span class=secno>5.2. </span> Flex Line
  1384    Wrapping: the ‘<a href="#flex-wrap"><code
  1385    class=property>flex-wrap</code></a>’ property</h3>
  1387   <table class=propdef>
  1388    <tbody>
  1389     <tr>
  1390      <th>Name:
  1392      <td><dfn id=flex-wrap>flex-wrap</dfn>
  1394     <tr>
  1395      <th><a href="#values">Value</a>:
  1397      <td>nowrap | wrap | wrap-reverse
  1399     <tr>
  1400      <th>Initial:
  1402      <td>nowrap
  1404     <tr>
  1405      <th>Applies to:
  1407      <td>flex containers
  1409     <tr>
  1410      <th>Inherited:
  1412      <td>no
  1414     <tr>
  1415      <th>Computed value:
  1417      <td>specified value
  1419     <tr>
  1420      <th>Media:
  1422      <td>visual
  1424     <tr>
  1425      <th>Animatable:
  1427      <td>no
  1429     <tr>
  1430      <th>Canonical Order:
  1432      <td><abbr title="follows order of property value definition">per
  1433       grammar</abbr>
  1434   </table>
  1436   <p> The ‘<a href="#flex-wrap"><code
  1437    class=property>flex-wrap</code></a>’ property controls whether the flex
  1438    container is <a href="#single-line"><i>single-line</i></a> or <a
  1439    href="#multi-line"><i>multi-line</i></a>, and the direction of the
  1440    <i>cross-axis</i>, which determines the direction new lines are stacked
  1441    in.
  1443   <dl>
  1444    <dt><dfn id=flex-flow-nowrap>‘<code class=css>nowrap</code>’</dfn>
  1446    <dd> The flex container is <a href="#single-line"><i>single-line</i></a>.
  1447     The <a href="#cross-start"><i>cross-start</i></a> direction is equivalent
  1448     to either the <a
  1449     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> or
  1450     <i>before</i><!-- <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> -->
  1451     direction of the current <i>writing mode</i>, whichever is in the <a
  1452     href="#cross-axis"><i>cross axis</i></a>, and the <a
  1453     href="#cross-end"><i>cross-end</i></a> direction is the opposite
  1454     direction of <a href="#cross-start"><i>cross-start</i></a>.
  1456    <dt><dfn id=flex-flow-wrap>‘<code class=css>wrap</code>’</dfn>
  1458    <dd> The flex container is <a href="#multi-line"><i>multi-line</i></a>.
  1459     The <a href="#cross-start"><i>cross-start</i></a> direction is equivalent
  1460     to either the <a
  1461     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> or
  1462     <i>before</i><!-- <a href="http://www.w3.org/TR/css3-writing-modes/#before">before</a> -->
  1463     direction of the current <i>writing mode</i>, whichever is in the <a
  1464     href="#cross-axis"><i>cross axis</i></a>, and the <a
  1465     href="#cross-end"><i>cross-end</i></a> direction is the opposite
  1466     direction of <a href="#cross-start"><i>cross-start</i></a>.
  1468    <dt><dfn id=flex-flow-wrap-reverse>‘<code
  1469     class=css>wrap-reverse</code>’</dfn>
  1471    <dd> Same as ‘<a href="#flex-flow-wrap"><code
  1472     class=css>wrap</code></a>’, except the <a
  1473     href="#cross-start"><i>cross-start</i></a> and <a
  1474     href="#cross-end"><i>cross-end</i></a> directions are swapped.
  1475   </dl>
  1477   <h3 id=flex-flow-property><span class=secno>5.3. </span> Flex Direction and
  1478    Wrap: the ‘<a href="#flex-flow"><code
  1479    class=property>flex-flow</code></a>’ shorthand</h3>
  1481   <table class=propdef>
  1482    <tbody>
  1483     <tr>
  1484      <th>Name:
  1486      <td><dfn id=flex-flow>flex-flow</dfn>
  1488     <tr>
  1489      <th><a href="#values">Value</a>:
  1491      <td>&lt;‘<a href="#flex-direction"><code
  1492       class=property>flex-direction</code></a>’> || &lt;‘<a
  1493       href="#flex-wrap"><code class=property>flex-wrap</code></a>’>
  1495     <tr>
  1496      <th>Initial:
  1498      <td>see individual properties
  1500     <tr>
  1501      <th>Applies to:
  1503      <td>flex containers
  1505     <tr>
  1506      <th>Inherited:
  1508      <td>see individual properties
  1510     <tr>
  1511      <th>Computed value:
  1513      <td>see individual properties
  1515     <tr>
  1516      <th>Media:
  1518      <td>visual
  1520     <tr>
  1521      <th>Animatable:
  1523      <td>no
  1525     <tr>
  1526      <th>Canonical Order:
  1528      <td><abbr title="follows order of property value definition">per
  1529       grammar</abbr>
  1530   </table>
  1532   <p>The ‘<a href="#flex-flow"><code class=property>flex-flow</code></a>’
  1533    property is a shorthand for setting the ‘<a href="#flex-direction"><code
  1534    class=property>flex-direction</code></a>’ and ‘<a
  1535    href="#flex-wrap"><code class=property>flex-wrap</code></a>’ properties,
  1536    which together define the flex container's main and cross axes.
  1538   <div class=example>
  1539    <p>Some examples of valid flows in an English (left-to-right, horizontal
  1540     writing mode) document:
  1542    <table
  1543     style="margin: 0 auto; vertical-align: middle; border-spacing: 2em 1em;">
  1544     <tbody>
  1545      <tr>
  1546       <td>
  1547        <pre>
  1548 div { flex-flow: row; }
  1549 /* Initial value. Main-axis is 
  1550    inline, no wrap. */</pre>
  1552       <td><img alt=alt height=46 src="images/flex-flow1.svg" width=205>
  1554      <tr>
  1555       <td>
  1556        <pre>
  1557 div { flex-flow: column wrap; }
  1558 /* Main-axis is block-direction (top to bottom) 
  1559    and lines wrap in the inline direction (rightwards). */</pre>
  1561       <td><img alt=alt height=160 src="images/flex-flow2.svg" width=89>
  1563      <tr>
  1564       <td>
  1565        <pre>
  1566 div { flex-flow: row-reverse wrap-reverse; }
  1567 /* Main-axis is the opposite of inline direction 
  1568    (right to left). New lines wrap upwards. */</pre>
  1570       <td><img alt=alt height=89 src="images/flex-flow3.svg" width=160>
  1571    </table>
  1572   </div>
  1574   <div class=note>
  1575    <p> Note that the ‘<a href="#flex-flow"><code
  1576     class=property>flex-flow</code></a>’ directions are <i>writing-mode</i>
  1577     sensitive. In vertical Japanese, for example, a ‘<a
  1578     href="#flex-flow-row"><code class=css>row</code></a>’ flex container
  1579     lays out its contents from top to bottom, as seen in this example:
  1581    <table style="margin: 1em auto; text-align: center;">
  1582     <thead>
  1583      <tr>
  1584       <th>English
  1586       <th>Japanese
  1588     <tbody>
  1589      <tr>
  1590       <td>
  1591        <pre>flex-flow: row wrap;<br>writing-mode: horizontal-tb;</pre>
  1593       <td>
  1594        <pre>flex-flow: row wrap;<br>writing-mode: vertical-rl;</pre>
  1596      <tr>
  1597       <td><img alt=alt src="images/flex-flow-english.svg">
  1599       <td><img alt=alt src="images/flex-flow-japanese.svg">
  1600    </table>
  1601   </div>
  1603   <h3 id=order-property><span class=secno>5.4. </span> Display Order: the
  1604    ‘<a href="#order"><code class=property>order</code></a>’ property</h3>
  1606   <p> <a href="#flex-item"><i>Flex items</i></a> are, by default, displayed
  1607    and laid out in the same order as they appear in the source document. The
  1608    ‘<a href="#order"><code class=property>order</code></a>’ property can
  1609    be used to change this ordering.
  1611   <table class=propdef>
  1612    <tbody>
  1613     <tr>
  1614      <th>Name:
  1616      <td><dfn id=order>order</dfn>
  1618     <tr>
  1619      <th><a href="#values">Value</a>:
  1621      <td>&lt;integer>
  1623     <tr>
  1624      <th>Initial:
  1626      <td>0
  1628     <tr>
  1629      <th>Applies to:
  1631      <td>flex items and absolutely-positioned flex container children
  1633     <tr>
  1634      <th>Inherited:
  1636      <td>no
  1638     <tr>
  1639      <th>Computed value:
  1641      <td>specified value
  1643     <tr>
  1644      <th>Media:
  1646      <td>visual
  1648     <tr>
  1649      <th>Animatable:
  1651      <td>yes
  1653     <tr>
  1654      <th>Canonical Order:
  1656      <td><abbr title="follows order of property value definition">per
  1657       grammar</abbr>
  1658   </table>
  1660   <p> The ‘<a href="#order"><code class=property>order</code></a>’
  1661    property controls the order in which flex items appear within their flex
  1662    container, by assigning them to ordinal groups.
  1664   <p> A flex container will lay out its content starting from the lowest
  1665    numbered ordinal group and going up. Items with the same ordinal group are
  1666    laid out in the order they appear in the source document. This also
  1667    affects the <a href="http://www.w3.org/TR/CSS2/zindex.html">painting
  1668    order</a> <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
  1669    exactly as if the elements were reordered in the document.
  1671   <div class=example>
  1672    <p>The following figure shows a simple tabbed interface, where the tab for
  1673     the active pane is always first:
  1675    <div class=figure><img alt=alt src="images/flex-order-example.png"></div>
  1677    <p>This could be implemented with the following CSS (showing only the
  1678     relevant code):
  1680    <pre>
  1681 .tabs {
  1682 	display: flex;
  1684 .tabs > * {
  1685 	min-width: min-content;
  1686 	/* Prevent tabs from getting too small for their content. */
  1688 .tabs > .current {
  1689 	order: -1; /* Lower than the default of 0 */
  1690 }</pre>
  1691   </div>
  1693   <p> Unless otherwise specified by a future specification, this property has
  1694    no effect on elements that are not <a href="#flex-item"><i>flex
  1695    items</i></a>. <!--
  1696 	<p class='note'>
  1697 		It is expected that future layout modes like Grid Layout
  1698 		will also use 'order' for similar purposes.
  1699 -->
  1701   <h4 id=order-accessibility><span class=secno>5.4.1. </span> Reordering and
  1702    Accessibility</h4>
  1704   <p> The ‘<a href="#order"><code class=property>order</code></a>’
  1705    property <em>does not</em> affect ordering in non-visual media (such as <a
  1706    href="http://www.w3.org/TR/css3-speech/">speech</a>). Likewise, ‘<a
  1707    href="#order"><code class=property>order</code></a>’ does not affect the
  1708    default traversal order of sequential navigation modes (such as cycling
  1709    through links, see e.g. ‘<code class=property>nav-index</code>’ <a
  1710    href="#CSS3UI" rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> or <a
  1711    href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a>
  1712    <a href="#HTML40" rel=biblioentry>[HTML40]<!--{{HTML40}}--></a>). Authors
  1713    <em>must</em> use ‘<a href="#order"><code
  1714    class=property>order</code></a>’ only for visual, not logical,
  1715    reordering of content; style sheets that use ‘<a href="#order"><code
  1716    class=property>order</code></a>’ to perform logical reordering are
  1717    non-conforming.
  1719   <p class=note> This is so that non-visual media and non-CSS UAs, which
  1720    typically present content linearly, can rely on a logical source order,
  1721    while ‘<a href="#order"><code class=property>order</code></a>’ is used
  1722    to tailor the visual order. (Since visual perception is two-dimensional
  1723    and non-linear, the desired visual order is not always logical.)
  1725   <div class=example>
  1726    <p> Many web pages have a similar shape in the markup, with a header on
  1727     top, a footer on bottom, and then a content area and one or two
  1728     additional columns in the middle. Generally, it's desirable that the
  1729     content come first in the page's source code, before the additional
  1730     columns. However, this makes many common designs, such as simply having
  1731     the additional columns on the left and the content area on the right,
  1732     difficult to achieve. This has been addressed in many ways over the
  1733     years, often going by the name "Holy Grail Layout" when there are two
  1734     additional columns. ‘<a href="#order"><code
  1735     class=property>order</code></a>’ makes this trivial. For example, take
  1736     the following sketch of a page's code and desired layout:
  1738    <div class=code-and-figure>
  1739     <div>
  1740      <pre>
  1741 &lt;!DOCTYPE html>
  1742 &lt;header>...&lt;/header>
  1743 &lt;div id='main'>
  1744    &lt;article>...&lt;/article>
  1745    &lt;nav>...&lt;/nav>
  1746    &lt;aside>...&lt;/aside>
  1747 &lt;/div>
  1748 &lt;footer>...&lt;/footer></pre>
  1749     </div>
  1751     <div><img
  1752      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."
  1753      height=360 src="images/flex-order-page.svg" width=400></div>
  1754    </div>
  1756    <p> This layout can be easily achieved with flex layout:
  1758    <pre>
  1759 #main { display: flex; }
  1760 #main > article { order: 2; min-width: 12em; flex:1; }
  1761 #main > nav     { order: 1; width: 200px; }
  1762 #main > aside   { order: 3; width: 200px; }</pre>
  1764    <p> As an added bonus, the columns will all be <a
  1765     href="#align-stretch">equal-height</a> by default, and the main content
  1766     will be as wide as necessary to fill the screen. Additionally, this can
  1767     then be combined with media queries to switch to an all-vertical layout
  1768     on narrow screens:
  1770    <pre>
  1771 @media all and (max-width: 600px) {
  1772 	/* Too narrow to support three columns */
  1773 	#main { flex-flow: column; }
  1774 	#main > article, #main > nav, #main > aside {
  1775 		/* Return them to document order */
  1776 		order: 0; width: auto;
  1778 }</pre>
  1780    <p><small>(Further use of multi-line flex containers to achieve even more
  1781     intelligent wrapping left as an exercise for the reader.)</small>
  1782   </div>
  1784   <h2 id=flex-lines><span class=secno>6. </span> Flex Lines</h2>
  1786   <p> A flex container can be either <a
  1787    href="#single-line"><i>single-line</i></a> or <a
  1788    href="#multi-line"><i>multi-line</i></a>, depending on the ‘<a
  1789    href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property:
  1791   <ul>
  1792    <li> A <dfn id=single-line>single-line</dfn> flex container lays out all
  1793     of its children in a single line, even if that would cause its contents
  1794     to overflow.
  1796    <li> A <dfn id=multi-line>multi-line</dfn> flex container breaks its <a
  1797     href="#flex-item"><i>flex items</i></a> across multiple lines, similar to
  1798     how text is broken onto a new line when it gets too wide to fit on the
  1799     existing line. When additional lines are created, they are stacked in the
  1800     flex container along the <a href="#cross-axis"><i>cross axis</i></a>
  1801     according to the ‘<a href="#flex-wrap"><code
  1802     class=property>flex-wrap</code></a>’ property. Every line contains at
  1803     least one <a href="#flex-item"><i>flex item</i></a>, unless the flex
  1804     container itself is completely empty.
  1805   </ul>
  1807   <div class=example>
  1808    <p> This example shows four buttons that do not fit horizontally.
  1810    <pre>&lt;style>
  1811 #flex {
  1812 	display: flex;
  1813 	flex-flow: row wrap;
  1814 	width: 300px;
  1816 .item {
  1817 	width: 80px;
  1819 &lt;/style>
  1821 &lt;div id="flex">
  1822 	&lt;div class='item'>1&lt;/div>
  1823 	&lt;div class='item'>2&lt;/div>
  1824 	&lt;div class='item'>3&lt;/div>
  1825 	&lt;div class='item'>4&lt;/div>
  1826 &lt;/div></pre>
  1828    <p> Since the container is 300px wide, only three of the items fit onto a
  1829     single line. They take up 240px, with 60px left over of remaining space.
  1830     Because the ‘<a href="#flex-flow"><code
  1831     class=property>flex-flow</code></a>’ property specifies a <a
  1832     href="#multi-line"><i>multi-line</i></a> flex container (due to the ‘<a
  1833     href="#flex-flow-wrap"><code class=css>wrap</code></a>’ keyword
  1834     appearing in its value), the flex container will create an additional
  1835     line to contain the last item. <figure> <img
  1836     src="images/multiline-no-flex.svg"> <figcaption> An example rendering of
  1837     the multi-line flex container. </figcaption> </figure>
  1838   </div>
  1840   <p> Once content is broken into lines, each line is laid out independently;
  1841    flexible lengths and the ‘<a href="#justify-content"><code
  1842    class=property>justify-content</code></a>’ and ‘<a
  1843    href="#align-self"><code class=property>align-self</code></a>’
  1844    properties only consider the items on a single line at a time.
  1846   <p> When a flex container has multiple lines, the <a
  1847    href="#cross-size"><i>cross size</i></a> of each line is the minimum size
  1848    necessary to contain the <a href="#flex-item"><i>flex items</i></a> on the
  1849    line (after aligment due to ‘<a href="#align-self"><code
  1850    class=property>align-self</code></a>’), and the lines are aligned within
  1851    the flex container with the ‘<a href="#align-content"><code
  1852    class=property>align-content</code></a>’ property. When a flex container
  1853    (even a <a href="#multi-line"><i>multi-line</i></a> one) has only one
  1854    line, the <a href="#cross-size"><i>cross size</i></a> of the line is the
  1855    <a href="#cross-size"><i>cross size</i></a> of the flex container, and
  1856    ‘<a href="#align-content"><code
  1857    class=property>align-content</code></a>’ has no effect. The <a
  1858    href="#main-size"><i>main size</i></a> of a line is always the same as the
  1859    <a href="#main-size"><i>main size</i></a> of the flex container's content
  1860    box.
  1862   <div class=example>
  1863    <p> Here's the same example as the previous, except that the flex items
  1864     have all been given ‘<code class=css>flex: auto</code>’. The first
  1865     line has 60px of remaining space, and all of the items have the same
  1866     flexibility, so each of the three items on that line will receives 20px
  1867     of extra width, ending up 100px wide. The remaining item is on a line of
  1868     its own and will stretch to the entire width of the line, or 300px.
  1869     <figure> <img src="images/multiline-flex.svg"> <figcaption> A rendering
  1870     of the same as above, but with the items all given ‘<code
  1871     class=css>flex: auto</code>’. </figcaption> </figure>
  1872   </div>
  1874   <h2 id=flexibility><span class=secno>7. </span> Flexibility</h2>
  1876   <p> The defining aspect of flex layout is the ability to make the <a
  1877    href="#flex-item"><i>flex items</i></a> "flex", altering their width or
  1878    height to fill the available space. This is done with the ‘<a
  1879    href="#flex"><code class=property>flex</code></a>’ property. A flex
  1880    container distributes free space to its items proportional to their <a
  1881    href="#flex-grow-factor"><i>flex grow factor</i></a>, or shrinks them to
  1882    prevent overflow proportional to their <a
  1883    href="#flex-shrink-factor"><i>flex shrink factor</i></a>.
  1885   <h3 id=flex-property><span class=secno>7.1. </span> The ‘<a
  1886    href="#flex"><code class=property>flex</code></a>’ Shorthand</h3>
  1888   <table class=propdef>
  1889    <tbody>
  1890     <tr>
  1891      <th>Name:
  1893      <td><dfn id=flex>flex</dfn>
  1895     <tr>
  1896      <th><a href="#values">Value</a>:
  1898      <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
  1899       &lt;&apos;flex-basis&apos;> ]
  1901     <tr>
  1902      <th>Initial:
  1904      <td>see individual properties
  1906     <tr>
  1907      <th>Applies to:
  1909      <td>flex items
  1911     <tr>
  1912      <th>Inherited:
  1914      <td>see individual properties
  1916     <tr>
  1917      <th>Computed value:
  1919      <td>see individual properties
  1921     <tr>
  1922      <th>Media:
  1924      <td>visual
  1926     <tr>
  1927      <th>Animatable:
  1929      <td>see individual properties
  1931     <tr>
  1932      <th>Canonical Order:
  1934      <td>per grammar
  1935   </table>
  1937   <p> The ‘<a href="#flex"><code class=property>flex</code></a>’ property
  1938    specifies the components of a <dfn id=flexible-length
  1939    title="flexible length|flexible length's">flexible length</dfn>: the <a
  1940    href="#flex-grow-factor"><i>flex grow factor</i></a> and <a
  1941    href="#flex-shrink-factor"><i>flex shrink factor</i></a>, and the <a
  1942    href="#flex-basis"><i>flex basis</i></a>. When an element is a <a
  1943    href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code
  1944    class=property>flex</code></a>’ is consulted <em>instead of</em> the <a
  1945    href="#main-size-property"><i>main size property</i></a> to determine the
  1946    <a href="#main-size"><i>main size</i></a> of the element. If an element is
  1947    not a <a href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code
  1948    class=property>flex</code></a>’ has no effect.
  1950   <dl>
  1951    <dt><var>&lt;‘<a href="#flex-grow"><code
  1952     class=property>flex-grow</code></a>’></var>
  1954    <dd>
  1955     <p> This <var>&lt;number></var> component sets ‘<a
  1956      href="#flex-grow"><code class=property>flex-grow</code></a>’ <a
  1957      href="#flex-components">longhand</a> and specifies the <dfn
  1958      id=flex-grow-factor>flex grow factor</dfn>, which determines how much
  1959      the <a href="#flex-item"><i>flex item</i></a> will grow relative to the
  1960      rest of the <a href="#flex-item"><i>flex items</i></a> in the flex
  1961      container when positive free space is distributed. When omitted, it is
  1962      set to ‘<code class=css>1</code>’.
  1964    <dt><var>&lt;‘<a href="#flex-shrink"><code
  1965     class=property>flex-shrink</code></a>’></var>
  1967    <dd>
  1968     <p> This <var>&lt;number></var> component sets ‘<a
  1969      href="#flex-shrink"><code class=property>flex-shrink</code></a>’ <a
  1970      href="#flex-components">longhand</a> and specifies the <dfn
  1971      id=flex-shrink-factor>flex shrink factor</dfn>, which determines how
  1972      much the <a href="#flex-item"><i>flex item</i></a> will shrink relative
  1973      to the rest of the <a href="#flex-item"><i>flex items</i></a> in the
  1974      flex container when negative free space is distributed. When omitted, it
  1975      is set to ‘<code class=css>1</code>’. The <a
  1976      href="#flex-shrink-factor"><i>flex shrink factor</i></a> is multiplied
  1977      by the <a href="#flex-basis"><i>flex basis</i></a> when distributing
  1978      negative space.
  1980    <dt><var>&lt;‘<a href="#flex-basis-propdef"><code
  1981     class=property>flex-basis</code></a>’></var>
  1983    <dd>
  1984     <p> This component, which takes the same values as the ‘<code
  1985      class=property>width</code>’ property, sets the ‘<a
  1986      href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
  1987      <a href="#flex-components">longhand</a> and specifies the <dfn
  1988      id=flex-basis>flex basis</dfn>: the initial <a href="#main-size"><i>main
  1989      size</i></a> of the <a href="#flex-item"><i>flex item</i></a>, before
  1990      free space is distributed according to the flex factors. When omitted
  1991      from the ‘<a href="#flex"><code class=property>flex</code></a>’
  1992      shorthand, its specified value is the length zero.
  1994     <p> If the specified ‘<a href="#flex-basis-propdef"><code
  1995      class=property>flex-basis</code></a>’ is <a
  1996      href="#flex-basis-auto">‘<code class=css>auto</code>’</a>, the used
  1997      <a href="#flex-basis"><i>flex basis</i></a> is the value of the
  1998      element's <a href="#main-size-property"><i>main size property</i></a>.
  1999      (This can itself be the keyword ‘<code class=css>auto</code>’, which
  2000      sizes the element based on its contents.) <figure> <img height=240
  2001      src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram
  2002      showing the difference between "absolute" flex (starting from a basis of
  2003      zero) and "relative" flex (starting from a basis of the item's content
  2004      size). The three items have flex factors of ‘<code
  2005      class=css>1</code>’, ‘<code class=css>1</code>’, and ‘<code
  2006      class=css>2</code>’, respectively. </figcaption> </figure>
  2008    <dt><dfn id=flex-none>‘<code class=css>none</code>’</dfn>
  2010    <dd>
  2011     <p>The keyword ‘<a href="#flex-none"><code
  2012      class=property>none</code></a>’ computes to ‘<code class=css>0 0
  2013      auto</code>’.
  2014   </dl>
  2016   <p> The initial values of the ‘<a href="#flex"><code
  2017    class=property>flex</code></a>’ components are equivalent to <a
  2018    href="#flex-initial">‘<code class=css>flex: 0 1 auto</code>’</a>.
  2020   <p class=note> Note that the initial values of ‘<a
  2021    href="#flex-grow"><code class=property>flex-grow</code></a>’ and ‘<a
  2022    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
  2023    are different from their defaults when omitted in the ‘<a
  2024    href="#flex"><code class=property>flex</code></a>’ shorthand. This so
  2025    that the ‘<a href="#flex"><code class=property>flex</code></a>’
  2026    shorthand can better accommodate the most <a href="#flex-common">common
  2027    cases</a>.
  2029   <p> A unitless zero that is not already preceded by two flex factors must
  2030    be interpreted as a flex factor. To avoid misinterpretation or invalid
  2031    declarations, authors must specify a zero <var>&lt;flex-basis></var>
  2032    component with a unit or precede it by two flex factors.
  2034   <h3 id=flex-common><span class=secno>7.2. </span> Common Values of ‘<a
  2035    href="#flex"><code class=property>flex</code></a>’</h3>
  2037   <p><em>This section is informative.</em>
  2039   <p> The list below summarizes the effects of the most common ‘<a
  2040    href="#flex"><code class=property>flex</code></a>’ values:
  2042   <dl>
  2043    <dt id=flex-initial>‘<code class=css>flex: 0 auto</code>’
  2045    <dt>‘<code class=css>flex: initial</code>’
  2047    <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. (This is
  2048     the initial value.) Sizes the item based on the ‘<code
  2049     class=property>width</code>’/‘<code class=property>height</code>’
  2050     properties. (If the item's <a href="#main-size-property"><i>main size
  2051     property</i></a> computes to ‘<code class=css>auto</code>’, this will
  2052     size the flex item based on its contents.) Makes the flex item inflexible
  2053     when there is positive free space, but allows it to shrink to its
  2054     min-size when there is insufficient space. The <a
  2055     href="#alignment">alignment abilities</a> or <a
  2056     href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be
  2057     used to align flex items along the <a href="#main-axis"><i>main
  2058     axis</i></a>.
  2060    <dt>‘<code class=css>flex: auto</code>’
  2062    <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. Sizes the
  2063     item based on the ‘<code class=property>width</code>’/‘<code
  2064     class=property>height</code>’ properties, but makes them fully
  2065     flexible, so that they absorb any free space along the <a
  2066     href="#main-axis"><i>main axis</i></a>. If all items are either ‘<code
  2067     class=css>flex: auto</code>’, ‘<code class=css>flex:
  2068     initial</code>’, or ‘<code class=css>flex: none</code>’, any
  2069     positive free space after the items have been sized will be distributed
  2070     evenly to the items with ‘<code class=css>flex: auto</code>’.
  2072    <dt>‘<code class=css>flex: none</code>’
  2074    <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value
  2075     sizes the item according to the ‘<code
  2076     class=property>width</code>’/‘<code class=property>height</code>’
  2077     properties, but makes the flex item fully inflexible. This is similar to
  2078     <a href="#flex-initial">‘<code class=css>initial</code>’</a>, except
  2079     that flex items are not allowed to shrink, even in overflow situations.
  2081    <dt>‘<code class=css>flex: &lt;positive-number></code>’
  2083    <dd> Equivalent to ‘<code class=css>flex: &lt;positive-number> 1
  2084     0px</code>’. Makes the flex item flexible and sets the <a
  2085     href="#flex-basis"><i>flex basis</i></a> to zero, resulting in an item
  2086     that receives the specified proportion of the free space in the flex
  2087     container. If all items in the flex container use this pattern, their
  2088     sizes will be proportional to the specified flex factor.
  2089   </dl>
  2091   <div class=note> Note that, because flex items typically can shrink, it is
  2092    often recommended that a minimum main size be set (with ‘<code
  2093    class=property>min-width</code>’ or ‘<code
  2094    class=property>min-height</code>’) to prevent them from shrinking too
  2095    small to fit their contents. This problem is especially common with
  2096    horizontal navigation or toolbars.
  2097    <pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
  2098   </div>
  2100   <h3 id=flex-components><span class=secno>7.3. </span> Components of
  2101    Flexibility</h3>
  2103   <p> Individual components of flexibility can be controlled by independent
  2104    longhand properties.
  2106   <p class=note> Authors are encouraged to control flexibility using the
  2107    ‘<a href="#flex"><code class=property>flex</code></a>’ shorthand
  2108    rather than with component properties, as the shorthand correctly resets
  2109    any unspecified components to accommodate <a href="#flex-common">common
  2110    uses</a>.
  2112   <h4 id=flex-grow-property><span class=secno>7.3.1. </span> The ‘<a
  2113    href="#flex-grow"><code class=property>flex-grow</code></a>’ property</h4>
  2115   <table class=propdef>
  2116    <tbody>
  2117     <tr>
  2118      <th>Name:
  2120      <td><dfn id=flex-grow>flex-grow</dfn>
  2122     <tr>
  2123      <th><a href="#values">Value</a>:
  2125      <td>&lt;number>
  2127     <tr>
  2128      <th>Initial:
  2130      <td>0
  2132     <tr>
  2133      <th>Applies to:
  2135      <td>flex items
  2137     <tr>
  2138      <th>Inherited:
  2140      <td>no
  2142     <tr>
  2143      <th>Computed value:
  2145      <td>specified value
  2147     <tr>
  2148      <th>Media:
  2150      <td>visual
  2152     <tr>
  2153      <th>Animatable:
  2155      <td>yes, except between ‘<code class=css>0</code>’ and other values
  2157     <tr>
  2158      <th>Canonical Order:
  2160      <td><abbr title="follows order of property value definition">per
  2161       grammar</abbr>
  2162   </table>
  2164   <p> The ‘<a href="#flex-grow"><code
  2165    class=property>flex-grow</code></a>’ property sets the <a
  2166    href="#flex-grow-factor"><i>flex grow factor</i></a>. Negative numbers are
  2167    invalid.
  2169   <h4 id=flex-shrink-property><span class=secno>7.3.2. </span> The ‘<a
  2170    href="#flex-shrink"><code class=property>flex-shrink</code></a>’
  2171    property</h4>
  2173   <table class=propdef>
  2174    <tbody>
  2175     <tr>
  2176      <th>Name:
  2178      <td><dfn id=flex-shrink>flex-shrink</dfn>
  2180     <tr>
  2181      <th><a href="#values">Value</a>:
  2183      <td>&lt;number>
  2185     <tr>
  2186      <th>Initial:
  2188      <td>1
  2190     <tr>
  2191      <th>Applies to:
  2193      <td>flex items
  2195     <tr>
  2196      <th>Inherited:
  2198      <td>no
  2200     <tr>
  2201      <th>Computed value:
  2203      <td>specified value
  2205     <tr>
  2206      <th>Media:
  2208      <td>visual
  2210     <tr>
  2211      <th>Animatable:
  2213      <td>yes, except between ‘<code class=css>0</code>’ and other values
  2215     <tr>
  2216      <th>Canonical Order:
  2218      <td><abbr title="follows order of property value definition">per
  2219       grammar</abbr>
  2220   </table>
  2222   <p> The ‘<a href="#flex-shrink"><code
  2223    class=property>flex-shrink</code></a>’ property sets the <a
  2224    href="#flex-shrink-factor"><i>flex shrink factor</i></a>. Negative numbers
  2225    are invalid.
  2227   <h4 id=flex-basis-property><span class=secno>7.3.3. </span> The ‘<a
  2228    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
  2229    property</h4>
  2231   <table class=propdef>
  2232    <tbody>
  2233     <tr>
  2234      <th>Name:
  2236      <td><dfn id=flex-basis-propdef>flex-basis</dfn>
  2238     <tr>
  2239      <th><a href="#values">Value</a>:
  2241      <td><var>&lt;&apos;width&apos;></var>
  2243     <tr>
  2244      <th>Initial:
  2246      <td>auto
  2248     <tr>
  2249      <th>Applies to:
  2251      <td>flex items
  2253     <tr>
  2254      <th>Inherited:
  2256      <td>no
  2258     <tr>
  2259      <th>Computed value:
  2261      <td>as specified, with lengths made absolute
  2263     <tr>
  2264      <th>Percentages:
  2266      <td>relative to the flex container's inner <a href="#main-size"><i>main
  2267       size</i></a>
  2269     <tr>
  2270      <th>Media:
  2272      <td>visual
  2274     <tr>
  2275      <th>Animatable:
  2277      <td>yes, insofar as ‘<code class=property>width</code>’ is
  2278       animatable
  2280     <tr>
  2281      <th>Canonical Order:
  2283      <td><abbr title="follows order of property value definition">per
  2284       grammar</abbr>
  2285   </table>
  2287   <p> The ‘<a href="#flex-basis-propdef"><code
  2288    class=property>flex-basis</code></a>’ property sets the <a
  2289    href="#flex-basis"><i>flex basis</i></a>. Negative lengths are invalid.
  2291   <p> Except for <dfn id=flex-basis-auto title="flex-basis: auto">‘<code
  2292    class=css>auto</code>’</dfn>, which retrieves the value of the <a
  2293    href="#main-size-property"><i>main size property</i></a>, ‘<a
  2294    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
  2295    is resolved the same way as <a
  2296    href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">‘<code
  2297    class=property>width</code>’</a> in horizontal writing modes <a
  2298    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>: percentage
  2299    values of ‘<a href="#flex-basis-propdef"><code
  2300    class=property>flex-basis</code></a>’ are resolved against the flex
  2301    item's containing block, i.e. its flex container, and if that containing
  2302    block's size is indefinite, the result is undefined. Similarly, ‘<a
  2303    href="#flex-basis-propdef"><code class=property>flex-basis</code></a>’
  2304    determines the size of the content box, unless otherwise specified such as
  2305    by ‘<code class=property>box-sizing</code>’ <a href="#CSS3UI"
  2306    rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>.
  2308   <h2 id=alignment><span class=secno>8. </span> Alignment</h2>
  2310   <p> After a flex container's contents have finished their flexing and the
  2311    dimensions of all flex items are finalized, they can then be aligned
  2312    within the flex container.
  2314   <p> The ‘<code class=property>margin</code>’ properties can be used to
  2315    align items in a manner similar to, but more powerful than, what margins
  2316    can do in block layout. <a href="#flex-item"><i>Flex items</i></a> also
  2317    respect the alignment properties from the Box Alignment spec, which allow
  2318    easy keyword-based alignment of items in both the <a
  2319    href="#main-axis"><i>main axis</i></a> and <a href="#cross-axis"><i>cross
  2320    axis</i></a>. These properties make many common types of alignment
  2321    trivial, including some things that were very difficult in CSS 2.1, like
  2322    horizontal and vertical centering.
  2324   <p class=note> While the alignment properties are defined in the Box
  2325    Alignment spec, Flexible Box Layout reproduces the definitions of the
  2326    relevant ones here so as to not create a normative dependency that may
  2327    slow down advancement of the spec. These properties apply only to flex
  2328    layout until Box Alignment is finished and defines their effect for other
  2329    layout modes.
  2331   <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code
  2332    class=css>auto</code>’ margins</h3>
  2334   <p> <em>This section is non-normative. The normative definition of how
  2335    margins affect flex items is in the <a href="#layout-algorithm">Flex
  2336    Layout Algorithm</a> section.</em>
  2338   <p> Auto margins on flex items have an effect very similar to auto margins
  2339    in block flow:
  2341   <ul>
  2342    <li> During calculations of flex bases and flexible lengths, auto margins
  2343     are treated as ‘<code class=css>0</code>’.
  2345    <li> Prior to alignment via ‘<a href="#justify-content"><code
  2346     class=property>justify-content</code></a>’ and ‘<a
  2347     href="#align-self"><code class=property>align-self</code></a>’, any
  2348     positive free space is distributed to auto margins in that dimension.
  2350    <li> Overflowing elements ignore their auto margins and overflow in the
  2351     <i>end</i>/<i>after</i> direction.
  2352   </ul>
  2354   <p class=note> Note that, if free space is distributed to auto margins, the
  2355    alignment properties will have no effect in that dimension because the
  2356    margins will have stolen all the free space left over after flexing.
  2358   <div class=example>
  2359    <p> One use of ‘<code class=css>auto</code>’ margins in the main axis
  2360     is to separate flex items into distinct "groups". The following example
  2361     shows how to use this to reproduce a common UI pattern - a single bar of
  2362     actions with some aligned on the left and others aligned on the right.
  2363     <figure> <figcaption> Sample rendering of the code below. </figcaption>
  2364     <ul id=auto-bar>
  2365      <li><a href="#">About</a>
  2367      <li><a href="#">Projects</a>
  2369      <li><a href="#">Interact</a>
  2371      <li id=login><a href="#">Login</a>
  2372     </ul>
  2373     </figure>
  2375    <pre>
  2376 &lt;style>
  2377 nav > ul {
  2378 	display: flex;
  2380 nav > ul > li {
  2381 	min-width: min-content;
  2382 	/* Prevent items from getting too small for their content. */
  2384 nav > ul > #login {
  2385 	margin-left: auto;
  2387 &lt;/style>
  2388 &lt;nav>
  2389 	&lt;ul>
  2390 		&lt;li>&lt;a href=/about>About&lt;/a>
  2391 		&lt;li>&lt;a href=/projects>Projects&lt;/a>
  2392 		&lt;li>&lt;a href=/interact>Interact&lt;/a>
  2393 		&lt;li id='login'>&lt;a href=/login>Login&lt;/a>
  2394 	&lt;/ul>
  2395 &lt;/nav></pre>
  2396   </div>
  2398   <div class=example>
  2399    <p> The figure below illustrates the difference in cross-axis alignment in
  2400     overflow situations between using <a href="#auto-margins">‘<code
  2401     class=css>auto</code>’ margins</a> and using the <a
  2402     href="#align-items-property">alignment properties</a>. <figure>
  2403     <div style="display:table; margin: 0 auto 1em;">
  2404      <div class=cross-auto-figure
  2405       style="display:table-cell; padding-right: 50px;">
  2406       <div>
  2407        <div>About</div>
  2409        <div>Authoritarianism</div>
  2411        <div>Blog</div>
  2412       </div>
  2413      </div>
  2415      <div class=cross-auto-figure
  2416       style="display:table-cell; padding-left: 50px;">
  2417       <div>
  2418        <div>About</div>
  2420        <div style="margin-left: -31px;">Authoritarianism</div>
  2422        <div>Blog</div>
  2423       </div>
  2424      </div>
  2425     </div>
  2426     <figcaption> The items in the figure on the left are centered with
  2427     margins, while those in the figure on the right are centered with ‘<a
  2428     href="#align-self"><code class=property>align-self</code></a>’. If this
  2429     column flex container was placed against the left edge of the page, the
  2430     margin behavior would be more desirable, as the long item would be fully
  2431     readable. In other circumstances, the true centering behavior might be
  2432     better. </figcaption> </figure>
  2433   </div>
  2435   <h3 id=justify-content-property><span class=secno>8.2. </span> Axis
  2436    Alignment: the ‘<a href="#justify-content"><code
  2437    class=property>justify-content</code></a>’ property</h3>
  2439   <table class=propdef>
  2440    <tbody>
  2441     <tr>
  2442      <th>Name:
  2444      <td><dfn id=justify-content>justify-content</dfn>
  2446     <tr>
  2447      <th><a href="#values">Value</a>:
  2449      <td>flex-start | flex-end | center | space-between | space-around
  2451     <tr>
  2452      <th>Initial:
  2454      <td>flex-start
  2456     <tr>
  2457      <th>Applies to:
  2459      <td>flex containers
  2461     <tr>
  2462      <th>Inherited:
  2464      <td>no
  2466     <tr>
  2467      <th>Computed value:
  2469      <td>specified value
  2471     <tr>
  2472      <th>Media:
  2474      <td>visual
  2476     <tr>
  2477      <th>Animatable:
  2479      <td>no
  2481     <tr>
  2482      <th>Canonical Order:
  2484      <td><abbr title="follows order of property value definition">per
  2485       grammar</abbr>
  2486   </table>
  2488   <p> The ‘<a href="#justify-content"><code
  2489    class=property>justify-content</code></a>’ property aligns <a
  2490    href="#flex-item"><i>flex items</i></a> along the <a
  2491    href="#main-axis"><i>main axis</i></a> of the current line of the flex
  2492    container. This is done <em title="">after</em> any flexible lengths and
  2493    any <a href="#auto-margins">auto margins</a> have been resolved. Typically
  2494    it helps distribute extra free space leftover when either all the <a
  2495    href="#flex-item"><i>flex items</i></a> on a line are inflexible, or are
  2496    flexible but have reached their maximum size. It also exerts some control
  2497    over the alignment of items when they overflow the line.
  2499   <dl>
  2500    <dt><dfn id=justify-flex-start>‘<code
  2501     class=css>flex-start</code>’</dfn>
  2503    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the
  2504     start of the line. The <a href="#main-start"><i>main-start</i></a> margin
  2505     edge of the first <a href="#flex-item"><i>flex item</i></a> on the line
  2506     is placed flush with the <a href="#main-start"><i>main-start</i></a> edge
  2507     of the line, and each subsequent <a href="#flex-item"><i>flex
  2508     item</i></a> is placed flush with the preceding item.
  2510    <dt><dfn id=justify-flex-end>‘<code class=css>flex-end</code>’</dfn>
  2512    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the end
  2513     of the line. The <a href="#main-end"><i>main-end</i></a> margin edge of
  2514     the last <a href="#flex-item"><i>flex item</i></a> is placed flush with
  2515     the <a href="#main-end"><i>main-end</i></a> edge of the line, and each
  2516     preceding <a href="#flex-item"><i>flex item</i></a> is placed flush with
  2517     the subsequent item.
  2519    <dt><dfn id=justify-center>‘<code class=css>center</code>’</dfn>
  2521    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the
  2522     center of the line. The <a href="#flex-item"><i>flex items</i></a> on the
  2523     line are placed flush with each other and aligned in the center of the
  2524     line, with equal amounts of empty space between the <a
  2525     href="#main-start"><i>main-start</i></a> edge of the line and the first
  2526     item on the line and between the <a href="#main-end"><i>main-end</i></a>
  2527     edge of the line and the last item on the line. (If the leftover
  2528     free-space is negative, the <a href="#flex-item"><i>flex items</i></a>
  2529     will overflow equally in both directions.)
  2531    <dt><dfn id=justify-space-between>‘<code
  2532     class=css>space-between</code>’</dfn>
  2534    <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in
  2535     the line. If the leftover free-space is negative or there is only a
  2536     single <a href="#flex-item"><i>flex item</i></a> on the line, this value
  2537     is identical to <a href="#justify-flex-start">‘<code
  2538     class=css>flex-start</code>’</a>. Otherwise, the <a
  2539     href="#main-start"><i>main-start</i></a> margin edge of the first <a
  2540     href="#flex-item"><i>flex item</i></a> on the line is placed flush with
  2541     the <a href="#main-start"><i>main-start</i></a> edge of the line, the <a
  2542     href="#main-end"><i>main-end</i></a> margin edge of the last <a
  2543     href="#flex-item"><i>flex item</i></a> on the line is placed flush with
  2544     the <a href="#main-end"><i>main-end</i></a> edge of the line, and the
  2545     remaining <a href="#flex-item"><i>flex items</i></a> on the line are
  2546     distributed so that the empty space between any two adjacent items is the
  2547     same.
  2549    <dt><dfn id=justify-space-around>‘<code
  2550     class=css>space-around</code>’</dfn>
  2552    <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in
  2553     the line, with half-size spaces on either end. If the leftover free-space
  2554     is negative or there is only a single <a href="#flex-item"><i>flex
  2555     item</i></a> on the line, this value is identical to <a
  2556     href="#justify-center">‘<code class=css>center</code>’</a>.
  2557     Otherwise, the <a href="#flex-item"><i>flex items</i></a> on the line are
  2558     distributed such that the empty space between any two adjacent <a
  2559     href="#flex-item"><i>flex items</i></a> on the line is the same, and the
  2560     empty space before the first and after the last <a
  2561     href="#flex-item"><i>flex items</i></a> on the line are half the size of
  2562     the other empty spaces.
  2563   </dl>
  2565   <div class=figure> <img alt=alt height=270 src="images/flex-pack.svg"
  2566    width=504>
  2567    <p class=caption>An illustration of the five ‘<a
  2568     href="#justify-content"><code
  2569     class=property>justify-content</code></a>’ keywords and their effects
  2570     on a flex container with three colored items.
  2571   </div>
  2573   <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
  2574    Alignment: the ‘<a href="#align-items"><code
  2575    class=property>align-items</code></a>’ and ‘<a
  2576    href="#align-self"><code class=property>align-self</code></a>’
  2577    properties</h3>
  2579   <table class=propdef>
  2580    <tbody>
  2581     <tr>
  2582      <th>Name:
  2584      <td><dfn id=align-items>align-items</dfn>
  2586     <tr>
  2587      <th><a href="#values">Value</a>:
  2589      <td>flex-start | flex-end | center | baseline | stretch
  2591     <tr>
  2592      <th>Initial:
  2594      <td>stretch
  2596     <tr>
  2597      <th>Applies to:
  2599      <td>flex containers
  2601     <tr>
  2602      <th>Inherited:
  2604      <td>no
  2606     <tr>
  2607      <th>Computed value:
  2609      <td>specified value
  2611     <tr>
  2612      <th>Media:
  2614      <td>visual
  2616     <tr>
  2617      <th>Animatable:
  2619      <td>no
  2621     <tr>
  2622      <th>Canonical Order:
  2624      <td><abbr title="follows order of property value definition">per
  2625       grammar</abbr>
  2626   </table>
  2628   <table class=propdef>
  2629    <tbody>
  2630     <tr>
  2631      <th>Name:
  2633      <td><dfn id=align-self>align-self</dfn>
  2635     <tr>
  2636      <th><a href="#values">Value</a>:
  2638      <td>auto | flex-start | flex-end | center | baseline | stretch
  2640     <tr>
  2641      <th>Initial:
  2643      <td>auto
  2645     <tr>
  2646      <th>Applies to:
  2648      <td><a href="#flex-item"><i>flex items</i></a>
  2650     <tr>
  2651      <th>Inherited:
  2653      <td>no
  2655     <tr>
  2656      <th>Computed value:
  2658      <td>‘<code class=css>auto</code>’ computes to parent's ‘<a
  2659       href="#align-items"><code class=property>align-items</code></a>’;
  2660       otherwise as specified
  2662     <tr>
  2663      <th>Media:
  2665      <td>visual
  2667     <tr>
  2668      <th>Animatable:
  2670      <td>no
  2672     <tr>
  2673      <th>Canonical Order:
  2675      <td><abbr title="follows order of property value definition">per
  2676       grammar</abbr>
  2677   </table>
  2679   <p> <a href="#flex-item"><i>Flex items</i></a> can be aligned in the <a
  2680    href="#cross-axis"><i>cross axis</i></a> of the current line of the flex
  2681    container, similar to ‘<a href="#justify-content"><code
  2682    class=property>justify-content</code></a>’ but in the perpendicular
  2683    direction. ‘<a href="#align-items"><code
  2684    class=property>align-items</code></a>’ sets the default alignment for
  2685    all of the flex container's <a href="#flex-item"><i
  2686    title="flex items">items</i></a>, including anonymous <a
  2687    href="#flex-item"><i>flex items</i></a>. ‘<a href="#align-self"><code
  2688    class=property>align-self</code></a>’ allows this default alignment to
  2689    be overridden for individual <a href="#flex-item"><i>flex items</i></a>.
  2690    (For anonymous flex items, ‘<a href="#align-self"><code
  2691    class=property>align-self</code></a>’ always matches the value of ‘<a
  2692    href="#align-items"><code class=property>align-items</code></a>’ on
  2693    their associated flex container.)
  2695   <p> If either of the <a href="#flex-item"><i>flex item's</i></a> cross-axis
  2696    margins are ‘<code class=css>auto</code>’, ‘<a
  2697    href="#align-self"><code class=property>align-self</code></a>’ has no
  2698    effect.
  2700   <p> A value of <dfn id=align-self-auto title="align-self: auto">‘<code
  2701    class=css>auto</code>’</dfn> for ‘<a href="#align-self"><code
  2702    class=property>align-self</code></a>’ computes to the value of ‘<a
  2703    href="#align-items"><code class=property>align-items</code></a>’ on the
  2704    element's parent, or <a href="#align-items-stretch">‘<code
  2705    class=css>stretch</code>’</a> if the element has no parent. The
  2706    alignments are defined as:
  2708   <dl>
  2709    <dt><dfn id=align-flex-start>‘<code class=css>flex-start</code>’</dfn>
  2711    <dd> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
  2712     <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a
  2713     href="#cross-start"><i>cross-start</i></a> edge of the line.
  2715    <dt><dfn id=align-flex-end>‘<code class=css>flex-end</code>’</dfn>
  2717    <dd> The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
  2718     href="#flex-item"><i>flex item</i></a> is placed flush with the <a
  2719     href="#cross-end"><i>cross-end</i></a> edge of the line.
  2721    <dt><dfn id=align-center>‘<code class=css>center</code>’</dfn>
  2723    <dd> The <a href="#flex-item"><i>flex item</i></a>&apos;s margin box is
  2724     centered in the <a href="#cross-axis"><i>cross axis</i></a> within the
  2725     line. (If the <a href="#cross-size"><i>cross size</i></a> of the flex
  2726     line is less than that of the <a href="#flex-item"><i>flex item</i></a>,
  2727     it will overflow equally in both directions.)
  2729    <dt><dfn id=align-baseline>‘<code class=css>baseline</code>’</dfn>
  2731    <dd>
  2732     <p> If the <a href="#flex-item"><i>flex item</i></a>&apos;s inline axis
  2733      is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this
  2734      value is identical to <a href="#align-flex-start">‘<code
  2735      class=css>flex-start</code>’</a>.
  2737     <p> Otherwise, it <dfn id=baseline-participation>participates in baseline
  2738      alignment</dfn>: all participating <a href="#flex-item"><i>flex
  2739      items</i></a> on the line are aligned such that their baselines align,
  2740      and the item with the largest distance between its baseline and its <a
  2741      href="#cross-start"><i>cross-start</i></a> margin edge is placed flush
  2742      against the <a href="#cross-start"><i>cross-start</i></a> edge of the
  2743      line.
  2745    <dt><dfn id=align-stretch>‘<code class=css>stretch</code>’</dfn>
  2747    <dd>
  2748     <p> If the <a href="#cross-size-property"><i>cross size property</i></a>
  2749      of the <a href="#flex-item"><i>flex item</i></a> computes to ‘<code
  2750      class=css>auto</code>’, its used value is the length necessary to make
  2751      the <a href="#cross-size"><i>cross size</i></a> of the item's margin box
  2752      as close to the same size as the line as possible, while still
  2753      respecting the constraints imposed by ‘<code
  2754      class=css>min/max-width/height</code>’.
  2756     <p class=note> Note that if the flex container's height is constrained
  2757      this value may cause the contents of the <a href="#flex-item"><i>flex
  2758      item</i></a> to overflow the item.
  2760     <p> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
  2761      <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a
  2762      href="#cross-start"><i>cross-start</i></a> edge of the line.
  2763   </dl>
  2765   <div class=figure> <img alt=alt height=377 src="images/flex-align.svg"
  2766    width=508>
  2767    <p class=caption>An illustration of the five ‘<a
  2768     href="#align-items"><code class=property>align-items</code></a>’
  2769     keywords and their effects on a flex container with four colored items.
  2770   </div>
  2772   <h3 id=align-content-property><span class=secno>8.4. </span> Packing Flex
  2773    Lines: the ‘<a href="#align-content"><code
  2774    class=property>align-content</code></a>’ property</h3>
  2776   <table class=propdef>
  2777    <tbody>
  2778     <tr>
  2779      <th>Name:
  2781      <td><dfn id=align-content>align-content</dfn>
  2783     <tr>
  2784      <th><a href="#values">Value</a>:
  2786      <td>flex-start | flex-end | center | space-between | space-around |
  2787       stretch
  2789     <tr>
  2790      <th>Initial:
  2792      <td>stretch
  2794     <tr>
  2795      <th>Applies to:
  2797      <td><a href="#multi-line"><i>multi-line</i></a> flex containers
  2799     <tr>
  2800      <th>Inherited:
  2802      <td>no
  2804     <tr>
  2805      <th>Computed value:
  2807      <td>specified value
  2809     <tr>
  2810      <th>Media:
  2812      <td>visual
  2814     <tr>
  2815      <th>Animatable:
  2817      <td>no
  2819     <tr>
  2820      <th>Canonical Order:
  2822      <td><abbr title="follows order of property value definition">per
  2823       grammar</abbr>
  2824   </table>
  2826   <p> The ‘<a href="#align-content"><code
  2827    class=property>align-content</code></a>’ property aligns a flex
  2828    container's lines within the flex container when there is extra space in
  2829    the <i>cross-axis</i>, similar to how ‘<a href="#justify-content"><code
  2830    class=property>justify-content</code></a>’ aligns individual items
  2831    within the <i>main-axis</i>. Note, this property has no effect when the
  2832    flex container has only a single line. Values have the following meanings:
  2834   <dl>
  2835    <dt><dfn id=align-content-flex-start>‘<code
  2836     class=css>flex-start</code>’</dfn>
  2838    <dd> Lines are packed toward the start of the flex container. The <a
  2839     href="#cross-start"><i>cross-start</i></a> edge of the first line in the
  2840     flex container is placed flush with the <a
  2841     href="#cross-start"><i>cross-start</i></a> edge of the flex container,
  2842     and each subsequent line is placed flush with the preceding line.
  2844    <dt><dfn id=align-content-flex-end>‘<code
  2845     class=css>flex-end</code>’</dfn>
  2847    <dd> Lines are packed toward the end of the flex container. The <a
  2848     href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
  2849     flush with the <a href="#cross-end"><i>cross-end</i></a> edge of the flex
  2850     container, and each preceding line is placed flush with the subsequent
  2851     line.
  2853    <dt><dfn id=align-content-center>‘<code class=css>center</code>’</dfn>
  2855    <dd> Lines are packed toward the center of the flex container. The lines
  2856     in the flex container are placed flush with each other and aligned in the
  2857     center of the flex container, with equal amounts of empty space between
  2858     the <a href="#cross-start"><i>cross-start</i></a> content edge of the
  2859     flex container and the first line in the flex container, and between the
  2860     <a href="#cross-end"><i>cross-end</i></a> content edge of the flex
  2861     container and the last line in the flex container. (If the leftover
  2862     free-space is negative, the lines will overflow equally in both
  2863     directions.)
  2865    <dt><dfn id=align-content-space-between>‘<code
  2866     class=css>space-between</code>’</dfn>
  2868    <dd> Lines are evenly distributed in the flex container. If the leftover
  2869     free-space is negative this value is identical to <a
  2870     href="#align-content-flex-start">‘<code
  2871     class=css>flex-start</code>’</a>. Otherwise, the <a
  2872     href="#cross-start"><i>cross-start</i></a> edge of the first line in the
  2873     flex container is placed flush with the <a
  2874     href="#cross-start"><i>cross-start</i></a> content edge of the flex
  2875     container, the <a href="#cross-end"><i>cross-end</i></a> edge of the last
  2876     line in the flex container is placed flush with the <a
  2877     href="#cross-end"><i>cross-end</i></a> content edge of the flex
  2878     container, and the remaining lines in the flex container are distributed
  2879     so that the empty space between any two adjacent lines is the same.
  2881    <dt><dfn id=align-content-space-around>‘<code
  2882     class=css>space-around</code>’</dfn>
  2884    <dd> Lines are evenly distributed in the flex container, with half-size
  2885     spaces on either end. If the leftover free-space is negative this value
  2886     is identical to <a href="#align-content-center">‘<code
  2887     class=css>center</code>’</a>. Otherwise, the lines in the flex
  2888     container are distributed such that the empty space between any two
  2889     adjacent lines is the same, and the empty space before the first and
  2890     after the last lines in the flex container are half the size of the other
  2891     empty spaces.
  2893    <dt><dfn id=align-content-stretch>‘<code
  2894     class=css>stretch</code>’</dfn>
  2896    <dd> Lines stretch to take up the remaining space. If the leftover
  2897     free-space is negative, this value is identical to <a
  2898     href="#align-content-flex-start">‘<code
  2899     class=css>flex-start</code>’</a>. Otherwise, the free-space is split
  2900     equally between all of the lines, increasing their cross size.
  2901   </dl>
  2903   <p class=note> Note: Only flex containers with multiple lines ever have
  2904    free space in the <i>cross-axis</i> for lines to be aligned in, because in
  2905    a flex container with a single line the sole line automatically stretches
  2906    to fill the space.
  2908   <div class=figure> <img alt=alt height=508
  2909    src="images/align-content-example.svg" width=612>
  2910    <p class=caption> An illustration of the ‘<a href="#align-content"><code
  2911     class=property>align-content</code></a>’ keywords and their effects on
  2912     a <a href="#multi-line"><i>multi-line</i></a> flex container.
  2913   </div>
  2915   <h3 id=flex-baselines><span class=secno>8.5. </span> Flex Baselines</h3>
  2917   <p> The baselines of a flex container are determined as follows (after
  2918    reordering with ‘<a href="#order"><code
  2919    class=property>order</code></a>’):
  2921   <dl>
  2922    <dt><dfn id=main-axis-baseline>main-axis baseline</dfn>
  2924    <dd>
  2925     <ol>
  2926      <li> If any of the <a href="#flex-item"><i>flex items</i></a> on the
  2927       flex container's first line <a
  2928       href="#baseline-participation">participate in baseline alignment</a>,
  2929       the flex container's <a href="#main-axis-baseline"><i>main-axis
  2930       baseline</i></a> is the baseline of those <a href="#flex-item"><i>flex
  2931       items</i></a>.
  2933      <li> Otherwise, if the flex container has at least one <a
  2934       href="#flex-item"><i>flex item</i></a>, and its first <a
  2935       href="#flex-item"><i>flex item</i></a> has a baseline parallel to the
  2936       flex container's <a href="#main-axis"><i>main axis</i></a>, the flex
  2937       container's <a href="#main-axis-baseline"><i>main-axis baseline</i></a>
  2938       is that baseline.
  2940      <li> Otherwise, the flex container's <a
  2941       href="#main-axis-baseline"><i>main-axis baseline</i></a> is <a
  2942       href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a>
  2943       from the first item's content box, or, failing that, from the flex
  2944       container's content box. <!-- 
  2945 						Logic behind this choice (because it's different than other baseline calculations):
  2946 						If a flexbox has content, the baseline will definitely be inside the flexbox's content box.
  2947 						Thus, using the *flexbox's* content box keeps this fairly consistent - 
  2948 						you don't suddenly jump outside the content box when you delete the last bit of content.
  2949 					-->
  2950     </ol>
  2952    <dt><dfn id=cross-axis-baseline>cross-axis baseline</dfn>
  2954    <dd>
  2955     <ol>
  2956      <li> If the flex container has at least one <a href="#flex-item"><i>flex
  2957       item</i></a>, and its first <a href="#flex-item"><i>flex item</i></a>
  2958       has a baseline parallel to the flex container's <a
  2959       href="#cross-axis"><i>cross axis</i></a>, the flex container's <a
  2960       href="#cross-axis-baseline"><i>cross-axis baseline</i></a> is that
  2961       baseline.
  2963      <li> Otherwise, the flex container's <a
  2964       href="#cross-axis-baseline"><i>cross-axis baseline</i></a> is <a
  2965       href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a>
  2966       from the first item's content box, or, failing that, from the flex
  2967       container's content box.
  2968     </ol>
  2969   </dl>
  2971   <p> When calculating the baseline according to the above rules, if the box
  2972    contributing a baseline has an ‘<code class=property>overflow</code>’
  2973    value that allows scrolling, the box must be treated as being in its
  2974    initial scroll position for the purpose of determining its baseline.
  2976   <p> When <a
  2977    href="http://www.w3.org/TR/CSS21/tables.html#height-layout">determining
  2978    the baseline of a table cell</a>, a flex container provides a baseline
  2979    just as a line box or table-row does. <a href="#CSS21"
  2980    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
  2982   <div class=note>
  2983    <p> CSS 2.1 did not define the baseline of block or table boxes. It is
  2984     expected that they will be defined consistent with those of <a
  2985     href="http://www.w3.org/TR/CSS2/tables.html#height-layout">table
  2986     cells</a>, as follows:
  2988    <dl>
  2989     <dt>‘<code class=css>block</code>’
  2991     <dt>‘<code class=css>list-item</code>’
  2993     <dd>
  2994      <p> The inline-axis baseline of a block is the baseline of the first
  2995       in-flow line box in the block, or the first in-flow block-level child
  2996       in the block that has a baseline, whichever comes first. If there is no
  2997       such line box or child, then the block has no baseline. For the
  2998       purposes of finding a baseline, in-flow boxes with a scrolling
  2999       mechanisms (see the ‘<code class=property>overflow</code>’
  3000       property) must be considered as if scrolled to their origin position.
  3002      <p> A block has no block-axis baseline.
  3004     <dt>‘<code class=css>table</code>’
  3006     <dd>
  3007      <p> The inline-axis baseline of a table box is the baseline of its first
  3008       row. However, when calculating the baseline of an inline-block, table
  3009       boxes must be skipped.
  3011      <p> The block-axis baseline of a table is undefined.
  3012    </dl>
  3013   </div>
  3015   <h2 id=layout-algorithm><span class=secno>9. </span> Flex Layout Algorithm</h2>
  3017   <p> This section contains normative algorithms detailing the exact layout
  3018    behavior of a flex container and its contents. The algorithms here are
  3019    written to optimize readability and theoretical simplicity, and may not
  3020    necessarily be the most efficient. Implementations may use whatever actual
  3021    algorithms they wish, but must produce the same results as the algorithms
  3022    described here.
  3024   <p class=note> This section is mainly intended for implementors. Authors
  3025    writing web pages should generally be served well by the individual
  3026    property descriptions, and do not need to read this section unless they
  3027    have a deep-seated urge to understand arcane details of CSS layout.
  3029   <p> For the purposes of these definitions, a <dfn id=definite-size
  3030    title="definite|definite size">definite size</dfn> is one that can be
  3031    determined without measuring content, i.e. is a <var>&lt;length></var>, a
  3032    size of the initial containing block, or a <var>&lt;percentage></var> that
  3033    is resolved against a definite size. If a <a
  3034    href="#single-line"><i>single-line</i></a> <a
  3035    href="#flex-container"><i>flex container</i></a> has a definite cross
  3036    size, any <a href="#flex-item"><i>flex items</i></a> with ‘<code
  3037    class=css>align-self: stretch</code>’ must also be treated as having a
  3038    definite cross size. An <dfn id=indefinite-size
  3039    title="indefinite|indefinite size">indefinite size</dfn> is one that is
  3040    not <a href="#definite-size"><i>definite</i></a>.
  3042   <p> The following sections define the algorithm for laying out a flex
  3043    container and its contents.
  3045   <h3 id=box-manip><span class=secno>9.1. </span> Initial Setup</h3>
  3047   <ol start=0>
  3048    <li id=algo-anon-box> <strong>Generate anonymous flex items</strong> as
  3049     described in the <a href="#flex-items">Flex Items</a> section.
  3051    <li id=algo-flex-order> <strong>Re-order the flex items and absolutely
  3052     positioned flex container children according to their ‘<a
  3053     href="#order"><code class=property>order</code></a>’.</strong> The
  3054     elements with the lowest (most negative) ‘<a href="#order"><code
  3055     class=property>order</code></a>’ values are first in the ordering. If
  3056     multiple elements share an ‘<a href="#order"><code
  3057     class=property>order</code></a>’ value, they're ordered by document
  3058     order. This affects the order in which the elements generate boxes in the
  3059     box-tree, and how the rest of this algorithm deals with the generated
  3060     flex items.
  3061   </ol>
  3063   <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3>
  3065   <ol class=continue>
  3066    <li id=algo-available> <strong>Determine the available main and cross
  3067     space for the flex items.</strong> For each dimension, if that dimension
  3068     of the flex container is a <a href="#definite-size"><i>definite
  3069     size</i></a>, use that; otherwise, subtract the flex container's margin,
  3070     border, and padding from the space available to the flex container in
  3071     that dimension and use that value. <span class=note>This might result in
  3072     an infinite value.</span>
  3074    <li id=algo-main-item> <strong>Determine the <dfn id=flex-base-size>flex
  3075     base size</dfn> and <dfn id=hypothetical-main-size>hypothetical main
  3076     size</dfn> of each item:</strong>
  3077     <ul>
  3078      <li> If the item has a <a href="#definite-size"><i>definite</i></a> flex
  3079       basis, that's the <a href="#flex-base-size"><i>flex base size</i></a>.
  3081      <li> If the flex basis is ‘<code class=css>auto</code>’ or depends
  3082       on its available size, and the flex container is being sized under a
  3083       min-content or max-content constraint (e.g. when performing <a
  3084       href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">automatic
  3085       table layout</a> <a href="#CSS21"
  3086       rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), size the item under that
  3087       constraint. The <a href="#flex-base-size"><i>flex base size</i></a> is
  3088       the item's resulting main size.
  3090      <li> If flex item has an intrinsic aspect ratio, the flex item has
  3091       ‘<code class=css>align-self: stretch</code>’, the flex basis and
  3092       cross size are both ‘<code class=css>auto</code>’ , and the flex
  3093       container is <a href="#single-line"><i>single-line</i></a> and has a <a
  3094       href="#definite-size"><i>definite</i></a> cross size, the <a
  3095       href="#flex-base-size"><i>flex base size</i></a> is computed from the
  3096       flex container's inner cross size (clamped to the <a
  3097       href="#flex-item"><i>flex item</i></a>’s min and max <a
  3098       href="#cross-size"><i>cross size</i></a>) and the <a
  3099       href="#flex-item"><i>flex item</i></a>’s intrinsic aspect ratio.
  3100       <p class=issue> This substep needs review, see thread at <a
  3101        href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html">http://lists.w3.org/Archives/Public/www-style/2012Oct/0781.html</a>.
  3103      <li> Otherwise, if the flex basis is ‘<code class=css>auto</code>’
  3104       or depends on its available size, the available main size is infinite,
  3105       and the flex item's inline axis is parallel to the main axis, lay the
  3106       item out using <a
  3107       href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the
  3108       rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES"
  3109       rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
  3110       The <a href="#flex-base-size"><i>flex base size</i></a> is the item's
  3111       max-content main size.
  3113      <li> Otherwise, lay out the item into the available space using its flex
  3114       basis in place of its main size, and treating ‘<code
  3115       class=css>auto</code>’ as ‘<code class=css>max-content</code>’.
  3116       The <a href="#flex-base-size"><i>flex base size</i></a> is the item's
  3117       resulting main size.
  3118     </ul>
  3119     The <a href="#hypothetical-main-size"><i>hypothetical main size</i></a>
  3120     is the item's <a href="#flex-base-size"><i>flex base size</i></a> clamped
  3121     according to its min and max main size properties.
  3123    <li id=algo-main-container> <strong>Determine the main size of the flex
  3124     container</strong> using the rules of the formatting context in which it
  3125     participates. In this calculation, the <i>min-content main size</i> of
  3126     the flex container is the maximum of the flex container's items'
  3127     <i>min-content size contributions</i>, and the <i>max content main
  3128     size</i> of the flex container is the sum of the flex container's items'
  3129     <i>max-content size contributions</i>. The min-content/max-content main
  3130     size contribution of an item is its outer <a
  3131     href="#hypothetical-main-size"><i>hypothetical main size</i></a> when
  3132     sized under a min-content/max-content constraint (respectively). For this
  3133     computation, ‘<code class=css>auto</code>’ margins on flex items are
  3134     treated as ‘<code class=css>0</code>’.
  3135   </ol>
  3137   <h3 id=main-sizing><span class=secno>9.3. </span> Main Size Determination</h3>
  3139   <ol class=continue>
  3140    <li id=algo-line-break> <strong>Collect flex items into flex
  3141     lines:</strong>
  3142     <ul>
  3143      <li> If the flex container is <a
  3144       href="#single-line"><i>single-line</i></a>, collect all the flex items
  3145       into a single flex line.
  3147      <li> Otherwise, starting from the first uncollected item, collect
  3148       consecutive items one by one until the first time that the
  3149       <em>next</em> collected item would not fit into the flex container's
  3150       inner main size, or until a forced break is encountered. If the very
  3151       first uncollected item wouldn't fit, collect just it into the line. A
  3152       break is forced wherever the CSS2.1 ‘<code
  3153       class=css>page-break-before/after</code>’ <a href="#CSS21"
  3154       rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> or the CSS3 ‘<code
  3155       class=css>break-before/after</code>’ <a href="#CSS3-BREAK"
  3156       rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> properties
  3157       specify a fragmentation break.
  3158       <p> For this step, the size of a flex item is its outer <a
  3159        href="#hypothetical-main-size"><i>hypothetical main size</i></a>.
  3161       <p> Repeat until all flex items have been collected into flex lines.
  3163       <p class=note> Note that the "collect as many" line will collect
  3164        zero-sized flex items onto the end of the previous line even if the
  3165        last non-zero item exactly "filled up" the line.
  3166     </ul>
  3168    <li id=algo-flex> <strong><a href="#resolve-flexible-lengths">Resolve the
  3169     flexible lengths</a></strong> of all the flex items to find their used
  3170     main size (see section 9.7.).
  3171   </ol>
  3173   <h3 id=cross-sizing><span class=secno>9.4. </span> Cross size determination</h3>
  3175   <ol class=continue>
  3176    <li id=algo-cross-item> <strong>Determine the <dfn
  3177     id=hypothetical-cross-size>hypothetical cross size</dfn> of each
  3178     item</strong> by performing layout with the used main size and the
  3179     available space, treating ‘<code class=css>auto</code>’ as ‘<code
  3180     class=css>fit-content</code>’.
  3182    <li id=algo-cross-line> <strong>Calculate the cross size of each flex
  3183     line.</strong>
  3184     <p> If the flex container has only a single line (even if it's a <a
  3185      href="#multi-line"><i>multi-line</i></a> flex container) and has a <a
  3186      href="#definite-size"><i>definite</i></a> cross size, the cross size of
  3187      the flex line is the flex container's inner cross size.
  3189     <p> Otherwise, for each flex line:
  3191     <ol>
  3192      <li> Collect all the flex items whose inline-axis is parallel to the
  3193       main-axis, whose ‘<a href="#align-self"><code
  3194       class=property>align-self</code></a>’ is <a
  3195       href="#align-baseline">‘<code class=css>baseline</code>’</a>, and
  3196       whose cross-axis margins are both non-‘<code
  3197       class=css>auto</code>’. Find the largest of the distances between
  3198       each item's baseline and its hypothetical outer cross-start edge, and
  3199       the largest of the distances between each item's baseline and its
  3200       hypothetical outer cross-end edge, and sum these two values.
  3202      <li> Among all the items not collected by the previous step, find the
  3203       largest outer <a href="#hypothetical-cross-size"><i>hypothetical cross
  3204       size</i></a>.
  3206      <li> The used cross-size of the flex line is the largest of the numbers
  3207       found in the previous two steps and zero.
  3208     </ol>
  3210    <li id=algo-line-stretch> <strong>Handle ‘<code class=css>align-content:
  3211     stretch</code>’.</strong> If the flex container has a <a
  3212     href="#definite-size"><i>definite</i></a> cross size, ‘<a
  3213     href="#align-content"><code class=property>align-content</code></a>’ is
  3214     <a href="#align-content-stretch">‘<code
  3215     class=css>stretch</code>’</a>, and the sum of the flex lines' cross
  3216     sizes is less than the flex container's inner cross size, increase the
  3217     cross size of each flex line by equal amounts such that the sum of their
  3218     cross sizes exactly equals the flex container's inner cross size.
  3220    <li id=algo-visibility> <strong>Collapse ‘<code
  3221     class=css>visibility:collapse</code>’ items.</strong> If any flex items
  3222     have ‘<code class=css>visibility: collapse</code>’, note the cross
  3223     size of the line they're in as the item's <dfn id=strut-size>strut
  3224     size</dfn>, and restart layout from the beginning.
  3225     <p> In this second layout round, when <a
  3226      href="#algo-line-break">collecting items into lines</a>, treat the
  3227      collapsed items as having zero main size. For the rest of the algorithm
  3228      following that step, ignore the collapsed items entirely (as if they
  3229      were ‘<code class=css>display:none</code>’) except that after <a
  3230      href="#algo-cross-line">calculating the cross size of the lines</a>, if
  3231      any line's cross size is less than the largest <a
  3232      href="#strut-size"><var>strut size</var></a> among all the collapsed
  3233      items in the line, set its cross size to that <a
  3234      href="#strut-size"><var>strut size</var></a>.
  3236     <p> Skip this step in the second layout round.
  3238    <li id=algo-stretch> <strong>Determine the used cross size of each flex
  3239     item.</strong> If a flex item has ‘<code class=css>align-self:
  3240     stretch</code>’, its computed cross size property is ‘<code
  3241     class=css>auto</code>’, and neither of its cross-axis margins are
  3242     ‘<code class=css>auto</code>’, the used outer cross size is the used
  3243     cross size of its flex line, clamped according to the item's min and max
  3244     cross size properties. Otherwise, the used cross size is the item's <a
  3245     href="#hypothetical-cross-size"><i>hypothetical cross size</i></a>.
  3246     <p class=note> Note that this step does not affect the main size of the
  3247      flex item, even if it has an intrinsic aspect ratio.
  3248   </ol>
  3250   <h3 id=main-alignment><span class=secno>9.5. </span> Main-Axis Alignment</h3>
  3252   <ol class=continue>
  3253    <li id=algo-main-align> <strong>Distribute any remaining free
  3254     space.</strong> For each flex line:
  3255     <ol>
  3256      <li> If the remaining free space is positive and at least one main-axis
  3257       margin on this line is ‘<code class=css>auto</code>’, distribute
  3258       the free space equally among these margins. Otherwise, set all ‘<code
  3259       class=css>auto</code>’ margins to zero.
  3261      <li> Align the items along the main-axis per ‘<a
  3262       href="#justify-content"><code
  3263       class=property>justify-content</code></a>’.
  3264     </ol>
  3265   </ol>
  3267   <h3 id=cross-alignment><span class=secno>9.6. </span> Cross-Axis Alignment</h3>
  3269   <ol class=continue>
  3270    <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<code
  3271     class=css>auto</code>’ margins.</strong> If a flex item has ‘<code
  3272     class=css>auto</code>’ cross-axis margins:
  3273     <ul>
  3274      <li> If its outer cross size (treating those ‘<code
  3275       class=css>auto</code>’ margins as zero) is less than the cross size
  3276       of its flex line, distribute the difference in those sizes equally to
  3277       the ‘<code class=css>auto</code>’ margins.
  3279      <li> Otherwise, if the <i>start</i> or <i>block-before</i> margin
  3280       (whichever is in the cross axis) is ‘<code class=css>auto</code>’,
  3281       set it to zero; set the opposite margin so that the outer cross size of
  3282       the item equals the cross size of its flex line.
  3283     </ul>
  3285    <li id=algo-cross-align> <strong>Align all flex items along the
  3286     cross-axis</strong> per ‘<a href="#align-self"><code
  3287     class=property>align-self</code></a>’, if neither of the item's
  3288     cross-axis margins are ‘<code class=css>auto</code>’.
  3290    <li id=algo-cross-container> <strong>Determine the flex container's used
  3291     cross size:</strong>
  3292     <ul>
  3293      <li> If the cross size property is a <a
  3294       href="#definite-size"><i>definite</i></a> size, use that.
  3296      <li> Otherwise, use the sum of the flex lines' cross sizes.
  3297     </ul>
  3299    <li id=algo-line-align> <strong>Align all flex lines</strong> per ‘<a
  3300     href="#align-content"><code class=property>align-content</code></a>’.
  3301   </ol>
  3303   <h3 id=resolve-flexible-lengths><span class=secno>9.7. </span> Resolving
  3304    Flexible Lengths</h3>
  3306   <p> To resolve the flexible lengths of the items within a flex line:
  3308   <ol>
  3309    <li> <strong>Determine the used flex factor.</strong> Sum the outer <a
  3310     href="#hypothetical-main-size"><i>hypothetical main sizes</i></a> of all
  3311     items on the line. If the sum is less than the flex container's inner
  3312     main size, use the <a href="#flex-grow-factor"><i>flex grow
  3313     factor</i></a> for the rest of this algorithm; otherwise, use the <a
  3314     href="#flex-shrink-factor"><i>flex shrink factor</i></a>.
  3316    <li> <strong>Size inflexible items.</strong> For any items that have a
  3317     flex factor of zero, set their used main size to their <a
  3318     href="#hypothetical-main-size"><i>hypothetical main size</i></a>.
  3320    <li> <strong>Check that you can distribute any space.</strong> If all the
  3321     flex items on the line are either frozen or have a flex factor of zero,
  3322     exit the algorithm.
  3324    <li> <strong>Calculate free space.</strong> Sum the outer <a
  3325     href="#flex-base-size"><i>flex base sizes</i></a> of all items on the
  3326     line, and subtract this from the flex container's inner main size. This
  3327     is the free space.
  3329    <li> <strong>Distribute free space proportional to the flex
  3330     factors.</strong> If the sign of the free space is positive and the
  3331     algorithm is using the <a href="#flex-grow-factor"><i>flex grow
  3332     factor</i></a>, or if the sign of the free space is negative and the
  3333     algorithm is using the <a href="#flex-shrink-factor"><i>flex shrink
  3334     factor</i></a>, distribute the free space to each flexible item's main
  3335     size in proportion to the item's flex factor:
  3336     <dl>
  3337      <dt>If the free space is positive
  3339      <dd> Find the ratio of the item's <a href="#flex-grow-factor"><i>flex
  3340       grow factor</i></a> to the sum of the <a
  3341       href="#flex-grow-factor"><i>flex grow factors</i></a> of all items on
  3342       the line. Set the item's main size to its <a
  3343       href="#flex-base-size"><i>flex base size</i></a> plus a fraction of the
  3344       free space proportional to the ratio.
  3346      <dt>If the free space is negative
  3348      <dd> For every item on the line, multiply its <a
  3349       href="#flex-shrink-factor"><i>flex shrink factor</i></a> by its outer
  3350       <a href="#flex-base-size"><i>flex base size</i></a>, and note this as
  3351       its <dfn id=scaled-flex-shrink-factor>scaled flex shrink factor</dfn>.
  3352       Find the ratio of the item's <a
  3353       href="#scaled-flex-shrink-factor"><i>scaled flex shrink factor</i></a>
  3354       to the sum of the <a href="#scaled-flex-shrink-factor"><i>scaled flex
  3355       shrink factors</i></a> of all items on the line. Set the item's main
  3356       size to its <a href="#flex-base-size"><i>flex base size</i></a> minus a
  3357       fraction of the absolute value of the free space proportional to the
  3358       ratio. <span class=note>Note this may result in a negative inner main
  3359       size; it will be corrected in the next step.</span>
  3360     </dl>
  3362    <li> <strong>Fix min/max violations.</strong> Clamp each item's main size
  3363     by its min and max main size properties. If the item's main size was made
  3364     smaller by this, it's a max violation. If the item's main size was made
  3365     larger by this, it's a min violation.
  3367    <li> The total violation is the sum of the adjustments from the previous
  3368     step (<code><var>clamped size</var> - <var>unclamped size</var></code>).
  3369     If the total violation is:
  3370     <dl>
  3371      <dt>Zero
  3373      <dd> Exit the algorithm.
  3375      <dt>Positive
  3377      <dd> Freeze all the items with min violations, reset all other items to
  3378       their size upon entering this algorithm, and return to step 2 of this
  3379       algorithm.
  3381      <dt>Negative
  3383      <dd> Freeze all the items with max violations, reset all other items to
  3384       their size upon entering this algorithm, and return to step 2 of this
  3385       algorithm.
  3386     </dl>
  3387   </ol>
  3389   <h2 id=pagination><span class=secno>10. </span> Fragmenting Flex Layout</h2>
  3391   <p> Flex containers can break across pages between items, between lines of
  3392    items (in <a href="#multi-line"><i>multi-line</i></a> mode), and inside
  3393    items. The ‘<code class=css>break-*</code>’ properties apply to flex
  3394    containers as normal for block-level or inline-level boxes. This section
  3395    defines how they apply to flex items and elements inside flex items.
  3397   <p> The following breaking rules refer to the fragmentation container as
  3398    the “page”. The same rules apply to any other fragmenters. (Substitute
  3399    “page” with the appropriate fragmenter type as needed.) See the CSS3
  3400    Fragmentation Module <a href="#CSS3-BREAK"
  3401    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>. For readability,
  3402    in this section the terms "row" and "column" refer to the relative
  3403    orientation of the flex container with respect to the block flow direction
  3404    of the fragmentation context, rather than to that of the flex container
  3405    itself.
  3407   <p> The exact layout of a fragmented flex container is not defined in this
  3408    level of Flexible Box Layout. However, breaks inside a flex container are
  3409    subject to the following rules:
  3411   <ul>
  3412    <li> In a row flex container, the ‘<code
  3413     class=property>break-before</code>’ and ‘<code
  3414     class=property>break-after</code>’ properties on flex items are
  3415     propagated to the flex line. The ‘<code
  3416     class=property>break-before</code>’ property on the first line and the
  3417     ‘<code class=property>break-after</code>’ property on the last line
  3418     are propagated to the flex container.
  3420    <li> In a column flex container, the ‘<code
  3421     class=property>break-before</code>’ property on the first item and the
  3422     ‘<code class=property>break-after</code>’ property on the last item
  3423     are propagated to the flex container. Forced breaks on other items are
  3424     applied to the item itself.
  3426    <li> A forced break inside a flex item effectively increases the size of
  3427     its contents; it does not trigger a forced break inside sibling items.
  3429    <li> In a row flex container, <a
  3430     href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1 break
  3431     opportunities</a> occur between sibling flex lines, and <a
  3432     href="http://www.w3.org/TR/css3-break/#end-block">Class 3 break
  3433     opportunities</a> occur between the first/last flex line and the flex
  3434     container's content edges. In a column flex container, <a
  3435     href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1 break
  3436     opportunities</a> occur between sibling flex items, and <a
  3437     href="http://www.w3.org/TR/css3-break/#end-block">Class 3 break
  3438     opportunities</a> occur between the first/last flex items on a line and
  3439     the flex container's content edges. <a href="#CSS3-BREAK"
  3440     rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>
  3442    <li> When a flex container is continued after a break, the space available
  3443     to its <a href="#flex-item"><i>flex items</i></a> (in the block flow
  3444     direction of the fragmentation context) is reduced by the space consumed
  3445     by flex container fragments on previous pages. The space consumed by a
  3446     flex container fragment is the size of its content box on that page. If
  3447     as a result of this adjustment the available space becomes negative, it
  3448     is set to zero.
  3450    <li> If the first fragment of the flex container is not at the top of the
  3451     page, and some of its flex items don't fit in the remaining space on the
  3452     page, the entire fragment is moved to the next page.
  3454    <li> When a <a href="#multi-line"><i>multi-line</i></a> colum flex
  3455     container breaks, each fragment has its own "stack" of flex lines, just
  3456     like each fragment of a multi-column element has its own row of column
  3457     boxes.
  3459    <li> Aside from the rearrangement of items imposed by the previous point,
  3460     UAs should attempt to minimize distortation of the flex container with
  3461     respect to unfragmented flow.
  3462   </ul>
  3464   <h3 id=pagination-algo><span class=secno>10.1. </span> Sample Flex
  3465    Fragmentation Algorithm</h3>
  3467   <p> This informative section presents a possible fragmentation algorithm
  3468    for flex containers. Implementors are encouraged to improve on this
  3469    algorithm and <a href="#status">provide feedback to the CSS Working
  3470    Group</a>.
  3472   <div class=example>
  3473    <p class=note> This algorithm assumes that pagination always proceeds only
  3474     in the forward direction; therefore, in the algorithms below, alignment
  3475     is mostly ignored prior to pagination. Advanced layout engines may be
  3476     able to honor alignment across fragments.
  3478    <dl>
  3479     <dt><a href="#single-line"><i>Single-line</i></a> column flex container
  3481     <dd>
  3482      <ol>
  3483       <li> Run the flex layout algorithm (without regards to pagination)
  3484        through <a href="#cross-sizing">Cross Sizing Determination</a>.
  3486       <li> Lay out as many consecutive flex items or item fragments as
  3487        possible (but at least one or a fragment thereof), starting from the
  3488        first, until there is no more room on the page or a forced break is
  3489        encountered.
  3491       <li> If the previous step ran out of room and the free space is
  3492        positive, the UA may reduce the distributed free space on this page
  3493        (down to, but not past, zero) in order to make room for the next
  3494        unbreakable flex item or fragment. Otherwise, the item or fragment
  3495        that does not fit is pushed to the next page. The UA should pull up if
  3496        more than 50% of the fragment would have fit in the remaining space
  3497        and should push otherwise.
  3499       <li> If there are any flex items or fragments not laid out by the
  3500        previous steps, rerun the flex layout algorithm from <a
  3501        href="#line-sizing">Line Length Determination</a> through <a
  3502        href="#cross-sizing">Cross Sizing Determination</a> with the next
  3503        page's size and <em>all</em> the contents (including those already
  3504        laid out), and return to the previous step, but starting from the
  3505        first item or fragment not already laid out.
  3507       <li> For each fragment of the flex container, continue the flex layout
  3508        algorithm from <a href="#main-alignment">Main-Axis Alignment</a> to
  3509        its finish.
  3510      </ol>
  3512      <p class=note> It is the intent of this algorithm that column-direction
  3513       <a href="#single-line"><i>single-line</i></a> flex containers paginate
  3514       very similarly to block flow. As a test of the intent, a flex container
  3515       with ‘<code class=css>justify-content:start</code>’ and no flexible
  3516       items should paginate identically to a block with in-flow children with
  3517       same content, same used size and same used margins.
  3519     <dt><a href="#multi-line"><i>Multi-line</i></a> column flex container
  3521     <dd>
  3522      <ol>
  3523       <li> Run the flex layout algorithm <em>with</em> regards to pagination
  3524        (limiting the flex container's maximum line length to the space left
  3525        on the page) through <a href="#cross-sizing">Cross Sizing
  3526        Determination</a>.
  3528       <li> Lay out as many flex lines as possible (but at least one) until
  3529        there is no more room in the flex container in the cross dimension or
  3530        a forced break is encountered:
  3531        <ol>
  3532         <li> Lay out as many consecutive flex items as possible (but at least
  3533          one), starting from the first, until there is no more room on the
  3534          page or a forced break is encountered. Forced breaks <em>within</em>
  3535          flex items are ignored.
  3537         <li> If this is the first flex container fragment, this line contains
  3538          only a single flex item that is larger than the space left on the
  3539          page, and the flex container is not at the top of the page already,
  3540          move the flex container to the next page and restart flex container
  3541          layout entirely.
  3543         <li> If there are any flex items not laid out by the first step,
  3544          rerun the flex layout algorithm from <a href="#main-sizing">Main
  3545          Sizing Determination</a> through <a href="#cross-sizing">Cross
  3546          Sizing Determination</a> using only the items not laid out on a
  3547          previous line, and return to the previous step, starting from the
  3548          first item not already laid out.
  3549        </ol>
  3551       <li> If there are any flex items not laid out by the previous step,
  3552        rerun the flex layout algorithm from <a href="#line-sizing">Line
  3553        Sizing Determination</a> through <a href="#cross-sizing">Cross Sizing
  3554        Determination</a> with the next page's size and only the items not
  3555        already laid out, and return to the previous step, but starting from
  3556        the first item not already laid out.
  3558       <li> For each fragment of the flex container, continue the flex layout
  3559        algorithm from <a href="#main-alignment">Main-Axis Alignment</a> to
  3560        its finish.
  3561      </ol>
  3563      <p class=note> If a flex item does not entirely fit on a single page, it
  3564       will <em>not</em> be paginated in <a
  3565       href="#multi-line"><i>multi-line</i></a> column flex containers.
  3567     <dt><a href="#single-line"><i>Single-line</i></a> row flex container
  3569     <dd>
  3570      <ol>
  3571       <li> Run the entire flex layout algorithm (without regards to
  3572        pagination), except treat any ‘<a href="#align-self"><code
  3573        class=property>align-self</code></a>’ other than ‘<code
  3574        class=css>start</code>’ or ‘<a href="#align-baseline"><code
  3575        class=css>baseline</code></a>’ as ‘<code
  3576        class=css>start</code>’.
  3578       <li> If an unbreakable item doesn't fit within the space left on the
  3579        page, and the flex container is not at the top of the page, move the
  3580        flex container to the next page and restart flex container layout
  3581        entirely.
  3583       <li> For each item, lay out as much of its contents as will fit in the
  3584        space left on the page, and fragment the remaining content onto the
  3585        next page, rerunning the flex layout algorithm from <a
  3586        href="#line-sizing">Line Length Determination</a> through <a
  3587        href="#main-alignment">Main-Axis Alignment</a> into the new page size
  3588        using <em>all</em> the contents (including items completed on previous
  3589        pages).
  3590        <p class=note> Any flex items that fit entirely into previous
  3591         fragments still take up space in the main axis in later fragments.
  3593       <li> For each fragment of the flex container, rerun the flex layout
  3594        algorithm from <a href="#cross-alignment">Cross-Axis Alignment</a> to
  3595        its finish. For all fragments besides the first, treat ‘<a
  3596        href="#align-self"><code class=property>align-self</code></a>’ and
  3597        ‘<a href="#align-content"><code
  3598        class=property>align-content</code></a>’ as being ‘<code
  3599        class=css>start</code>’ for all item fragments and lines.
  3601       <li> If any item, when aligned according to its original ‘<a
  3602        href="#align-self"><code class=property>align-self</code></a>’ value
  3603        into the combined cross size of all the flex container fragments,
  3604        would fit entirely within a single flex container fragment, it may be
  3605        shifted into that fragment and aligned appropriately.
  3606      </ol>
  3608     <dt><a href="#multi-line"><i>Multi-line</i></a> row flex container
  3610     <dd>
  3611      <ol>
  3612       <li> Run the flex layout algorithm (without regards to pagination),
  3613        through <a href="#cross-sizing">Cross Sizing Determination</a>.
  3615       <li> Lay out as many flex lines as possible (but at least one),
  3616        starting from the first, until there is no more room on the page or a
  3617        forced break is encountered.
  3618        <p> If a line doesn't fit on the page, and the line is not at the top
  3619         of the page, move the line to the next page and restart the flex
  3620         layout algorithm entirely, using only the items in and following this
  3621         line.
  3623        <p> If a flex item itself causes a forced break, rerun the flex layout
  3624         algorithm from <a href="#main-sizing">Main Sizing Determination</a>
  3625         through <a href="#main-alignment">Main-Axis Alignment</a>, using only
  3626         the items on this and following lines, but with the item causing the
  3627         break automatically starting a new line in the <a
  3628         href="#algo-line-break">line breaking step</a>, then continue with
  3629         this step. Forced breaks <em>within</em> flex items are ignored.
  3631       <li> If there are any flex items not laid out by the previous step,
  3632        rerun the flex layout algorithm from <a href="#line-sizing">Line
  3633        Length Determination</a> through <a href="#main-alignment">Main-Axis
  3634        Alignment</a> with the next page's size and only the items not already
  3635        laid out. Return to the previous step, but starting from the first
  3636        line not already laid out.
  3638       <li> For each fragment of the flex container, continue the flex layout
  3639        algorithm from <a href="#cross-alignment">Cross Axis Alignment</a> to
  3640        its finish.
  3641      </ol>
  3642    </dl>
  3643   </div>
  3645   <h2 id=conformance><span class=secno>11. </span> Conformance</h2>
  3647   <h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
  3649   <p>Conformance requirements are expressed with a combination of descriptive
  3650    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
  3651    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
  3652    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
  3653    normative parts of this document are to be interpreted as described in RFC
  3654    2119. However, for readability, these words do not appear in all uppercase
  3655    letters in this specification.
  3657   <p>All of the text of this specification is normative except sections
  3658    explicitly marked as non-normative, examples, and notes. <a
  3659    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  3661   <p>Examples in this specification are introduced with the words “for
  3662    example” or are set apart from the normative text with
  3663    <code>class="example"</code>, like this:
  3665   <div class=example>
  3666    <p>This is an example of an informative example.
  3667   </div>
  3669   <p>Informative notes begin with the word “Note” and are set apart from
  3670    the normative text with <code>class="note"</code>, like this:
  3672   <p class=note>Note, this is an informative note.
  3674   <h3 id=conformance-classes><span class=secno>11.2. </span> Conformance
  3675    classes</h3>
  3677   <p>Conformance to CSS Flexible Box Layout Module is defined for three
  3678    conformance classes:
  3680   <dl>
  3681    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  3682     sheet</dfn>
  3684    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  3685     style sheet</a>.
  3687    <dt><dfn id=renderer>renderer</dfn>
  3689    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  3690     that interprets the semantics of a style sheet and renders documents that
  3691     use them.
  3693    <dt><dfn id=authoring-tool>authoring tool</dfn>
  3695    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  3696     that writes a style sheet.
  3697   </dl>
  3699   <p>A style sheet is conformant to CSS Flexible Box Layout Module if all of
  3700    its statements that use syntax defined in this module are valid according
  3701    to the generic CSS grammar and the individual grammars of each feature
  3702    defined in this module.
  3704   <p>A renderer is conformant to CSS Flexible Box Layout Module if, in
  3705    addition to interpreting the style sheet as defined by the appropriate
  3706    specifications, it supports all the features defined by CSS Flexible Box
  3707    Layout Module by parsing them correctly and rendering the document
  3708    accordingly. However, the inability of a UA to correctly render a document
  3709    due to limitations of the device does not make the UA non-conformant. (For
  3710    example, a UA is not required to render color on a monochrome monitor.)
  3712   <p>An authoring tool is conformant to CSS Flexible Box Layout Module if it
  3713    writes style sheets that are syntactically correct according to the
  3714    generic CSS grammar and the individual grammars of each feature in this
  3715    module, and meet all other conformance requirements of style sheets as
  3716    described in this module.
  3718   <h3 id=partial><span class=secno>11.3. </span> Partial implementations</h3>
  3720   <p>So that authors can exploit the forward-compatible parsing rules to
  3721    assign fallback values, CSS renderers <strong>must</strong> treat as
  3722    invalid (and <a
  3723    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
  3724    appropriate</a>) any at-rules, properties, property values, keywords, and
  3725    other syntactic constructs for which they have no usable level of support.
  3726    In particular, user agents <strong>must not</strong> selectively ignore
  3727    unsupported component values and honor supported values in a single
  3728    multi-value property declaration: if any value is considered invalid (as
  3729    unsupported values must be), CSS requires that the entire declaration be
  3730    ignored.
  3732   <h3 id=experimental><span class=secno>11.4. </span> Experimental
  3733    implementations</h3>
  3735   <p>To avoid clashes with future CSS features, the CSS2.1 specification
  3736    reserves a <a
  3737    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  3738    syntax</a> for proprietary and experimental extensions to CSS.
  3740   <p>Prior to a specification reaching the Candidate Recommendation stage in
  3741    the W3C process, all implementations of a CSS feature are considered
  3742    experimental. The CSS Working Group recommends that implementations use a
  3743    vendor-prefixed syntax for such features, including those in W3C Working
  3744    Drafts. This avoids incompatibilities with future changes in the draft.
  3746   <h3 id=testing><span class=secno>11.5. </span> Non-experimental
  3747    implementations</h3>
  3749   <p>Once a specification reaches the Candidate Recommendation stage,
  3750    non-experimental implementations are possible, and implementers should
  3751    release an unprefixed implementation of any CR-level feature they can
  3752    demonstrate to be correctly implemented according to spec.
  3754   <p>To establish and maintain the interoperability of CSS across
  3755    implementations, the CSS Working Group requests that non-experimental CSS
  3756    renderers submit an implementation report (and, if necessary, the
  3757    testcases used for that implementation report) to the W3C before releasing
  3758    an unprefixed implementation of any CSS features. Testcases submitted to
  3759    W3C are subject to review and correction by the CSS Working Group.
  3761   <p>Further information on submitting testcases and implementation reports
  3762    can be found from on the CSS Working Group's website at <a
  3763    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  3764    Questions should be directed to the <a
  3765    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  3766    mailing list.
  3768   <h3 id=cr-exit-criteria><span class=secno>11.6. </span> CR exit criteria</h3>
  3770   <p> For this specification to be advanced to Proposed Recommendation, there
  3771    must be at least two independent, interoperable implementations of each
  3772    feature. Each feature may be implemented by a different set of products,
  3773    there is no requirement that all features be implemented by a single
  3774    product. For the purposes of this criterion, we define the following
  3775    terms:
  3777   <dl>
  3778    <dt>independent
  3780    <dd>each implementation must be developed by a different party and cannot
  3781     share, reuse, or derive from code used by another qualifying
  3782     implementation. Sections of code that have no bearing on the
  3783     implementation of this specification are exempt from this requirement.
  3785    <dt>interoperable
  3787    <dd>passing the respective test case(s) in the official CSS test suite,
  3788     or, if the implementation is not a Web browser, an equivalent test. Every
  3789     relevant test in the test suite should have an equivalent test created if
  3790     such a user agent (UA) is to be used to claim interoperability. In
  3791     addition if such a UA is to be used to claim interoperability, then there
  3792     must one or more additional UAs which can also pass those equivalent
  3793     tests in the same way for the purpose of interoperability. The equivalent
  3794     tests must be made publicly available for the purposes of peer review.
  3796    <dt>implementation
  3798    <dd>a user agent which:
  3799     <ol class=inline>
  3800      <li>implements the specification.
  3802      <li>is available to the general public. The implementation may be a
  3803       shipping product or other publicly available version (i.e., beta
  3804       version, preview release, or “nightly build”). Non-shipping product
  3805       releases must have implemented the feature(s) for a period of at least
  3806       one month in order to demonstrate stability.
  3808      <li>is not experimental (i.e., a version specifically designed to pass
  3809       the test suite and is not intended for normal usage going forward).
  3810     </ol>
  3811   </dl>
  3813   <p>The specification will remain Candidate Recommendation for at least six
  3814    months.
  3816   <hr title="Separator from footer">
  3818   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
  3820   <p>Thanks for feedback and contributions to Erik Anderson, Tony Chang, Phil
  3821    Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston,
  3822    Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper,
  3823    Kang-hao Lu, Markus Mielke, Robert O'Callahan, Christoph Päper, Ning
  3824    Rogers, Peter Salas, Morten Stenshorne, Christian Stockwell, Ojan Vafai,
  3825    Eugene Veselov, Boris Zbarsky.
  3827   <h2 class=no-num id=references>References</h2>
  3829   <h3 class=no-num id=normative>Normative references</h3>
  3830   <!--begin-normative-->
  3831   <!-- Sorted by label -->
  3833   <dl class=bibliography>
  3834    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  3835     <!---->
  3837    <dt id=CSS21>[CSS21]
  3839    <dd>Bert Bos; et al. <a
  3840     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
  3841     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  3842     2011. W3C Recommendation. URL: <a
  3843     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
  3844    </dd>
  3845    <!---->
  3847    <dt id=CSS3-BREAK>[CSS3-BREAK]
  3849    <dd>Rossen Atanassov; Elika J. Etemad. <a
  3850     href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
  3851     Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
  3852     Draft. (Work in progress.) URL: <a
  3853     href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
  3854    </dd>
  3855    <!---->
  3857    <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
  3859    <dd>Elika J. Etemad; Koji Ishii. <a
  3860     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
  3861     Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
  3862     Draft. (Work in progress.) URL: <a
  3863     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
  3864    </dd>
  3865    <!---->
  3867    <dt id=RFC2119>[RFC2119]
  3869    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  3870     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  3871     RFC 2119. URL: <a
  3872     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  3873    </dd>
  3874    <!---->
  3875   </dl>
  3876   <!--end-normative-->
  3878   <h3 class=no-num id=informative>Other references</h3>
  3879   <!--begin-informative-->
  3880   <!-- Sorted by label -->
  3882   <dl class=bibliography>
  3883    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  3884     <!---->
  3886    <dt id=CSS3UI>[CSS3UI]
  3888    <dd>Tantek Çelik. <a
  3889     href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"><cite>CSS Basic
  3890     User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C
  3891     Working Draft. (Work in progress.) URL: <a
  3892     href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
  3893    </dd>
  3894    <!---->
  3896    <dt id=CSS3VAL>[CSS3VAL]
  3898    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
  3899     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
  3900     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
  3901     Recommendation. (Work in progress.) URL: <a
  3902     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
  3903    </dd>
  3904    <!---->
  3906    <dt id=HTML40>[HTML40]
  3908    <dd>Ian Jacobs; David Raggett; Arnaud Le Hors. <a
  3909     href="http://www.w3.org/TR/1998/REC-html40-19980424"><cite>HTML 4.0
  3910     Specification.</cite></a> 24 April 1998. W3C Recommendation. URL: <a
  3911     href="http://www.w3.org/TR/1998/REC-html40-19980424">http://www.w3.org/TR/1998/REC-html40-19980424</a>
  3912    </dd>
  3913    <!---->
  3914   </dl>
  3915   <!--end-informative-->
  3917   <h2 class=no-num id=changes>Changes</h2>
  3919   <p> The following significant changes were made since the <a
  3920    href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September
  3921    2012 Candidate Recommendation</a>:
  3923   <ul>
  3924    <li> Absolutely positioned children of a flex container are no longer
  3925     called "flex items" (to avoid terminology confusion).
  3927    <li> Clarified that ‘<code class=property>float</code>’ still makes
  3928     the children of a flex container turn into block-level elements.
  3930    <li> Clarified that ‘<code class=property>overflow</code>’ applies to
  3931     flex containers.
  3933    <li> Clarified that ‘<code class=css>::first-line</code>’ and ‘<code
  3934     class=css>::first-letter</code>’ pseudo-elements do not apply to flex
  3935     containers (because they are not block containers).
  3937    <li> <a href="#algo-main-item">Allow intrinsic aspect ratios to inform the
  3938     main-size calculation.</a>
  3940    <li> Correct an omission in the flex-line size determination, so a <a
  3941     href="#single-line"><i>single-line</i></a> flexbox will size to its
  3942     contents if it doesn't have a definite size.
  3944    <li> Clarify that ‘<a href="#align-content-stretch"><code
  3945     class=css>stretch</code></a>’ checks for the <em>computed</em> value of
  3946     the cross-size property being ‘<code class=css>auto</code>’, which
  3947     means that percentage cross-sizes that behave as ‘<code
  3948     class=css>auto</code>’ (because they don't resolve against definite
  3949     sizes) aren't stretched.
  3950   </ul>
  3952   <p>A <a
  3953    href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of
  3954    Last Call Comments</a> is available.
  3956   <h2 class=no-num id=property>Property index</h2>
  3957   <!--begin-properties-->
  3959   <table class=proptable>
  3960    <thead>
  3961     <tr>
  3962      <th>Property
  3964      <th>Values
  3966      <th>Initial
  3968      <th>Applies to
  3970      <th>Inh.
  3972      <th>Percentages
  3974      <th>Media
  3976    <tbody>
  3977     <tr>
  3978      <th><a class=property href="#align-content">align-content</a>
  3980      <td>flex-start | flex-end | center | space-between | space-around |
  3981       stretch
  3983      <td>stretch
  3985      <td>multi-line flex containers
  3987      <td>no
  3989      <td>
  3991      <td>visual
  3993     <tr>
  3994      <th><a class=property href="#align-items">align-items</a>
  3996      <td>flex-start | flex-end | center | baseline | stretch
  3998      <td>stretch
  4000      <td>flex containers
  4002      <td>no
  4004      <td>
  4006      <td>visual
  4008     <tr>
  4009      <th><a class=property href="#align-self">align-self</a>
  4011      <td>auto | flex-start | flex-end | center | baseline | stretch
  4013      <td>auto
  4015      <td>flex items
  4017      <td>no
  4019      <td>
  4021      <td>visual
  4023     <tr>
  4024      <th><a class=property href="#flex">flex</a>
  4026      <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
  4027       &lt;&apos;flex-basis&apos;> ]
  4029      <td>see individual properties
  4031      <td>flex items
  4033      <td>see individual properties
  4035      <td>
  4037      <td>visual
  4039     <tr>
  4040      <th><a class=property href="#flex-basis-propdef">flex-basis</a>
  4042      <td>&lt;&apos;width&apos;>
  4044      <td>auto
  4046      <td>flex items
  4048      <td>no
  4050      <td>relative to the flex container's inner main size
  4052      <td>visual
  4054     <tr>
  4055      <th><a class=property href="#flex-direction">flex-direction</a>
  4057      <td>row | row-reverse | column | column-reverse
  4059      <td>row
  4061      <td>flex containers
  4063      <td>no
  4065      <td>
  4067      <td>visual
  4069     <tr>
  4070      <th><a class=property href="#flex-flow">flex-flow</a>
  4072      <td>&lt;‘flex-direction’> || &lt;‘flex-wrap’>
  4074      <td>see individual properties
  4076      <td>flex containers
  4078      <td>see individual properties
  4080      <td>
  4082      <td>visual
  4084     <tr>
  4085      <th><a class=property href="#flex-grow">flex-grow</a>
  4087      <td>&lt;number>
  4089      <td>0
  4091      <td>flex items
  4093      <td>no
  4095      <td>
  4097      <td>visual
  4099     <tr>
  4100      <th><a class=property href="#flex-shrink">flex-shrink</a>
  4102      <td>&lt;number>
  4104      <td>1
  4106      <td>flex items
  4108      <td>no
  4110      <td>
  4112      <td>visual
  4114     <tr>
  4115      <th><a class=property href="#flex-wrap">flex-wrap</a>
  4117      <td>nowrap | wrap | wrap-reverse
  4119      <td>nowrap
  4121      <td>flex containers
  4123      <td>no
  4125      <td>
  4127      <td>visual
  4129     <tr>
  4130      <th><a class=property href="#justify-content">justify-content</a>
  4132      <td>flex-start | flex-end | center | space-between | space-around
  4134      <td>flex-start
  4136      <td>flex containers
  4138      <td>no
  4140      <td>
  4142      <td>visual
  4144     <tr>
  4145      <th><a class=property href="#order">order</a>
  4147      <td>&lt;integer>
  4149      <td>0
  4151      <td>flex items and absolutely-positioned flex container children
  4153      <td>no
  4155      <td>
  4157      <td>visual
  4158   </table>
  4159   <!--end-properties-->
  4161   <h2 class=no-num id=index>Index</h2>
  4162   <!--begin-index-->
  4164   <ul class=indexlist>
  4165    <li>align-content, <a href="#align-content"
  4166     title="section 8.4."><strong>8.4.</strong></a>
  4168    <li>align-items, <a href="#align-items"
  4169     title="section 8.3."><strong>8.3.</strong></a>
  4171    <li>align-self, <a href="#align-self"
  4172     title="section 8.3."><strong>8.3.</strong></a>
  4174    <li>align-self: auto, <a href="#align-self-auto"
  4175     title="section 8.3."><strong>8.3.</strong></a>
  4177    <li>authoring tool, <a href="#authoring-tool"
  4178     title="section 11.2."><strong>11.2.</strong></a>
  4180    <li>‘<a href="#align-baseline"><code class=css>baseline</code></a>’,
  4181     <a href="#align-baseline" title="section 8.3."><strong>8.3.</strong></a>
  4183    <li>‘<a href="#align-content-center"><code
  4184     class=css>center</code></a>’, <a href="#align-center"
  4185     title="section 8.3."><strong>8.3.</strong></a>, <a
  4186     href="#align-content-center"
  4187     title="section 8.4."><strong>8.4.</strong></a>, <a href="#justify-center"
  4188     title="section 8.2."><strong>8.2.</strong></a>
  4190    <li>collapsed, <a href="#collapsed-flex-item"
  4191     title="section 4.4."><strong>4.4.</strong></a>
  4193    <li>collapsed flex item, <a href="#collapsed-flex-item"
  4194     title="section 4.4."><strong>4.4.</strong></a>
  4196    <li>‘<a href="#flex-flow-column"><code class=css>column</code></a>’,
  4197     <a href="#flex-flow-column"
  4198     title="section 5.1."><strong>5.1.</strong></a>
  4200    <li>‘<a href="#flex-flow-column-reverse"><code
  4201     class=css>column-reverse</code></a>’, <a
  4202     href="#flex-flow-column-reverse"
  4203     title="section 5.1."><strong>5.1.</strong></a>
  4205    <li>cross axis, <a href="#cross-axis"
  4206     title="section 2."><strong>2.</strong></a>
  4208    <li>cross-axis baseline, <a href="#cross-axis-baseline"
  4209     title="section 8.5."><strong>8.5.</strong></a>
  4211    <li>cross dimension, <a href="#cross-dimension"
  4212     title="section 2."><strong>2.</strong></a>
  4214    <li>cross-end, <a href="#cross-end"
  4215     title="section 2."><strong>2.</strong></a>
  4217    <li>cross size, <a href="#cross-size"
  4218     title="section 2."><strong>2.</strong></a>
  4220    <li>cross size property, <a href="#cross-size-property"
  4221     title="section 2."><strong>2.</strong></a>
  4223    <li>cross-start, <a href="#cross-start"
  4224     title="section 2."><strong>2.</strong></a>
  4226    <li>definite, <a href="#definite-size"
  4227     title="section 9."><strong>9.</strong></a>
  4229    <li>definite size, <a href="#definite-size"
  4230     title="section 9."><strong>9.</strong></a>
  4232    <li>flex, <a href="#flex" title="section 7.1."><strong>7.1.</strong></a>
  4234    <li>‘<a href="#flex"><code class=css>flex</code></a>’, <a
  4235     href="#display-flex" title="section 3."><strong>3.</strong></a>
  4237    <li>flex base size, <a href="#flex-base-size"
  4238     title="section 9.2."><strong>9.2.</strong></a>
  4240    <li>flex basis, <a href="#flex-basis"
  4241     title="section 7.1."><strong>7.1.</strong></a>
  4243    <li>flex-basis, <a href="#flex-basis-propdef"
  4244     title="section 7.3.3."><strong>7.3.3.</strong></a>
  4246    <li>flex-basis: auto, <a href="#flex-basis-auto"
  4247     title="section 7.3.3."><strong>7.3.3.</strong></a>
  4249    <li>flex container, <a href="#flex-container"
  4250     title="section 3."><strong>3.</strong></a>
  4252    <li>flex-direction, <a href="#flex-direction"
  4253     title="section 5.1."><strong>5.1.</strong></a>
  4255    <li>‘<a href="#align-content-flex-end"><code
  4256     class=css>flex-end</code></a>’, <a href="#align-content-flex-end"
  4257     title="section 8.4."><strong>8.4.</strong></a>, <a href="#align-flex-end"
  4258     title="section 8.3."><strong>8.3.</strong></a>, <a
  4259     href="#justify-flex-end" title="section 8.2."><strong>8.2.</strong></a>
  4261    <li>flex-flow, <a href="#flex-flow"
  4262     title="section 5.3."><strong>5.3.</strong></a>
  4264    <li>flex formatting context, <a href="#flex-formatting-context"
  4265     title="section 3."><strong>3.</strong></a>
  4267    <li>flex-grow, <a href="#flex-grow"
  4268     title="section 7.3.1."><strong>7.3.1.</strong></a>
  4270    <li>flex grow factor, <a href="#flex-grow-factor"
  4271     title="section 7.1."><strong>7.1.</strong></a>
  4273    <li>flexible length, <a href="#flexible-length"
  4274     title="section 7.1."><strong>7.1.</strong></a>
  4276    <li>flexible length's, <a href="#flexible-length"
  4277     title="section 7.1."><strong>7.1.</strong></a>
  4279    <li>flex item, <a href="#flex-item"
  4280     title="section 4."><strong>4.</strong></a>
  4282    <li>flex layout, <a href="#flex-layout"
  4283     title="section 1."><strong>1.</strong></a>
  4285    <li>flex-shrink, <a href="#flex-shrink"
  4286     title="section 7.3.2."><strong>7.3.2.</strong></a>
  4288    <li>flex shrink factor, <a href="#flex-shrink-factor"
  4289     title="section 7.1."><strong>7.1.</strong></a>
  4291    <li>‘<a href="#align-content-flex-start"><code
  4292     class=css>flex-start</code></a>’, <a href="#align-content-flex-start"
  4293     title="section 8.4."><strong>8.4.</strong></a>, <a
  4294     href="#align-flex-start" title="section 8.3."><strong>8.3.</strong></a>,
  4295     <a href="#justify-flex-start"
  4296     title="section 8.2."><strong>8.2.</strong></a>
  4298    <li>flex-wrap, <a href="#flex-wrap"
  4299     title="section 5.2."><strong>5.2.</strong></a>
  4301    <li>hypothetical cross size, <a href="#hypothetical-cross-size"
  4302     title="section 9.4."><strong>9.4.</strong></a>
  4304    <li>hypothetical main size, <a href="#hypothetical-main-size"
  4305     title="section 9.2."><strong>9.2.</strong></a>
  4307    <li>indefinite, <a href="#indefinite-size"
  4308     title="section 9."><strong>9.</strong></a>
  4310    <li>indefinite size, <a href="#indefinite-size"
  4311     title="section 9."><strong>9.</strong></a>
  4313    <li>‘<a href="#display-inline-flex"><code
  4314     class=css>inline-flex</code></a>’, <a href="#display-inline-flex"
  4315     title="section 3."><strong>3.</strong></a>
  4317    <li>justify-content, <a href="#justify-content"
  4318     title="section 8.2."><strong>8.2.</strong></a>
  4320    <li>main axis, <a href="#main-axis"
  4321     title="section 2."><strong>2.</strong></a>
  4323    <li>main-axis baseline, <a href="#main-axis-baseline"
  4324     title="section 8.5."><strong>8.5.</strong></a>
  4326    <li>main dimension, <a href="#main-dimension"
  4327     title="section 2."><strong>2.</strong></a>
  4329    <li>main-end, <a href="#main-end"
  4330     title="section 2."><strong>2.</strong></a>
  4332    <li>main size, <a href="#main-size"
  4333     title="section 2."><strong>2.</strong></a>
  4335    <li>main size property, <a href="#main-size-property"
  4336     title="section 2."><strong>2.</strong></a>
  4338    <li>main-start, <a href="#main-start"
  4339     title="section 2."><strong>2.</strong></a>
  4341    <li>multi-line, <a href="#multi-line"
  4342     title="section 6."><strong>6.</strong></a>
  4344    <li>‘<a href="#flex-none"><code class=css>none</code></a>’, <a
  4345     href="#flex-none" title="section 7.1."><strong>7.1.</strong></a>
  4347    <li>‘<a href="#flex-flow-nowrap"><code class=css>nowrap</code></a>’,
  4348     <a href="#flex-flow-nowrap"
  4349     title="section 5.2."><strong>5.2.</strong></a>
  4351    <li>order, <a href="#order" title="section 5.4."><strong>5.4.</strong></a>
  4353    <li>participates in baseline alignment, <a href="#baseline-participation"
  4354     title="section 8.3."><strong>8.3.</strong></a>
  4356    <li>renderer, <a href="#renderer"
  4357     title="section 11.2."><strong>11.2.</strong></a>
  4359    <li>‘<a href="#flex-flow-row"><code class=css>row</code></a>’, <a
  4360     href="#flex-flow-row" title="section 5.1."><strong>5.1.</strong></a>
  4362    <li>‘<a href="#flex-flow-row-reverse"><code
  4363     class=css>row-reverse</code></a>’, <a href="#flex-flow-row-reverse"
  4364     title="section 5.1."><strong>5.1.</strong></a>
  4366    <li>scaled flex shrink factor, <a href="#scaled-flex-shrink-factor"
  4367     title="section 9.7."><strong>9.7.</strong></a>
  4369    <li>single-line, <a href="#single-line"
  4370     title="section 6."><strong>6.</strong></a>
  4372    <li>‘<a href="#align-content-space-around"><code
  4373     class=css>space-around</code></a>’, <a
  4374     href="#align-content-space-around"
  4375     title="section 8.4."><strong>8.4.</strong></a>, <a
  4376     href="#justify-space-around"
  4377     title="section 8.2."><strong>8.2.</strong></a>
  4379    <li>‘<a href="#align-content-space-between"><code
  4380     class=css>space-between</code></a>’, <a
  4381     href="#align-content-space-between"
  4382     title="section 8.4."><strong>8.4.</strong></a>, <a
  4383     href="#justify-space-between"
  4384     title="section 8.2."><strong>8.2.</strong></a>
  4386    <li>static position, <a href="#flex-item-static-position"
  4387     title="section 4.1."><strong>4.1.</strong></a>
  4389    <li>‘<a href="#align-content-stretch"><code
  4390     class=css>stretch</code></a>’, <a href="#align-content-stretch"
  4391     title="section 8.4."><strong>8.4.</strong></a>, <a href="#align-stretch"
  4392     title="section 8.3."><strong>8.3.</strong></a>
  4394    <li>strut size, <a href="#strut-size"
  4395     title="section 9.4."><strong>9.4.</strong></a>
  4397    <li>style sheet
  4398     <ul>
  4399      <li>as conformance class, <a href="#style-sheet"
  4400       title="section 11.2."><strong>11.2.</strong></a>
  4401     </ul>
  4403    <li>‘<a href="#flex-flow-wrap"><code class=css>wrap</code></a>’, <a
  4404     href="#flex-flow-wrap" title="section 5.2."><strong>5.2.</strong></a>
  4406    <li>‘<a href="#flex-flow-wrap-reverse"><code
  4407     class=css>wrap-reverse</code></a>’, <a href="#flex-flow-wrap-reverse"
  4408     title="section 5.2."><strong>5.2.</strong></a>
  4409   </ul>
  4410   <!--end-index-->
  4411 </html>
  4412 <!-- Keep this comment at the end of the file
  4413 Local variables:
  4414 mode: sgml
  4415 sgml-declaration:"~/SGML/HTML4.decl"
  4416 sgml-default-doctype-name:"html"
  4417 sgml-minimize-attributes:t
  4418 sgml-nofill-elements:("pre" "style" "br")
  4419 sgml-live-element-indicator:t
  4420 sgml-omittag:nil
  4421 sgml-shorttag:nil
  4422 sgml-namecase-general:t
  4423 sgml-general-insert-case:lower
  4424 sgml-always-quote-attributes:t
  4425 sgml-indent-step:nil
  4426 sgml-indent-data:t
  4427 sgml-parent-document:nil
  4428 sgml-exposed-tags:nil
  4429 sgml-local-catalogs:nil
  4430 sgml-local-ecat-files:nil
  4431 End:
  4432 -->

mercurial