Thu, 14 Mar 2013 14:54:35 -0700
[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&component=Flexbox&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 <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 </style></pre>
671 <pre>
672 <section id='deals'>
673 <section class='sale-item'>
674 <h1>Computer Starter Kit</h1>
675 <p>This is the best computer money can buy, if you don't have much money.
676 <ul>
677 <li>Computer
678 <li>Monitor
679 <li>Keyboard
680 <li>Mouse
681 </ul>
682 <img src='images/computer.jpg'
683 alt='You get: a white computer with matching peripherals.'>
684 <button>BUY NOW</button>
685 </section>
686 <section class='sale-item'>
687 …
688 </section>
689 …
690 </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><length></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>'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>'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 <div style="display:flex">
968 <!-- flex item: block child -->
969 <div id="item1">block</div>
971 <!-- flex item: floated element; floating is ignored -->
972 <div id="item2" style="float: left;">float</div>
974 <!-- flex item: anonymous block box around inline content -->
975 anonymous item 3
977 <!-- flex item: inline child -->
978 <span>
979 item 4
980 <!-- flex items do not split around blocks -->
981 <div id=not-an-item>item 4</div>
982 item 4
983 </span>
984 </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>'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 <!-- --><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 <!-- --></style>
1205 <!-- -->…
1206 <!-- --></header>
1207 <!-- --><div>
1208 <!-- --> <article id="main">
1209 <!-- --> Interesting Stuff to Read
1210 <!-- --> </article>
1211 <!-- --> <nav>
1212 <!-- --> <ul>
1213 <!-- --> <li id="nav-about"><a href="#nav-about">About</a>
1214 <!-- --> …
1215 <!-- --> <li id="nav-projects"><a href="#nav-projects">Projects</a>
1216 <!-- --> <ul>
1217 <!-- --> <li><a href="…">Art</a>
1218 <!-- --> <li><a href="…">Architecture</a>
1219 <!-- --> <li><a href="…">Music</a>
1220 <!-- --> </ul>
1221 <!-- --> <li id="nav-interact"><a href="#nav-interact">Interact</a>
1222 <!-- --> …
1223 <!-- --> </ul>
1224 <!-- --> </nav>
1225 <!-- --></div>
1226 <!-- --><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><‘<a href="#flex-direction"><code
1492 class=property>flex-direction</code></a>’> || <‘<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><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;
1683 }
1684 .tabs > * {
1685 min-width: min-content;
1686 /* Prevent tabs from getting too small for their content. */
1687 }
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 <!DOCTYPE html>
1742 <header>...</header>
1743 <div id='main'>
1744 <article>...</article>
1745 <nav>...</nav>
1746 <aside>...</aside>
1747 </div>
1748 <footer>...</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;
1777 }
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><style>
1811 #flex {
1812 display: flex;
1813 flex-flow: row wrap;
1814 width: 300px;
1815 }
1816 .item {
1817 width: 80px;
1818 }
1819 </style>
1821 <div id="flex">
1822 <div class='item'>1</div>
1823 <div class='item'>2</div>
1824 <div class='item'>3</div>
1825 <div class='item'>4</div>
1826 </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 | [ <'flex-grow'> <'flex-shrink'>? ||
1899 <'flex-basis'> ]
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><‘<a href="#flex-grow"><code
1952 class=property>flex-grow</code></a>’></var>
1954 <dd>
1955 <p> This <var><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><‘<a href="#flex-shrink"><code
1965 class=property>flex-shrink</code></a>’></var>
1967 <dd>
1968 <p> This <var><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><‘<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><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: <positive-number></code>’
2083 <dd> Equivalent to ‘<code class=css>flex: <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><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><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><'width'></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 <style>
2377 nav > ul {
2378 display: flex;
2379 }
2380 nav > ul > li {
2381 min-width: min-content;
2382 /* Prevent items from getting too small for their content. */
2383 }
2384 nav > ul > #login {
2385 margin-left: auto;
2386 }
2387 </style>
2388 <nav>
2389 <ul>
2390 <li><a href=/about>About</a>
2391 <li><a href=/projects>Projects</a>
2392 <li><a href=/interact>Interact</a>
2393 <li id='login'><a href=/login>Login</a>
2394 </ul>
2395 </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>'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>'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><length></var>, a
3032 size of the initial containing block, or a <var><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 | [ <'flex-grow'> <'flex-shrink'>? ||
4027 <'flex-basis'> ]
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><'width'>
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><‘flex-direction’> || <‘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><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><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><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 -->