index.html 67.5 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en>
 <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>

  <title>CSS Flexible Box Layout Module</title>
  <link href=default.css rel=stylesheet type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>

   <h2 class="no-num no-toc" id=w3c-working>W3C Working Draft, 29 November
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>


    <dt>Previous version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a>


    <dt>Editors:

    <dd><a href="http://www.xanthir.com/contact">Tab Atkins Jr.</a>, Google
     Inc.

    <dd>Alex Mogilevsky, Microsoft Corporation, <a
     href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>

    <dd>L. David Baron, Mozilla Corporation, <a
     href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>

    <dt>Authors and former editors:

    <dd>Neil Deakin, Mozilla Corporation, <a
     href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>

    <dd>Ian Hickson, formerly of Opera Software, <a
     href="mailto:ian@hixie.ch">ian@hixie.ch</a>

    <dd>David Hyatt, formerly of Netscape Corporation, <a
     href="mailto:hyatt@apple.com">hyatt@apple.com</a>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym
    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract> Abstract</h2>

  <p>The specification describes a CSS box model optimized for user interface
   design. In flexbox layout model, the children of a box are laid out either
   horizontally or vertically, and unused space can be assigned to a
   particular child or distributed among the children by assignment of "flex"
   to the children that should expand. Nesting of these boxes (horizontal
   inside vertical, or vertical inside horizontal) can be used to build
   layouts in two dimensions.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-flexbox&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-flexbox<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <h2 class="no-num no-toc" id=table>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>

   <li><a href="#box-model"><span class=secno>2. </span> The Flexbox Box
    Model</a>
    <ul class=toc>
     <li><a href="#display-flexbox"><span class=secno>2.1. </span> New values
      for &lsquo;<code class=property>display</code>&rsquo; property</a>

     <li><a href="#flex-items"><span class=secno>2.2. </span> Flexbox
      Items</a>
      <ul class=toc>
       <li><a href="#abspos-flexbox-items"><span class=secno>2.2.1. </span>
        Positioning Absolutely Positioned Flexbox Items</a>
      </ul>
    </ul>

   <li><a href="#ordering-orientation"><span class=secno>3. </span> Ordering
    and Orientation</a>
    <ul class=toc>
     <li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
      Direction: the &lsquo;<code class=property>flex-flow</code>&rsquo;
      property</a>

     <li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
      the &lsquo;<code class=property>flex-order</code>&rsquo; property</a>
    </ul>

   <li><a href="#flexibility"><span class=secno>4. </span> Flexibility</a>
    <ul class=toc>
     <li><a href="#flex-function"><span class=secno>4.1. </span> The
      &lsquo;<code class=css>flex()</code>&rsquo; function</a>

     <li><a href="#resolving-flexible-lengths"><span class=secno>4.2. </span>
      Resolving Flexible Lengths</a>
    </ul>

   <li><a href="#alignment"><span class=secno>5. </span> Alignment</a>
    <ul class=toc>
     <li><a href="#flex-pack"><span class=secno>5.1. </span> Main Axis
      Alignment: the &lsquo;<code class=property>flex-pack</code>&rsquo;
      property</a>

     <li><a href="#flex-align"><span class=secno>5.2. </span> Cross Axis
      Alignment: the &lsquo;<code class=property>flex-align</code>&rsquo;
      property</a>
    </ul>

   <li><a href="#multiline"><span class=secno>6. </span> Multi-line
    Flexbox</a>
    <ul class=toc>
     <li><a href="#flex-line-pack"><span class=secno>6.1. </span>
      &lsquo;<code class=property>flex-line-pack</code>&rsquo; property</a>
    </ul>

   <li><a href="#layout-algorithm"><span class=secno>7. </span> Flexbox
    Layout Algorithm</a>

   <li><a href="#pagination"><span class=secno>8. </span> Page breaks in
    flexbox</a>

   <li><a href="#layout-interface"><span class=secno>9. </span> Box
    Properties and Sizing</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative">Normative references</a>

     <li class=no-num><a href="#informative">Other references</a>
    </ul>

   <li class=no-num><a href="#property">Property index</a>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=intro><span class=secno>1. </span> Introduction</h2>

  <p>CSS 2.1 defined four layout modes &mdash; algorithms which determine the
   size and position of boxes based on their relationships with their sibling
   and ancestor boxes: block layout, designed for laying out documents and
   simple applications; inline layout, designed for laying out text; table
   layout, designed for laying out information in a tabular format; and
   positioned layout, designed for very explicit positioning without much
   regard for other elements in the document. This module introduces a new
   layout mode, flexbox layout, which is designed for laying out more complex
   applications and webpages.

  <p>Flexbox layout is superficially similar to block layout. It lacks many
   of the more complex text or document-formatting properties that can be
   used in block layout, such as &lsquo;<code
   class=property>float</code>&rsquo; and &lsquo;<code
   class=property>columns</code>&rsquo;, but in return it gains more simple
   and powerful tools for aligning its contents in ways that webapps and
   complex web pages often need.

  <p>The contents of a flexbox can be laid out in any direction, can have
   their order swapped around dynamically, and can "flex" their sizes and
   positions to respond to the available space. If a flexbox is <a
   href="#multi-line"><i>multi-line</i></a>, the flexbox items flow in two
   dimensions, wrapping into separate lines in a fashion similar to how text
   is wrapped into multiple lines. The direction that these lines are stacked
   in can also be controlled explicitly, relative either to the current
   writing mode (logical directions) or explicit physical directions.

  <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>

  <p>An element with &lsquo;<code class=css>display:flexbox</code>&rsquo; or
   &lsquo;<code class=css>display:inline-flexbox</code>&rsquo; is a <dfn
   id=flexbox>flexbox</dfn>. Block-level children of a flexbox, and some
   other types of children, are called <dfn id=flexbox-item
   title="flexbox item|flexbox items|flexbox item's">flexbox items</dfn> and
   are laid out using the flexbox box model. <span class=note>(See the <a
   href="#flex-items">Flexbox Items</a> chapter, below, for specifics on
   which children are <a href="#flexbox-item"><i>flexbox items</i></a>
   directly and which children are instead wrapped in anonymous boxes which
   are then <a href="#flexbox-item"><i>flexbox items</i></a>)</span>

  <p>The flexbox layout algorithm is agnostic as to the physical direction
   the flexbox happens to be laid out in, so we will define several
   direction-agnostic terms here to make the rest of the spec easier to read
   and understand. The <dfn id=main-axis>main axis</dfn> of a flexbox is the
   axis on which <a href="#flexbox-item"><i>flexbox items</i></a> are laid
   out along. The <a href="#flexbox-item"><i>flexbox items</i></a> are
   ordered such that they start on the <dfn id=main-start>main-start</dfn>
   side of the flexbox, and go toward the <dfn id=main-end>main-end</dfn>
   side. A <a href="#flexbox-item"><i>flexbox item's</i></a> width or height,
   whichever is in the <a href="#main-axis"><i>main axis</i></a>, is the
   item's <dfn id=main-size>main size</dfn>. The <a
   href="#flexbox-item"><i>flexbox item's</i></a> &lsquo;<code
   class=property>width</code>&rsquo; or &lsquo;<code
   class=property>height</code>&rsquo; property, specifically, that is in the
   <a href="#main-axis"><i>main axis</i></a> is the item's <dfn
   id=main-size-property>main size property</dfn>. These terms are mapped to
   physical directions based on the first keyword in the &lsquo;<a
   href="#flex-flow0"><code class=property>flex-flow</code></a>&rsquo;
   property.

  <p>The axis perpendicular to the <a href="#main-axis"><i>main axis</i></a>
   is called the <dfn id=cross-axis>cross axis</dfn>, and similarly has <dfn
   id=cross-start>cross-start</dfn> and <dfn id=cross-end>cross-end</dfn>
   directions and sides defined. The width or height of a <a
   href="#flexbox-item"><i>flexbox item</i></a>, whichever is in the <a
   href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
   id=cross-size>cross size</dfn>, and similarly the actual &lsquo;<code
   class=property>width</code>&rsquo; or &lsquo;<code
   class=property>height</code>&rsquo; property, whichever is in the <a
   href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
   id=cross-size-property>cross size property</dfn>. These terms are mapped
   to physical directions based on the orientation of the <a
   href="#main-axis"><i>main axis</i></a> and the second keyword in the
   &lsquo;<a href="#flex-flow0"><code
   class=property>flex-flow</code></a>&rsquo; property.

  <p>The contents of a flexbox can be easily and powerfully manipulated with
   a handful of properties. Most significantly, <a
   href="#flexbox-item"><i>flexbox items</i></a> can "flex" their <a
   href="#main-size"><i>main size</i></a> by using the &lsquo;<code
   class=css>flex()</code>&rsquo; function in the &lsquo;<code
   class=property>width</code>&rsquo; or &lsquo;<code
   class=property>height</code>&rsquo; property. This "flexing" allows the
   items to get bigger or smaller based on the available space in the page.
   If there is leftover space in the flexbox after all of the <a
   href="#flexbox-item"><i>flexbox items</i></a> have finished flexing, the
   items can be aligned, centered, or distributed with the &lsquo;<a
   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
   property. <a href="#flexbox-item"><i>Flexbox items</i></a> can also be
   completely rearranged within the flexbox with the &lsquo;<a
   href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
   property.

  <p>In the <a href="#cross-axis"><i>cross axis</i></a>, <a
   href="#flexbox-item"><i>flexbox items</i></a> can either "flex" to fill
   the available space or be aligned within the space with the &lsquo;<a
   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;
   property. If a flexbox is <a href="#multi-line"><i>multi-line</i></a>, new
   lines are added in the <a href="#cross-end"><i>cross-end</i></a>
   direction, and can similarly be aligned, centered, or distributed within
   the flexbox with the &lsquo;<a href="#flex-line-pack0"><code
   class=property>flex-line-pack</code></a>&rsquo; property.

  <p>Similar to other layout modes such as table layout, a flexbox acts like
   a block when placed into elements using other layout modes. Inline
   flexboxes act like inline-blocks.

  <div class=example>
   <p>For example, the following HTML snippet declares a flexbox with a few
    children. The flexbox is horizontal, and the children's widths don't fill
    the flexbox's width, so the additional space is distributed between the
    children. The flexbox's height isn't explicitly specified, so it shrinks
    to the height of its tallest child and centers the other children within
    it:</p>

   <pre>
&lt;p style="width: 500px; padding: 5px; display: flexbox; flex-pack: distribute; flex-align: center;">
	&lt;button style="width: 200px;">Child 1&lt;br>Another Line&lt;/button>
	&lt;button style="width: 100px;">Child 2&lt;/button>
	&lt;button style="width: 100px;">Child 3&lt;/button>
&lt;/p></pre>

   <p>This will render approximately like the following:</p>

   <p
    style="border: thin solid black; background: white; width: 500px; padding: 5px; overflow: hidden;">
    <button
    style="float: left; width: 200px; height: 40px; margin-right: 50px;">Child
    1<br>
    Another Line</button> <button
    style="float: left; width: 100px; height: 22px; margin-top: 9px;">Child
    2</button> <button
    style="float: right; width: 100px; height: 22px; margin-top: 9px;">Child
    3</button></p>
  </div>

  <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
   &lsquo;<code class=property>display</code>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td>display

    <tr>
     <th>New value:

     <td>flexbox | inline-flexbox
  </table>

  <p>You can declare that an element is a flexbox, and thus should use
   flexbox layout for its contents, by setting the &lsquo;<code
   class=property>display</code>&rsquo; property on the element to the value
   &lsquo;<a href="#flexbox"><code class=property>flexbox</code></a>&rsquo;
   or &lsquo;<code class=property>inline-flexbox</code>&rsquo;.

  <p>The &lsquo;<a href="#flexbox"><code class=css>flexbox</code></a>&rsquo;
   value makes the flexbox act like a block in other layout modes. The
   &lsquo;<code class=css>inline-flexbox</code>&rsquo; value makes the
   flexbox act like an inline-block in other layout modes.

  <p>Flexboxes use a new layout algorithm, and so some properties that were
   designed with the assumption of block layout don't make sense in a flexbox
   context. In particular:

  <ul>
   <li>all of the &lsquo;<code class=css>column-*</code>&rsquo; properties in
    the Multicol module compute to their initial values on a flexbox
    (&lsquo;<code class=property>break-before</code>&rsquo;, &lsquo;<code
    class=property>break-inside</code>&rsquo;, and &lsquo;<code
    class=property>break-after</code>&rsquo; are still valid on a flexbox).

   <li>&lsquo;<code class=property>float</code>&rsquo; and &lsquo;<code
    class=property>clear</code>&rsquo; compute to their initial values on a
    flexbox item

   <li>&lsquo;<code class=property>vertical-align</code>&rsquo; has no effect
    on a flexbox item
  </ul>

  <p>A flexbox creates a new flexbox formatting context for its contents.
   This is similar to a block formatting context: floats must not intrude
   into the flexbox, and the flexbox's margins do not collapse with the
   margins of its contents. Additionally, all of the <a
   href="#flexbox-item"><i>flexbox items</i></a> establish new block
   formatting contexts for their contents.

  <p class=issue>Figure out the right terms to use here.

  <h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>

  <p>Flexbox layout algorithm operates on <a href="#flexbox-item"><i>flexbox
   items</i></a>, which are boxes that satisfy at least one of the following
   criteria:

  <ol>
   <li>Immediate block-level children of flexbox

   <li>Atomic inline-level children of flexbox

   <li>Contiguous run of non-replaced inline children, wrapped into an
    anonymous block
  </ol>

  <div class=example>
   <p>Examples of flexbox items:</p>

   <pre>
&lt;div style="display:flexbox">

    &lt;!-- flexbox item: block-level child -->
    &lt;div id="item1">block&lt;/div>

    &lt;!-- not a flexbox item, because it's out-of-flow -->
    &lt;div id="not-an-item1.5" style="position: absolute;">block&lt;/div>

    &lt;!-- flexbox item: block-level child -->
    &lt;div id="item2" style="display:table">table&lt;/div>

    &lt;!-- flexbox item: anonymous table wrapped around table-cell -->
    &lt;div id="item3" style="display:table-cell">table-cell&lt;/div>

    &lt;!-- flexbox item: anonymous block around inline content -->
    anonymous item 4

    &lt;!-- flexbox item: block-level child -->
    &lt;div id="item5">block&lt;/div>

    &lt;!-- flexbox item: anonymous block around inline content -->
    anonymous item 6.1
    &lt;span id="item6.1">
        text 6.2
        &lt;div id="not-an-item6.3">block&lt;/div>
        text 6.4
    &lt;/span>

    &lt;!-- flexbox item: block-level replaced element -->
    &lt;iframe id="item7">

    &lt;!-- flexbox item: inline-level replaced element -->
    &lt;img id="item7" style="display:inline">

    &lt;!-- flexbox item: inline-level replaced element -->
    &lt;button id="item8">button&lt;/button>

    &lt;!-- flexbox item: inline-table -->
    &lt;div id="item9" style="display:inline-table">table&lt;/div>
&lt;/div></pre>

   <p>Notice that block element "not-an-item6.3" is not a separate flexbox
    item, because it is contained inside an inline element which is being
    wrapped into an anonymous flex item. Similarly, the block element
    "not-an-item1.5" is not a flexbox item, because it's absolutely
    positioned and thus out of flow.</p>
  </div>

  <p>Similar to table cells, flexbox items respond specially to the
   &lsquo;<code class=css>collapse</code>&rsquo; value of the &lsquo;<code
   class=property>visibility</code>&rsquo; property. When a flexbox item is
   set to &lsquo;<code class=css>visibility: collapse;</code>&rsquo;, the
   item does not generate a box at all (identical to setting &lsquo;<code
   class=css>display: none;</code>&rsquo;).

  <h4 id=abspos-flexbox-items><span class=secno>2.2.1. </span> Positioning
   Absolutely Positioned Flexbox Items</h4>

  <p>Absolutely positioned children of a flexbox are not <a
   href="#flexbox-item"><i>flexbox items</i></a>, but their "static position"
   (their position when the &lsquo;<code
   class=property>top</code>&rsquo;/&lsquo;<code
   class=property>right</code>&rsquo;/&lsquo;<code
   class=property>bottom</code>&rsquo;/&lsquo;<code
   class=property>left</code>&rsquo; properties are &lsquo;<code
   class=css>auto</code>&rsquo;) responds somewhat to the flexbox's various
   properties. The element's static position in the flexbox's <a
   href="#cross-axis"><i>cross axis</i></a> is on the <a
   href="#cross-start"><i>cross-start</i></a> edge of the flexbox's content
   box. The static position in the flexbox's <a href="#main-axis"><i>main
   axis</i></a> is slightly more complex to compute:

  <p>First, find the element's <dfn id=hypothetical-neighbors>hypothetical
   neighbors</dfn> by assuming that the element is a normal <a
   href="#flexbox-item"><i>flexbox item</i></a> with &lsquo;<code
   class=css>flex-order:0</code>&rsquo;, and reorder the flexbox's contents
   as mandated by &lsquo;<a href="#flex-order0"><code
   class=property>flex-order</code></a>&rsquo;. The <a
   href="#flexbox-item"><i>flexbox items</i></a> immediately preceding and
   following the element in the flexbox's direction (if any) are the
   element's <a href="#hypothetical-neighbors"><i>hypothetical
   neighbors</i></a>.

  <p>If the element has two neighbors, its static position in the <a
   href="#main-axis"><i>main axis</i></a> is exactly in the center of the
   packing space between them when the flexbox is actually laid out. If the
   element has only a preceding neighbor, its static position in the <a
   href="#main-axis"><i>main axis</i></a> is flush with the <a
   href="#main-end"><i>main-end</i></a> edge of the margin box of the
   neighbor. If the element has only a following neighbor, its static
   position in the <a href="#main-axis"><i>main axis</i></a> is flush with
   the <a href="#main-start"><i>main-start</i></a> edge of the margin box of
   the neighbor. Finally, if the element has no neighbors (the flexbox has no
   in-flow children at all), the static position in the <a
   href="#main-axis"><i>main axis</i></a> is based on the value of &lsquo;<a
   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;: if
   the value is &lsquo;<a href="#flex-line-pack-start"><code
   class=css>start</code></a>&rsquo; or &lsquo;<code
   class=css>distribute</code>&rsquo;, it's flush with the <a
   href="#main-start"><i>main-start</i></a> edge of the flexbox's content
   box; if the value is &lsquo;<a href="#flex-line-pack-end"><code
   class=css>end</code></a>&rsquo;, it's flush with the <a
   href="#main-end"><i>main-end</i></a> edge of the flexbox's content box; if
   the value is &lsquo;<a href="#flex-line-pack-center"><code
   class=css>center</code></a>&rsquo;, it's centered within the flexbox's
   content box.

  <h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
   Orientation</h2>

  <p>The first level of flexbox functionality is the ability to lay out a
   flexbox's contents in any direction and in any order. This allows an
   author to trivially achieve effects that would previously have required
   complex or fragile methods, such as using the &lsquo;<code
   class=property>float</code>&rsquo; property to lay out a horizontal
   navigation bar (which then requires further effort with the &lsquo;<code
   class=property>clear</code>&rsquo; property or others to make the elements
   interact nicely with the rest of the page). This functionality is exposed
   through the &lsquo;<a href="#flex-flow0"><code
   class=property>flex-flow</code></a>&rsquo; and &lsquo;<a
   href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
   properties.

  <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
   &lsquo;<a href="#flex-flow0"><code
   class=property>flex-flow</code></a>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flex-flow0>flex-flow</dfn>

    <tr>
     <th>Values:

     <td>[ row | row-reverse | column | column-reverse ] [ wrap |
      wrap-reverse ]?

    <tr>
     <th>Initial:

     <td>row

    <tr>
     <th>Applies To:

     <td>flexboxes

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Computed Value:

     <td>specified value

    <tr>
     <th>Media:

     <td>visual
  </table>

  <p>The &lsquo;<a href="#flex-flow0"><code
   class=property>flex-flow</code></a>&rsquo; property specifies how <a
   href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox.
   The value consists of one or two keywords: the first sets the orientation
   and direction of the flexbox's <a href="#main-axis"><i>main axis</i></a>,
   which affects the direction that flexbox items are laid out in, and the
   meaning of the &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; properties; the second, if
   specified, marks the flexbox as being multiline and sets the direction of
   the <a href="#cross-axis"><i>cross axis</i></a>, which affects the
   direction new lines are stacked in, and the meaning of the &lsquo;<a
   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo; and
   &lsquo;<a href="#flex-line-pack0"><code
   class=property>flex-line-pack</code></a>&rsquo; properties.

  <dl>
   <dt><dfn id=flex-flow-row>row</dfn>

   <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
    orientation as the inline axis of the current writing mode (the direction
    that text is laid out in). The <a
    href="#main-start"><i>main-start</i></a> and <a
    href="#main-end"><i>main-end</i></a> directions are equivalent to the
    "start" and "end" directions, respectively, of the current writing mode.

   <dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>

   <dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
    href="#main-start"><i>main-start</i></a> and <a
    href="#main-end"><i>main-end</i></a> directions are swapped.

   <dt><dfn id=flex-flow-column>column</dfn>

   <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
    orientation as the block axis of the current writing mode (the direction
    that blocks are laid out in). The <a
    href="#main-start"><i>main-start</i></a> and <a
    href="#main-end"><i>main-end</i></a> directions are equivalent to the
    "before" and "after" directions, respectively, of the current writing
    mode.

   <dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>

   <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
    href="#main-start"><i>main-start</i></a> and <a
    href="#main-end"><i>main-end</i></a> directions are swapped.

   <dt><dfn id=flex-flow-wrap>wrap</dfn>

   <dd>The flexbox is <a href="#multi-line"><i>multi-line</i></a>. The <a
    href="#cross-start"><i>cross-start</i></a> direction is equivalent to
    either the "start" or "before" direction of the current writing mode,
    whichever is in the <i>cross-axis</i>, and the <a
    href="#cross-end"><i>cross-end</i></a> direction is the opposite
    direction of <a href="#cross-start"><i>cross-start</i></a>.

   <dt><dfn id=flex-flow-wrap-reverse>wrap-reverse</dfn>

   <dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the <a
    href="#cross-start"><i>cross-start</i></a> and <a
    href="#cross-end"><i>cross-end</i></a> directions are swapped.
  </dl>

  <p>If the second keyword is omitted, the flexbox is <a
   href="#single-line"><i>single-line</i></a>, and the <a
   href="#cross-start"><i>cross-start</i></a> and <a
   href="#cross-end"><i>cross-end</i></a> directions are set as described
   above for the &lsquo;<a href="#flex-flow-wrap"><code
   class=css>wrap</code></a>&rsquo; keyword.

  <div class=example>
   <p>Some examples of valid flows:</p>

   <pre>
div { flex-flow: row; }                 /* Initial value. Main axis is inline,
                                           no wrap. */
div { flex-flow: column wrap; }         /* Main axis is block-direction and lines
                                           wrap in the inline direction.  For an
                                           English page, the main axis is top-to-bottom
                                           and lines wrap to the right. */
div { writing-mode: tb-rl;              /* Main axis is block direction (right to left).
      flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
  </div>

  <p class=issue>Is there a good, shorter way to refer to the reversed
   physical directions than the 8-character "-reverse" suffix?

  <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
   &lsquo;<a href="#flex-order0"><code
   class=property>flex-order</code></a>&rsquo; property</h3>

  <p><a href="#flexbox-item"><i>Flexbox items</i></a> are, by default,
   displayed and laid out in the same order as they appear in the source
   document. The &lsquo;<a href="#flex-order0"><code
   class=property>flex-order</code></a>&rsquo; property may be used to change
   this ordering.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flex-order0>flex-order</dfn>

    <tr>
     <th>Value:

     <td>&lt;number>

    <tr>
     <th>Initial:

     <td>0

    <tr>
     <th>Applies to:

     <td><a href="#flexbox-item"><i>flexbox items</i></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Computed value:

     <td>specified value

    <tr>
     <th>Media:

     <td>visual
  </table>

  <p>The &lsquo;<a href="#flex-order0"><code
   class=property>flex-order</code></a>&rsquo; property assigns <a
   href="#flexbox-item"><i>flexbox items</i></a> to ordinal groups.

  <p>Ordinal groups control the order in which <a
   href="#flexbox-item"><i>flexbox items</i></a> appear. A flexbox will lay
   out its content starting from the lowest numbered ordinal group and going
   up. Items with the same ordinal group are laid out in the order they
   appear in the source document.

  <div class=example>
   <p>This example shows how ordinal groups might be used.</p>

   <pre>
div { display: flexbox; }
#item1, #item3 { flex-order: 1; }
#item4 { flex-order: 0; }

&lt;div>
	&lt;button id="item1">One&lt;/button>
	&lt;button id="item2">Two&lt;/button>
	&lt;button id="item3">Three&lt;/button>
	&lt;button id="item4">Four&lt;/button>
&lt;/div></pre>

   <p>Items 2 and 4 are both in ordinal group 0 (item 2 defaults to
    &lsquo;<code class=css>0</code>&rsquo; because it doesn't specify one
    explicitly). This is the lowest ordinal group, so they'll be displayed
    first, and in document order, with Item 2 displayed before Item 4. The
    remaining items are both in ordinal group 1, so the resulting display
    order will be:</p>

   <div style="border: medium solid green; display: inline-block;">
    <button>Two</button> <button>Four</button> <button>One</button>
    <button>Three</button></div>
  </div>

  <p class=issue>Add a realistic example of tab reordering.

  <p class=issue>Add an example of reordering columns in a page.

  <h2 id=flexibility><span class=secno>4. </span> Flexibility</h2>

  <p>The defining aspect of flexbox layout is the ability to make the <a
   href="#flexbox-item"><i>flexbox items</i></a> "flex", altering their width
   or height to fill the available space. This is done by declaring a <dfn
   id=flexible-length>flexible length</dfn> with the &lsquo;<code
   class=css>flex()</code>&rsquo; function, defined below.

  <h3 id=flex-function><span class=secno>4.1. </span> The &lsquo;<code
   class=css>flex()</code>&rsquo; function</h3>

  <p>The &lsquo;<code class=css>flex()</code>&rsquo; function is used to
   specify the parameters of a <dfn id=flexible-length0
   title="flexible length|flexible lengths|flexible length's">flexible
   length</dfn>: the <dfn id=positive-flexibility
   title="positive flexibility">positive</dfn> and <dfn
   id=negative-flexibility>negative flexibility</dfn>, and the <dfn
   id=preferred-size>preferred size</dfn>. The syntax of the &lsquo;<code
   class=css>flex()</code>&rsquo; function is:

  <pre
   class=prod>flex( [ &lt;pos-flex> &lt;neg-flex>? ]? || &lt;preferred-size>? )</pre>

  <p><code>&lt;pos-flex></code> and <code>&lt;neg-flex></code> are
   non-negative <code>&lt;numbers>s</code>, while
   <code>&lt;preferred-size></code> is any value (other than another
   &lsquo;<code class=css>flex()</code>&rsquo; function) that would be valid
   in the &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
   class=property>height</code>&rsquo; property in which the function is
   used, except that zero lengths must not omit their unit.

  <p>The <code>&lt;pos-flex></code> component sets the length's <a
   href="#positive-flexibility"><i>positive flexibility</i></a>; if omitted,
   the <a href="#positive-flexibility"><i>positive flexibility</i></a>
   defaults to &lsquo;<code class=css>1</code>&rsquo;. The
   <code>&lt;neg-flex></code> component sets the length's <a
   href="#negative-flexibility"><i>negative flexibility</i></a>; if omitted,
   it defaults to &lsquo;<code class=css>0</code>&rsquo;. The
   <code>&lt;preferred-size></code> component sets the length's <a
   href="#preferred-size"><i>preferred size</i></a>; if omitted, it defaults
   to &lsquo;<code class=css>0px</code>&rsquo;.

  <p class=issue>Examples!

  <h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
   Flexible Lengths</h3>

  <p class=note>Note: This section is non-normative.

  <p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
   into normal, inflexible lengths by figuring out how large all of the <a
   href="#flexible-length0"><i>flexible lengths</i></a> in the flexbox
   <em>want</em> to be, then either growing or shrinking that <a
   href="#preferred-size"><i>preferred size</i></a> so that the <a
   href="#flexbox-item"><i>flexbox items</i></a> exactly fill the flexbox,
   neither overflowing nor leaving extra unfilled space.

  <p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
   into normal inflexible lengths based on their <a
   href="#preferred-size"><i>preferred size</i></a>, their flexibility, and
   the amount of free space in the flexbox. The exact algorithm is described
   in <a href="#layout-algorithm">a later section of this spec</a>, but in
   general, it works like this:

  <ol>
   <li>First, set all the <a href="#flexible-length0"><i>flexible
    lengths</i></a> to their <a href="#preferred-size"><i>preferred
    size</i></a>.

   <li>Then, lay out the flexbox, and see if there is free space left, or if
    the flexbox is overflowing.

   <li>If there's free space, distribute it among the <a
    href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
    their <a href="#positive-flexibility"><i>positive flexibility</i></a>. If
    the flexbox is overflowing, shrink the <a
    href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
    their <a href="#negative-flexibility"><i>negative flexibility</i></a>.

   <li>If there's free space and any <a href="#flexible-length0"><i>flexible
    lengths</i></a> are violating a max width or height constraint, change
    them into the largest inflexible length that doesn't violate their
    constraint and return to step 2. If the flexbox is overflowing and any <a
    href="#flexible-length0"><i>flexible lengths</i></a> are violating a min
    width or height constraint, change them into the smallest inflexible
    length that doesn't violate their constraint and return to step 2.

   <li>If there's free space and any <a href="#flexible-length0"><i>flexible
    lengths</i></a> are violating a min width or height constraint, change
    them into the smallest inflexible length that doesn't violate their
    constraint and return to step 2. If the flexbox is overflowing and any <a
    href="#flexible-length0"><i>flexible lengths</i></a> are violating a max
    width or height constraint, change them into the largest inflexible
    length that doesn't violate their constraint and return to step 2.
  </ol>

  <p class=issue>This is too much detail for a non-normative section. This is
   living here only until I flesh out the layout algorithm section. Then this
   can return to being a fairly simple explanation of what goes on.

  <p>If a flexible length is used in a context where it is not allowed (for
   example, on the &lsquo;<code class=property>width</code>&rsquo; property
   of an element that is not a <a href="#flexbox-item"><i>flexbox
   item</i></a>), it represents its <a href="#preferred-size"><i>preferred
   size</i></a>. Authors must not use flexible lengths in contexts where they
   are not allowed.

  <p class=issue>Examples!

  <h2 id=alignment><span class=secno>5. </span> Alignment</h2>

  <p>After a flexbox's contents have finished their flexing, they can be
   aligned in both the <a href="#main-axis"><i>main axis</i></a> with
   &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; and the <a
   href="#cross-axis"><i>cross axis</i></a> with &lsquo;<a
   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;.
   These properties make many common types of alignment trivial, including
   some things that were very difficult in CSS 2.1, like horizontal and
   vertical centering.

  <h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
   &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flex-pack0>flex-pack</dfn>

    <tr>
     <th>Value:

     <td>start | end | center | justify

    <tr>
     <th>Initial:

     <td>start

    <tr>
     <th>Applies to:

     <td>flexboxes

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Computed Value:

     <td>specified value

    <tr>
     <th>Media:

     <td>visual
  </table>

  <p>The &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; property aligns <a
   href="#flexbox-item"><i>flexbox items</i></a> in the <a
   href="#main-axis"><i>main axis</i></a> of the current line of the flexbox.
   This is done <em title="">after</em> any flexible lengths have been
   resolved. Typically it helps distribute extra free space leftover when
   either all the <a href="#flexbox-item"><i>flexbox items</i></a> on a line
   are inflexible, or are flexible but have reach their maximum size, but it
   also exerts some control over the alignment of items when they overflow
   the line.

  <dl>
   <dt><dfn id=flex-pack-start>start</dfn>

   <dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
    start of the line. The <a href="#main-start"><i>main-start</i></a> margin
    edge of the first <a href="#flexbox-item"><i>flexbox item</i></a> on the
    line is placed flush with the <a href="#main-start"><i>main-start</i></a>
    edge of the line, and each subsequent <a href="#flexbox-item"><i>flexbox
    item</i></a> is placed flush with the preceding item.

   <dt><dfn id=flex-pack-end>end</dfn>

   <dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
    end of the line. The <a href="#main-end"><i>main-end</i></a> margin edge
    of the last <a href="#flexbox-item"><i>flexbox item</i></a> is placed
    flush with the <a href="#main-end"><i>main-end</i></a> edge of the line,
    and each preceding <a href="#flexbox-item"><i>flexbox item</i></a> is
    placed flush with the subsequent item.

   <dt><dfn id=flex-pack-center>center</dfn>

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

   <dt><dfn id=flex-pack-justify>justify</dfn>

   <dd><a href="#flexbox-item"><i>Flexbox items</i></a> are evenly
    distributed in the line. If the leftover free-space is negative or there
    is only a single <a href="#flexbox-item"><i>flexbox item</i></a> on the
    line, this value is identical to &lsquo;<a
    href="#flex-line-pack-start"><code class=css>start</code></a>&rsquo;.
    Otherwise, the <a href="#main-start"><i>main-start</i></a> margin edge of
    the first <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
    placed flush with the <a href="#main-start"><i>main-start</i></a> edge of
    the line, the <a href="#main-end"><i>main-end</i></a> margin edge of the
    last <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
    placed flush with the <a href="#main-end"><i>main-end</i></a> edge of the
    line, and the remaining <a href="#flexbox-item"><i>flexbox items</i></a>
    on the line are distributed so that the empty space between any two
    adjacent items is the same.
  </dl>

  <div class=example>
   <p class=issue>TODO: Examples showing the four values.</p>
  </div>

  <p class=note>A previous revision of this spec allowed margins to flex
   directly, which allowed an effect similar to &lsquo;<a
   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;. In
   particular, it allowed an author to, for example, split a flexbox in half,
   with some of the items pushed toward the start and the rest pushed toward
   the end, by flexing exactly one margin. This sort of effect is no longer
   possible without either using the ::before or ::after pseudoelements or
   adding additional elements to the document, to act as an empty item that
   can then flex. It's expected that we will develop something in the future
   to make this easier, such as a more general pseudoelement or perhaps the
   ability to explicitly control individual spaces between flexbox items.

  <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
   &lsquo;<a href="#flex-align0"><code
   class=property>flex-align</code></a>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flex-align0>flex-align</dfn>

    <tr>
     <th>Value:

     <td>start | end | center | baseline | stretch

    <tr>
     <th>Initial:

     <td>stretch

    <tr>
     <th>Applies to:

     <td><a href="#flexbox-item"><i>flexbox items</i></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Computed Value:

     <td>specified value

    <tr>
     <th>Media:

     <td>visual
  </table>

  <p>The &lsquo;<a href="#flex-align0"><code
   class=property>flex-align</code></a>&rsquo; property aligns <a
   href="#flexbox-item"><i>flexbox items</i></a> in the <a
   href="#cross-axis"><i>cross axis</i></a> of the current line of the
   flexbox, similar to &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; but in the perpendicular axis.
   Note that &lsquo;<a href="#flex-align0"><code
   class=property>flex-align</code></a>&rsquo; applies to individual <a
   href="#flexbox-item"><i>flexbox items</i></a>, while &lsquo;<a
   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
   applies to the flexbox itself.

  <dl>
   <dt><dfn id=flex-align-start>start</dfn>

   <dd>The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
    <a href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the
    <a href="#cross-start"><i>cross-start</i></a> edge of the line.

   <dt><dfn id=flex-align-end>end</dfn>

   <dd>The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
    href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the <a
    href="#cross-end"><i>cross-end</i></a> edge of the line.

   <dt><dfn id=flex-align-center>center</dfn>

   <dd>The <a href="#flexbox-item"><i>flexbox item's</i></a> margin box is
    centered in the <a href="#cross-axis"><i>cross axis</i></a> within the
    line.

   <dt><dfn id=flex-align-baseline>baseline</dfn>

   <dd>
    <p>If the <a href="#flexbox-item"><i>flexbox item's</i></a> inline axis
     is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this
     value is identical to &lsquo;<a href="#flex-line-pack-start"><code
     class=css>start</code></a>&rsquo;.</p>

    <p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
     line with &lsquo;<code class=css>flex-align:baseline</code>&rsquo; that
     don't run afoul of the previous paragraph are aligned such that their
     baselines align, and the item with the largest distance between its
     baseline and its <a href="#cross-start"><i>cross-start</i></a> margin
     edge is placed flush against the <a
     href="#cross-start"><i>cross-start</i></a> edge of the line.</p>

   <dt><dfn id=flex-align-stretch>stretch</dfn>

   <dd>
    <p>If the <a href="#cross-size-property"><i>cross size property</i></a>
     of the <a href="#flexbox-item"><i>flexbox item</i></a> is anything other
     than &lsquo;<code class=css>auto</code>&rsquo;, this value is identical
     to &lsquo;<a href="#flex-line-pack-start"><code
     class=css>start</code></a>&rsquo;.</p>

    <p>Otherwise, this value causes the <a
     href="#cross-size-property"><i>cross size property</i></a> of the <a
     href="#flexbox-item"><i>flexbox item</i></a> to resolve to the length
     necessary to make the <a href="#cross-size"><i>cross size</i></a> of the
     item's margin box the same size as the line.</p>
  </dl>

  <div class=example>
   <p>By using a vertical flexbox and &lsquo;<a href="#flex-align0"><code
    class=property>flex-align</code></a>&rsquo;, we can emulate the
    functionality of HTML's <code>&lt;center></code> element:</p>

   <pre>&lt;div>
	&lt;div>foo foo foo foo&lt;/div>
	&lt;div>bar bar&lt;br>bar bar&lt;/div>
	&lt;div>foo foo foo foo foo foo foo foo foo foo foo foo&lt;/div>
&lt;/div>
&lt;style>
	div {
		display: flexbox;
		flex-flow: column;
		width: 200px;
	}
	div > div {
		flex-align: center;
	}
&lt;/style></pre>

   <p><img alt="" src="images/basic-vertical-flexbox.png"></p>
  </div>

  <p class=issue>More examples for the other alignment values!

  <p>The precise effects of this property are articulated in the <a
   href="#layout-algorithm">Layout Algorithm</a> section.

  <h2 id=multiline><span class=secno>6. </span> Multi-line Flexbox</h2>

  <p>A flexbox can be either single-line or multi-line, depending on the
   &lsquo;<a href="#flex-flow0"><code
   class=property>flex-flow</code></a>&rsquo; property. A <dfn
   id=single-line>single-line</dfn> flexbox lays out all of its children in a
   single line, even if that would cause the flexbox to overflow its bounds.
   A <dfn id=multi-line>multi-line</dfn> flexbox breaks its <a
   href="#flexbox-item"><i>flexbox items</i></a> across multiple lines to
   avoid overflowing, similar to how text is broken onto a new line when it
   gets too wide to fit on the existing line. Every line contains at least
   one <a href="#flexbox-item"><i>flexbox item</i></a>, unless the flexbox
   itself is completely empty.

  <p>When additional lines are created, they are stacked in the flexbox in
   the <a href="#cross-axis"><i>cross axis</i></a>. Each line is completely
   independent; flexible lengths and the &lsquo;<a href="#flex-pack0"><code
   class=property>flex-pack</code></a>&rsquo; and &lsquo;<a
   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;
   properties only pay attention to the items on a single line at a time. The
   <a href="#main-size"><i>main size</i></a> of a line is the same as the <a
   href="#main-size"><i>main size</i></a> of the flexbox's content box. The
   <a href="#cross-size"><i>cross size</i></a> of a line depends on whether
   the flexbox is <a href="#single-line"><i>single-line</i></a> or <a
   href="#multi-line"><i>multi-line</i></a>: the <a
   href="#cross-size"><i>cross size</i></a> of the sole line in a <a
   href="#single-line"><i>single-line</i></a> flexbox is the same as the <a
   href="#cross-size"><i>cross size</i></a> of the flexbox's content box,
   while the <a href="#cross-size"><i>cross size</i></a> of a line in a <a
   href="#multi-line"><i>multi-line</i></a> flexbox is the minimum size
   necessary to contain the <a href="#flexbox-item"><i>flexbox items</i></a>
   on the line, after aligning them with &lsquo;<a href="#flex-align0"><code
   class=property>flex-align</code></a>&rsquo;. The lines themselves are then
   aligned within a flexbox with the &lsquo;<a href="#flex-line-pack0"><code
   class=property>flex-line-pack</code></a>&rsquo; property.

  <div class=example>
   <p>This example shows four buttons that do not fit horizontally.</p>

   <pre>&lt;style>
#div1 {
	display: flexbox;
	flex-flow: row wrap;
	width: 300px;
}
button {
	width: flex(80px 1);
}
&lt;style>

&lt;div id="div1">
	&lt;button id="button1">Elephant&lt;/button>
	&lt;button id="button2">Tiger&lt;/button>
	&lt;button id="button3">Antelope&lt;/button>
	&lt;button id="button4">Wildebeest&lt;/button>
&lt;/div></pre>

   <p>The buttons are first set to their preferred widths, in this case 80
    pixels. This will allow the first three buttons to fit in 240 pixels with
    60 pixels left over of remaining space. Because the &lsquo;<a
    href="#flex-flow0"><code class=property>flex-flow</code></a>&rsquo;
    property specifies a multiline flexbox (due to the &lsquo;<a
    href="#flex-flow-wrap"><code class=css>wrap</code></a>&rsquo; keyword
    appearing in its value), the flexbox will create an additional line to
    contain the last button.</p>

   <p>Flexibility is applied to each element, separately for each line. The
    first line has 60 pixels of remaining space and all of the buttons have
    the same flexibility, so each of the three buttons on that line will
    receive 20 pixels of extra width, ending up 100px wide. The remaining
    button is on a line of its own and will stretch to the entire width of
    the line, or 300 pixels.</p>

   <div style="width:300px; border:medium solid green; overflow: hidden;">
    <button style="width:100px; float: left;">Elephant</button> <button
    style="width:100px; float: left;">Tiger</button> <button
    style="width:100px; float: left;">Antelope</button> <button
    style="width:300px; float: left;">Wildebeest</button></div>

   <p>If the box was resized, the buttons may rearrange onto different lines
    as necessary.</p>

   <p>If the style rules in the example above were changed to the following:</p>

   <pre>
#div1 {
	display: flexbox;
	flex-flow: row wrap;
	flex-pack: center;
	width: 300px;
}
button {
	width: flex(80px 1);
	max-width: 90px;
}</pre>

   <p>Similar to the previous example, the first three buttons will fit on
    the first line, and the last button will wrap onto a new line. However,
    when the buttons attempt to flex they can only grow to 90px each, due to
    their &lsquo;<code class=property>max-width</code>&rsquo; property. This
    leaves 30px of free space on the first line and 210px of free space on
    the second line. Because &lsquo;<a href="#flex-pack0"><code
    class=property>flex-pack</code></a>&rsquo; is set to &lsquo;<a
    href="#flex-line-pack-center"><code class=css>center</code></a>&rsquo;,
    the buttons will be centered on each line, with the free space split
    equally on either side.</p>

   <div style="width:300px; border:medium solid green; text-align:center;">
    <button
    style="width:90px; float: left; margin-left: 15px;">Elephant</button>
    <button style="width:90px; float: left;">Tiger</button> <button
    style="width:90px; float: left;">Antelope</button> <button
    style="width:90px">Wildebeest</button></div>
  </div>

  <h3 id=flex-line-pack><span class=secno>6.1. </span> &lsquo;<a
   href="#flex-line-pack0"><code
   class=property>flex-line-pack</code></a>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flex-line-pack0>flex-line-pack</dfn>

    <tr>
     <th>Value:

     <td>start | end | center | justify

    <tr>
     <th>Initial:

     <td>start

    <tr>
     <th>Applies to:

     <td><a href="#multi-line"><i>multi-line</i></a> flexboxes

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Computed Value:

     <td>specified value

    <tr>
     <th>Media:

     <td>visual
  </table>

  <p>The &lsquo;<a href="#flex-line-pack0"><code
   class=property>flex-line-pack</code></a>&rsquo; property aligns a
   flexbox's lines within the flexbox when there is extra space in the <a
   href="#cross-axis"><i>cross axis</i></a>, similar to how &lsquo;<a
   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo; aligns
   individual items within the <a href="#main-axis"><i>main axis</i></a>:

  <dl>
   <dt><dfn id=flex-line-pack-start>start</dfn>

   <dd>Lines are packed toward the start of the flexbox. The <a
    href="#cross-start"><i>cross-start</i></a> edge of the first line in the
    flexbox is placed flush with the <a
    href="#cross-start"><i>cross-start</i></a> edge of the flexbox, and each
    subsequent line is placed flush with the preceding line.

   <dt><dfn id=flex-line-pack-end>end</dfn>

   <dd>Lines are packed toward the end of the flexbox. The <a
    href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
    flush with the <a href="#cross-end"><i>cross-end</i></a> edge of the
    flexbox, and each preceding line is placed flush with the subsequent
    line.

   <dt><dfn id=flex-line-pack-center>center</dfn>

   <dd>Lines are packed toward the center of the flexbox. The lines in the
    flexbox are placed flush with each other and aligned in the center of the
    flexbox, with equal amounts of empty space between the <a
    href="#cross-start"><i>cross-start</i></a> content edge of the flexbox
    and the first line in the flexbox and between the <a
    href="#cross-end"><i>cross-end</i></a> content edge of the flexbox and
    the last line in the flexbox. (If the leftover free-space is negative,
    the lines will overflow equally in both directions.)

   <dt><dfn id=flex-line-pack-justify>justify</dfn>

   <dd>Lines are evenly distributed in the flexbox. If the leftover
    free-space is negative or there is only a single line in the flexbox,
    this value is identical to &lsquo;<a href="#flex-line-pack-start"><code
    class=css>start</code></a>&rsquo;. Otherwise, the <a
    href="#cross-start"><i>cross-start</i></a> edge of the first line in the
    flexbox is placed flush with the <a
    href="#cross-start"><i>cross-start</i></a> content edge of the flexbox,
    the <a href="#cross-end"><i>cross-end</i></a> edge of the last line in
    the flexbox is placed flush with the <a
    href="#cross-end"><i>cross-end</i></a> content edge of the flexbox, and
    the remaining lines in the flexbox are distributed so that the empty
    space between any two adjacent lines is the same.
  </dl>

  <p class=note>Note: Only <a href="#multi-line"><i>multi-line</i></a>
   flexboxes ever have free space in the <a href="#cross-axis"><i>cross
   axis</i></a> for lines to be aligned in, because in a <a
   href="#single-line"><i>single-line</i></a> flexbox the sole line
   automatically stretches to fill the space.

  <p class=issue>TODO: examples

  <h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
   Algorithm</h2>

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

  <div class=issue>
   <p>Here I'll outline the general structure of the layout algorithm, before
    I go into the ugly details below.</p>

   <ol>
    <li>Reorder flexbox items according to &lsquo;<a
     href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;.

    <li>
     <p>Find the "hypothetical size" of every flexbox item.</p>

     <p>Pretend that the flexbox is display:block, and still establishes a
      BFC. Pretend that the flexbox item is the only child of the flexbox
      (and also establishes a BFC). Resolve flexible widths/heights into
      their preferred sizes. Resolve &lsquo;<code
      class=property>auto</code>&rsquo; widths/heights by shrinkwrapping
      them. Using all this pretend knowledge, resolve the width and height.</p>

    <li>Based on the hypothetical sizes of the items, find the real main size
     of the flexbox and the hypothetical cross size.

    <li>Based on both of these, linebreak the flexbox if it's multiline. (Or
     does the possibility of linebreaking affect the main size of the
     flexbox, in a shrinkwrapping way?)

    <li>Resolve any flexible lengths. All items now have a real main size.

    <li>Align in the main axis, per &lsquo;<a href="#flex-pack0"><code
     class=property>flex-pack</code></a>&rsquo;.

    <li>Based on &lsquo;<a href="#flex-align0"><code
     class=property>flex-align</code></a>&rsquo;, find the real cross size of
     the flexbox, its lines, and the items.

    <li>Align in the cross axis, per &lsquo;<a href="#flex-align0"><code
     class=property>flex-align</code></a>&rsquo;.

    <li>Align the lines, per &lsquo;<a href="#flex-line-pack0"><code
     class=property>flex-line-pack</code></a>&rsquo;.
   </ol>

   <p>Note that if any "hypothetical" size is a definite length or
    percentage, it's actually a real size immediately and won't change (well,
    aside from flexing). The hypothetical calculations are meant to give
    intermediate results in the presence of &lsquo;<code
    class=css>auto</code>&rsquo; values (and others?), so I can do other
    calculations that depend on those lengths.</p>
  </div>

  <h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>

  <p class=issue>TODO: define how flexbox should break on pages, columns,
   etc. This may or may not be normative until there is more than one
   implementation.

  <p>Very roughly:

  <ul>
   <li>Flexboxes can beak across pages between items, between rows of items
    (in multi-line mode) and inside items, as long as &lsquo;<code
    class=property>break-</code>&rsquo; property allow that. All &lsquo;<code
    class=property>break-</code>&rsquo; properties are supported on flexbox,
    on flexbox items and inside flexbox items.

   <li>Breaking behavior of a single-line vertical flexbox should be
    identical to a block in normal flow where children have same sizes and
    positions (e.g. explicitly set to match computed values in flexbox), same
    content and same breaking properties. <span class=issue>This is good goal
    or guidance, but not necessarily good normative definition. Get
    specific.</span>

   <li>Breaking behavior of a horizontal single-line flexbox should be
    similar (not necessarily identical) to that of a single-row table with
    same sizing.

   <li>In horizontal flexbox, a forced break within an items causes
    subsequent content of that item to go to next container, but it doesn't
    affect sibling items or their content.

   <li>In horizontal multi-line flexbox, values of &lsquo;<code
    class=property>break-before</code>&rsquo; and &lsquo;<code
    class=property>break-after</code>&rsquo; for each line are computed from
    combinatoin of properties on children that fit in that line (or would
    have fit, given available width and infinite height)
  </ul>

  <p class=issue>TODO: define breaking of vertical multi-line flexbox

  <p class=issue>TODO: add more detail: how breaking affect sizing (for
   broken boxes and boxes after the break) and alignment

  <h2 id=layout-interface><span class=secno>9. </span> Box Properties and
   Sizing</h2>

  <p class=issue>Define how flexboxes are sized, paying attention to
   width/height keywords on both the flexbox and flexbox items, the writing
   modes of both the flexbox and flexbox items, and the flexbox direction.

  <hr title="Separator from footer">

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

  <p>[This section will contain further acknowledgments.]

  <p>Thanks for feedback from James Elmore and Shinichiro Hamaji.

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=informative>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=property>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><span class=property>display</span>

     <td>flexbox | inline-flexbox

    <tr>
     <th><a class=property href="#flex-align0">flex-align</a>

     <td>start | end | center | baseline | stretch

     <td>stretch

     <td>flexbox items

     <td>no

     <td>specified value

     <td>visual

    <tr>
     <th><a class=property href="#flex-flow0">flex-flow</a>

     <td>[ row | row-reverse | column | column-reverse ] [ wrap |
      wrap-reverse ]?

     <td>row

     <td>flexboxes

     <td>no

     <td>specified value

     <td>visual

    <tr>
     <th><a class=property href="#flex-line-pack0">flex-line-pack</a>

     <td>start | end | center | justify

     <td>start

     <td>multi-line flexboxes

     <td>no

     <td>specified value

     <td>visual

    <tr>
     <th><a class=property href="#flex-order0">flex-order</a>

     <td>&lt;number>

     <td>0

     <td>flexbox items

     <td>no

     <td>specified value

     <td>visual

    <tr>
     <th><a class=property href="#flex-pack0">flex-pack</a>

     <td>start | end | center | justify

     <td>start

     <td>flexboxes

     <td>no

     <td>specified value

     <td>visual
  </table>
  <!--end-properties-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>baseline, <a href="#flex-align-baseline"
    title=baseline><strong>5.2.</strong></a>

   <li>center, <a href="#flex-align-center"
    title=center><strong>5.2.</strong></a>, <a href="#flex-line-pack-center"
    title=center><strong>6.1.</strong></a>, <a href="#flex-pack-center"
    title=center><strong>5.1.</strong></a>

   <li>column, <a href="#flex-flow-column"
    title=column><strong>3.1.</strong></a>

   <li>column-reverse, <a href="#flex-flow-column-reverse"
    title=column-reverse><strong>3.1.</strong></a>

   <li>cross axis, <a href="#cross-axis"
    title="cross axis"><strong>2.</strong></a>

   <li>cross-end, <a href="#cross-end"
    title=cross-end><strong>2.</strong></a>

   <li>cross size, <a href="#cross-size"
    title="cross size"><strong>2.</strong></a>

   <li>cross size property, <a href="#cross-size-property"
    title="cross size property"><strong>2.</strong></a>

   <li>cross-start, <a href="#cross-start"
    title=cross-start><strong>2.</strong></a>

   <li>end, <a href="#flex-align-end" title=end><strong>5.2.</strong></a>, <a
    href="#flex-line-pack-end" title=end><strong>6.1.</strong></a>, <a
    href="#flex-pack-end" title=end><strong>5.1.</strong></a>

   <li>flex-align, <a href="#flex-align0"
    title=flex-align><strong>5.2.</strong></a>

   <li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>

   <li>flexbox item, <a href="#flexbox-item"
    title="flexbox item"><strong>2.</strong></a>

   <li>flexbox items, <a href="#flexbox-item"
    title="flexbox items"><strong>2.</strong></a>

   <li>flexbox item's, <a href="#flexbox-item"
    title="flexbox item's"><strong>2.</strong></a>

   <li>flex-flow, <a href="#flex-flow0"
    title=flex-flow><strong>3.1.</strong></a>

   <li>flexible length, <a href="#flexible-length"
    title="flexible length"><strong>4.</strong></a>, <a
    href="#flexible-length0"
    title="flexible length"><strong>4.1.</strong></a>

   <li>flexible lengths, <a href="#flexible-length0"
    title="flexible lengths"><strong>4.1.</strong></a>

   <li>flexible length's, <a href="#flexible-length0"
    title="flexible length's"><strong>4.1.</strong></a>

   <li>flex-line-pack, <a href="#flex-line-pack0"
    title=flex-line-pack><strong>6.1.</strong></a>

   <li>flex-order, <a href="#flex-order0"
    title=flex-order><strong>3.2.</strong></a>

   <li>flex-pack, <a href="#flex-pack0"
    title=flex-pack><strong>5.1.</strong></a>

   <li>hypothetical neighbors, <a href="#hypothetical-neighbors"
    title="hypothetical neighbors"><strong>2.2.1.</strong></a>

   <li>justify, <a href="#flex-line-pack-justify"
    title=justify><strong>6.1.</strong></a>, <a href="#flex-pack-justify"
    title=justify><strong>5.1.</strong></a>

   <li>main axis, <a href="#main-axis"
    title="main axis"><strong>2.</strong></a>

   <li>main-end, <a href="#main-end" title=main-end><strong>2.</strong></a>

   <li>main size, <a href="#main-size"
    title="main size"><strong>2.</strong></a>

   <li>main size property, <a href="#main-size-property"
    title="main size property"><strong>2.</strong></a>

   <li>main-start, <a href="#main-start"
    title=main-start><strong>2.</strong></a>

   <li>multi-line, <a href="#multi-line"
    title=multi-line><strong>6.</strong></a>

   <li>negative flexibility, <a href="#negative-flexibility"
    title="negative flexibility"><strong>4.1.</strong></a>

   <li>positive flexibility, <a href="#positive-flexibility"
    title="positive flexibility"><strong>4.1.</strong></a>

   <li>preferred size, <a href="#preferred-size"
    title="preferred size"><strong>4.1.</strong></a>

   <li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>

   <li>row-reverse, <a href="#flex-flow-row-reverse"
    title=row-reverse><strong>3.1.</strong></a>

   <li>single-line, <a href="#single-line"
    title=single-line><strong>6.</strong></a>

   <li>start, <a href="#flex-align-start"
    title=start><strong>5.2.</strong></a>, <a href="#flex-line-pack-start"
    title=start><strong>6.1.</strong></a>, <a href="#flex-pack-start"
    title=start><strong>5.1.</strong></a>

   <li>stretch, <a href="#flex-align-stretch"
    title=stretch><strong>5.2.</strong></a>

   <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>

   <li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
    title=wrap-reverse><strong>3.1.</strong></a>
  </ul>
  <!--end-index-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->