Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 304921 of CSS flexible box

  • Revision slug: CSS/Flexbox
  • Revision title: CSS flexible box
  • Revision id: 304921
  • Created:
  • Creator: dgash
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

The CSS Flexible Box Layout Model, or "flexbox", is part of the draft CSS3 specification. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code.

There are two standards for the flexbox model. The original standard was a W3C working draft that has been implemented on several browsers. The new standard replaces the original, and the W3C has discontinued work on the original. Both standards continue to be supported, and both may coexist in the same style sheet, as the standards' properties use different prefixes.

This article differentiates between the two standards, based on the property prefixes, as the "flex-" and "box-" implementations.

  • The new flex- implementation already has more features and is more fully developed. Use this one for current and future development.
  • The original box- implementation is described here for reference.

Both implementations extend the CSS2.1 layout model via the display property, adding a new value to designate the flexbox implementation.

Note: This newer specification will not work in current versions of Firefox.  Please use a webkit browser to test.

flex- implementation

The "flex-" implementation is the most current implementation of flexbox. To designate the CSS for elements using this style, set the display property as follows:

display : flex

or

display : inline-flex

Doing so defines the element as a flex container and its children as flex items. The flex value makes the flex container a block-level element. The inline-flex value makes the flex container an atomic inline-level element.

Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-flex.

See Using CSS flexible boxes for more information.

flex- properties

These are the properties of the current flexbox standard. See Flexible boxes vocabulary for definitions of the terms used in the descriptions below.

align-content
Defines how a flex container's lines are aligned along the cross axis.
align-items
Defines how flex items are aligned along the cross axis.
align-self
Defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
flex
A shorthand property for flex-grow, flex-shrink, and flex-basis that reflects the ability of a flex item to either stretch of shrink when needed.
flex-basis
Determines the initial main size of a flex item.
flex-direction
Defines how flex items belonging to a common flex container are placed by setting the main axis.
flex-flow
A shorthand property to define flex-direction and flex-wrap.
flex-grow
Defines how much the flex item's size will increase in proportion to the other items in the flex container.
flex-shrink
Defines how much the flex item's size will decrease in proportion to the other items in the flex container.
flex-wrap
Defines how flex items are wrapped into lines.
justify-content
Defines how flex items are laid out along the main axis on the current line.
order
Defines the order in which flex items appear in a flex layout.

Specification

See also

box- implementation

{{ warning("These are the properties of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.") }}

See the new standard, flex- properties, or Using CSS flexible boxes for more information on the current standard.

The "box-" implementation is the original, no longer developed, implementation of flexbox. To designate the CSS for elements using this style, set the display property as follows:

display : box

or

display : inline-box

Doing so defines the element as a flexbox (or simply, box) and its children as flexbox children. The flex value makes the flexbox a block-level element. The inline-flex value makes the flex box an atomic inline-level element.

Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-box.

Children of boxes are all block-level. These blocks then get stacked in the direction specified by the box-orient and box-direction properties, and ordered specified by the box-ordinal-group property. They are aligned within the box according to the box-align property. The boxes may then flex or be distributed as specified by the box-flex, box-flex-group, box-pack and box-lines properties.

box- properties

box-align
Specifies how a box's children are placed and aligned along the direction perpendicular to the box orientation, and where the extra space, if any, is positioned. 
box-direction
Specifies the direction in which children of a box are displayed.
box-flex
Describes the box's child element's degree of flexibility.
box-flex-group
Assigns the box's child element to a flex group.
box-lines
Determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
box-ordinal-group
Assigns the box's child elements to an ordinal group.
box-orient
Determines whether the box's children are laid out horizontally (along the in-line axis) or vertically (along the block axis), thus establishing the box axis.
box-pack
Dictates how any additional space along the box axis should be distributed between child elements.

Specification

​See Also

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
box- implementation 17.0{{ property_prefix("-webkit") }} Supported {{ CompatNo() }} {{ CompatNo() }} Supported
flex- implementation 21.0{{ property_prefix("-webkit") }}   10{{ property_prefix("-ms") }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
box- implementation 2.1{{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} Supported
flex- implementation {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

{{ languages( { "zh-cn": "zh-cn/Using_flexbox"} ) }}

 

Revision Source

 
<p>{{ CSSRef() }}</p>
<div>
  <p>{{ SeeCompatTable() }}</p>
  <p>The CSS Flexible Box Layout Model, or "flexbox", is part of the draft CSS3 specification. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.</p>
  <p>Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code.</p>
  <p>There are two standards for the flexbox model. The&nbsp;<a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" title="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">original standard</a> was a W3C working draft that has been implemented on several browsers. The&nbsp;<a class="external" href="https://dev.w3.org/csswg/css3-flexbox" title="https://dev.w3.org/csswg/css3-flexbox">new standard</a> replaces the original, and the W3C has discontinued work on the original. Both standards continue to be supported, and both may coexist in the same style sheet, as the standards' properties use different prefixes.</p>
  <p>This article differentiates between the two standards, based on the property prefixes, as the "flex-" and "box-" implementations.</p>
  <ul>
    <li>The new <a href="/en/CSS/Flexbox#flex-_implementation" title="/en/Flexible_Box#flex-_implementation">flex- implementation</a> already has more features and is more fully developed. Use this one for current and future development.</li>
    <li>The original <a href="/en/CSS/Flexbox#box-_implementation" title="/en/Flexible_Box#box-_implementation">box- implementation</a> is described here for reference.</li>
  </ul>
  <p>Both implementations extend the CSS2.1 layout model via the <a href="/en/CSS/display" title="/en/CSS/display">display</a> property, adding a new value to designate the flexbox implementation.</p>
  <div class="note">
    <strong>Note</strong>: This newer specification&nbsp;<strong>will not work in current versions of Firefox</strong>. &nbsp;Please use a webkit browser to test.</div>
  <h2 id="flex-_implementation">flex- implementation</h2>
  <p>The "flex-" implementation is the most current implementation of flexbox. To designate the CSS for elements using this style, set&nbsp;the&nbsp;<a href="/en/CSS/display" title="/en/CSS/display">display</a>&nbsp;property as follows:</p>
  <pre>
display : flex</pre>
  <p>or</p>
  <pre>
display : inline-flex</pre>
  <p>Doing so defines the element as a flex container and its children as flex items.&nbsp;The <code>flex</code> value makes the flex container a block-level element. The <code>inline-flex</code> value makes the flex container an atomic inline-level element.</p>
  <div class="note">
    Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, <code>display : -webkit-flex</code>.</div>
  <p>See&nbsp;<a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> for more information.</p>
  <h3 id="flex-_properties">flex- properties</h3>
  <p>These are the properties of the current flexbox standard. See <a href="/en/CSS/Using_CSS_flexible_boxes#Flexible_boxes_vocabulary" title="/en/CSS/Using_CSS_flexible_boxes#Flexible_boxes_vocabulary">Flexible boxes vocabulary</a> for definitions of the terms used in the descriptions below.</p>
  <dl>
    <dt>
      <a href="/en/CSS/align-content" title="en/CSS/align-content"><code>align-content</code></a></dt>
    <dd>
      Defines how a flex container's lines are aligned along the cross axis.</dd>
    <dt>
      <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a></dt>
    <dd>
      Defines how flex items are aligned along the cross axis.</dd>
    <dt>
      <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a></dt>
    <dd>
      Defines how a single flex item is aligned on the cross axis, and overrides the default established by <code>align-items</code>.</dd>
    <dt>
      <a href="/en/CSS/flex" title="en/CSS/flex"><code>flex</code></a></dt>
    <dd>
      A shorthand property for <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> that reflects the ability of a flex item to either stretch of shrink when needed.</dd>
    <dt>
      <code><a href="/en/CSS/flex-basis" title="en/CSS/flex-basis">flex-basis</a></code></dt>
    <dd>
      Determines the initial main size of a flex item.</dd>
    <dt>
      <a href="/en/CSS/flex-direction" title="flex-direction"><code>flex-direction</code></a></dt>
    <dd>
      Defines how flex items belonging to a common flex container are placed by setting the main axis.</dd>
    <dt>
      <a href="/en/CSS/flex-flow" title="flex-flow"><code>flex-flow</code></a></dt>
    <dd>
      A shorthand property to define <code>flex-direction</code> and <code>flex-wrap</code>.</dd>
    <dt>
      <a href="/en/CSS/flex-grow" title="en/CSS/flex-grow"><code>flex-grow</code></a></dt>
    <dd>
      Defines how much the flex item's size will increase in proportion to the other items in the flex container.</dd>
    <dt>
      <a href="/en/CSS/flex-shrink" title="en/CSS/flex-shrink"><code>flex-shrink</code></a></dt>
    <dd>
      Defines how much the flex item's size will decrease in proportion to the other items in the flex container.</dd>
    <dt>
      <a href="/en/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a></dt>
    <dd>
      Defines how flex items are wrapped into lines.</dd>
    <dt>
      <a href="/en/CSS/justify-content" title="en/CSS/justify-content"><code>justify-content</code></a></dt>
    <dd>
      Defines how flex items are laid out along the main axis on the current line.</dd>
    <dt>
      <a href="/en/CSS/order" title="en/CSS/order"><code>order</code></a></dt>
    <dd>
      Defines the order in which flex items appear in a flex layout.</dd>
  </dl>
  <h3 id="Specification">Specification</h3>
  <ul>
    <li>(latest editor's draft)&nbsp;<a class="external" href="https://dev.w3.org/csswg/css3-flexbox/" title="https://dev.w3.org/csswg/css3-flexbox/">https://dev.w3.org/csswg/css3-flexbox/</a></li>
    <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/" title="https://www.w3.org/TR/css3-flexbox/">https://www.w3.org/TR/css3-flexbox/</a></li>
  </ul>
  <h3 id="See_also">See also</h3>
  <ul>
    <li><a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
  </ul>
  <h2 id="box-_implementation">box- implementation</h2>
  <p>{{ warning("These are the properties of the&nbsp;original CSS Flexible Box Layout Module standard which is being replaced by a new standard.") }}</p>
  <p>See the new standard, <a href="/en/CSS/Flexbox#flex-_properties" title="/en/CSS/Flexbox#flex-_properties">flex- properties</a>, or&nbsp;<a href="/en/CSS/Using_CSS_flexible_boxes" rel="internal" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>&nbsp;for more information on the current standard.</p>
  <p>The "box-" implementation is the original, no longer developed, implementation of flexbox. To designate the CSS for elements using this style, set&nbsp;the&nbsp;<a href="/en/CSS/display" title="/en/CSS/display">display</a>&nbsp;property as follows:</p>
  <pre>
display : box</pre>
  <p>or</p>
  <pre>
display : inline-box</pre>
  <p>Doing so defines the element as a flexbox (or simply, box) and its children as flexbox children.&nbsp;The&nbsp;<code>flex</code>&nbsp;value makes the flexbox a block-level element. The&nbsp;<code>inline-flex</code>&nbsp;value makes the flex box an atomic inline-level element.</p>
  <div class="note">
    Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example,&nbsp;<code>display : -webkit-box</code>.</div>
  <p>Children of boxes are all block-level. These blocks then get stacked in the direction specified by the&nbsp;<span class="property"><code class="property">box-orient</code></span>&nbsp;and&nbsp;<span class="property"><code class="property">box-direction</code></span>&nbsp;properties, and ordered specified by the&nbsp;<span class="property"><code class="property">box-ordinal-group</code></span>&nbsp;property. They are aligned within the box according to the&nbsp;<span class="property"><code class="property">box-align</code></span>&nbsp;property. The boxes may then flex or be distributed as specified by the&nbsp;<span class="property"><code class="property">box-flex</code></span>,&nbsp;<span class="property"><code class="property">box-flex-group</code></span>,&nbsp;<span class="property"><code class="property">box-pack</code></span>&nbsp;and&nbsp;<span class="property"><code class="property">box-lines</code></span>&nbsp;properties.</p>
  <h3 id="box-_properties">box- properties</h3>
  <dl>
    <dt>
      <a href="/en/CSS/box-align" title="/en/CSS/box-align">box-align</a></dt>
    <dd>
      Specifies how a box's children are placed and aligned along the direction perpendicular to the box orientation, and where the extra space, if any, is positioned.&nbsp;</dd>
    <dt>
      <a href="/en/CSS/box-direction" title="/en/CSS/box-direction">box-direction</a></dt>
    <dd>
      Specifies the direction in which children of a box are displayed.</dd>
    <dt>
      <a href="/en/CSS/box-flex" title="/en/CSS/box-flex">box-flex</a></dt>
    <dd>
      Describes the box's child element's degree of flexibility.</dd>
    <dt>
      <a href="/en/CSS/box-flex-group" title="/en/CSS/box-flex-group">box-flex-group</a></dt>
    <dd>
      Assigns the box's child element to a flex group.</dd>
    <dt>
      <a href="/en/CSS/box-lines" title="/en/CSS/box-lines">box-lines</a></dt>
    <dd>
      Determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).</dd>
    <dt>
      <a href="/en/CSS/box-ordinal-group" title="/en/CSS/box-ordinal-group">box-ordinal-group</a></dt>
    <dd>
      Assigns the box's child elements to an ordinal group.</dd>
    <dt>
      <a href="/en/CSS/box-orient" title="/en/CSS/box-orient">box-orient</a></dt>
    <dd>
      Determines whether the box's children are laid out horizontally (along the in-line axis) or vertically (along the block axis), thus establishing the box axis.</dd>
    <dt>
      <a href="/en/CSS/box-pack" title="/en/CSS/box-pack">box-pack</a></dt>
    <dd>
      Dictates how any additional space along the box axis should be distributed between child elements.</dd>
  </dl>
  <h3 id="Specification">Specification</h3>
  <ul>
    <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" title="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a></li>
  </ul>
  <h3 id=".E2.80.8BSee_Also">​See Also</h3>
  <ul>
    <li>HTML5Rocks! article, <a class="external" href="https://www.html5rocks.com/en/tutorials/flexbox/quick/" title="https://www.html5rocks.com/en/tutorials/flexbox/quick/"><em>Quick Hits with the Flexible Box Model</em></a>, by Paul Irish</li>
  </ul>
</div>
<div>
  <h2 id="Compatibility">Compatibility</h2>
  <p>{{ CompatibilityTable() }}</p>
  <div id="compat-desktop">
    <table class="compat-table">
      <tbody>
        <tr>
          <th>Feature</th>
          <th>Chrome</th>
          <th>Firefox (Gecko)</th>
          <th>Internet Explorer</th>
          <th>Opera</th>
          <th>Safari</th>
        </tr>
        <tr>
          <td><a href="/en/CSS/Flexbox#box-_implementation" title="/en/CSS/Flexbox#box-_implementation">box- implementation</a></td>
          <td>17.0{{ property_prefix("-webkit") }}</td>
          <td>Supported</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>Supported</td>
        </tr>
        <tr>
          <td><a href="/en/CSS/Flexbox#flex-_implementation" title="/en/CSS/Flexbox#flex-_implementation">flex- implementation</a></td>
          <td>21.0{{ property_prefix("-webkit") }}</td>
          <td>&nbsp;</td>
          <td>10{{ property_prefix("-ms") }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="compat-mobile">
    <table class="compat-table">
      <tbody>
        <tr>
          <th>Feature</th>
          <th>Android</th>
          <th>Firefox Mobile (Gecko)</th>
          <th>IE Mobile</th>
          <th>Opera Mobile</th>
          <th>Safari Mobile</th>
        </tr>
        <tr>
          <td><a href="/en/CSS/Flexbox#box-_implementation" title="/en/CSS/Flexbox#box-_implementation">box- implementation</a></td>
          <td>2.1{{ property_prefix("-webkit") }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>Supported</td>
        </tr>
        <tr>
          <td><a href="/en/CSS/Flexbox#flex-_implementation" title="/en/CSS/Flexbox#flex-_implementation">flex- implementation</a></td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
          <td>{{ CompatNo() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p>{{ languages( { "zh-cn": "zh-cn/Using_flexbox"} ) }}</p>
</div>
<p>&nbsp;</p>
Revert to this revision