Revision 965961 of Using CSS Flexible Boxes

<div>{{CSSRef}}</div>

<p><span class="seoSummary">The CSS3 <strong>Flexible Box</strong>, or <strong>flexbox</strong>, is a <a href="/en-US/docs/Web/CSS/Layout_mode">layout mode</a> providing 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.</span> 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. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.</p>

<div class="note"><strong>Note:</strong> Though <a href="https://www.w3.org/TR/css3-flexbox/">CSS Flexible Boxes Layout specification</a> is at the Last Call Working Draft stage (see also the <a href="https://dev.w3.org/csswg/css-flexbox/">Latest Editor draft</a>), not all browsers have implemented all features of Flexbox. That said, there is now good support across the board for flexbox. See the <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">compatibility table</a> on each property for up-to-date compatibility status.</div>

<h2 id="Flexible_boxes_concept">Flexible boxes concept</h2>

<p>The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.</p>

<p>The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased. While the block layout works well for pages, it lacks sufficient definition to support application components that have to change orientation, resize, stretch, or shrink as the user agent changes, flips from vertical to horizontal, and so forth. Flexbox layout is most appropriate for the components of an application, and small-scale layouts, while the (emerging) Grid layout is intended for larger scale layouts. Both are part of a wider effort of the CSS Working Group to provide for greater interoperability of web applications with different user agents, different writing modes, and other demands on flexibility.</p>

<h2 id="Flexible_boxes_vocabulary">Flexible boxes vocabulary</h2>

<p>While a discussion of flexible boxes is liberated from terms like horizontal/inline axis and vertical/block axis, it requires a new terminology to properly describe the model. Consider the following diagram when reviewing the vocabulary items below. It shows a flex container that has a <code>flex-direction</code> of <code>row</code>, meaning that the flex items follow each other horizontally across the main axis according to the established writing mode, the direction in which the element's text flows, in this case left-to-right.</p>

<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" /></p>

<dl>
 <dt>Flex container</dt>
 <dd>The parent element in which flex items are contained. A flex container is defined using the <code>flex</code> or <code>inline-flex</code> values of the {{Cssxref("display")}} property.</dd>
 <dt>Flex item</dt>
 <dd>
 <p>Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.</p>
 </dd>
 <dt>Axes</dt>
 <dd>
 <p>Every flexible box layout follows two axes. The <strong>main axis</strong> is the axis along which the flex items follow each other. The <strong>cross axis</strong> is the axis perpendicular to the <strong>main axis</strong>.</p>

 <ul>
  <li>The <code><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> property establishes the main axis.</li>
  <li>The <a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> property defines how flex items are laid out along the main axis on the current line.</li>
  <li>The <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> property defines the default for how flex items are laid out along the cross axis on the current line.</li>
  <li>The <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> property defines how a single flex item is aligned on the cross axis, and overrides the default established by <code>align-items.</code></li>
 </ul>
 </dd>
 <dt>Directions</dt>
 <dd>
 <p>The <strong>main start</strong>/<strong>main end </strong>and <strong>cross start</strong>/<strong>cross end</strong> sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the <code>writing-mode</code> (left-to-right, right-to-left, etc.).</p>

 <ul>
  <li>The <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> property assigns elements to ordinal groups and determines which elements appear first.</li>
  <li>The <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> property shorthands the <a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> and <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> properties to lay out the flex items.</li>
 </ul>
 </dd>
 <dt>Lines</dt>
 <dd>
 <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p>
 </dd>
 <dt>Dimensions</dt>
 <dd>
 <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p>

 <ul>
  <li>The <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> and <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> properties initial value is 0.</li>
  <li>The <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> property shorthands the <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, and <a href="/en-US/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> properties to establish the flexibility of the flex items.</li>
 </ul>
 </dd>
</dl>

<h2 id="Designating_a_flexible_box">Designating a flexible box</h2>

<p>To designate the CSS for elements using this style, set the <a href="/en-US/docs/Web/CSS/display">display</a> property as follows:</p>

<pre class="brush: css">
display : flex</pre>

<p>or</p>

<pre class="brush: css">
display : inline-flex</pre>

<p>Doing so defines the element as a flex container and its children as flex items. 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"><strong>Note:</strong> 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>

<h2 id="Flex_item_considerations">Flex item considerations</h2>

<p>Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated <code>display: none</code>.</p>

<p>Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.</p>

<p>Currently, due to a known issue, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround until this issue is resolved is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}.</p>

<p>The margins of adjacent flex items do not collapse. Using <code>auto</code> margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See <a href="https://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> in the W3C Flexible Box Layout Model specification for more details.</p>

<p><s>To ensure a reasonable default minimum size for flex items, use <code>min-width:auto</code> and/or <code>min-height:auto</code>. For flex items, the <code>auto</code> attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.</s></p>

<p>Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>

<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>

<h2 id="Flexible_box_properties">Flexible box properties</h2>

<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3>

<p>Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:</p>

<ul>
 <li><code>column-*</code> properties of the <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> have no effect on a flex item.</li>
 <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.</li>
 <li>{{cssxref("vertical-align")}} has no effect on the alignment of flex items.</li>
</ul>

<h2 id="Examples">Examples</h2>

<h3 id="Basic_flex_example">Basic flex example</h3>

<p>This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.</p>

<pre class="brush: html">
​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;style&gt;

   .flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex &gt; div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See https://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex &gt; div:nth-child(1){ background : #009246; }
   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
   .flex &gt; div:nth-child(3){ background : #CE2B37; }

   .flex &gt; div:hover
   {
        width: 200px;
   }
   
   &lt;/style&gt;
    
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
  &lt;div class="flex"&gt;
    &lt;div&gt;uno&lt;/div&gt;
    &lt;div&gt;due&lt;/div&gt;
    &lt;div&gt;tre&lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3>

<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p>

<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png" /></p>

<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p>

<pre class="brush: html">
​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;style&gt;

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main &gt; article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main &gt; nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main &gt; aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #main &gt; article, #main &gt; nav, #main &gt; aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main &gt; nav, #main &gt; aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

 &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
 &lt;header&gt;header&lt;/header&gt;
 &lt;div id='main'&gt;
    &lt;article&gt;article&lt;/article&gt;
    &lt;nav&gt;nav&lt;/nav&gt;
    &lt;aside&gt;aside&lt;/aside&gt;
 &lt;/div&gt;
 &lt;footer&gt;footer&lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Playground">Playground</h2>

<p>There are a few flexbox playgrounds available online for experimenting:</p>

<ul>
 <li><a href="https://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
 <li><a href="https://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
 <li><a href="https://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
</ul>

<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2>

<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>

<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>

<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p>

<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (single-line flexbox)</td>
   <td>{{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br />
    {{CompatGeckoDesktop("22.0")}}</td>
   <td>21.0{{property_prefix("-webkit")}}<br />
    29.0</td>
   <td>11<sup>[3]</sup></td>
   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Multi-line flexbox</td>
   <td>{{CompatGeckoDesktop("28.0")}}</td>
   <td>21.0{{property_prefix("-webkit")}}<br />
    29.0</td>
   <td>11<sup>[3]</sup></td>
   <td>12.10<sup>[5]</sup><br />
    15 {{property_prefix("-webkit")}}</td>
   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>Android</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support (single-line flexbox)</td>
   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br />
    {{CompatGeckoMobile("22.0")}}</td>
   <td>
    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br />
     1.1</p>
   </td>
   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br />
    4.4</td>
   <td>11</td>
   <td>12.10<sup>[5]</sup><br />
    15{{property_prefix("-webkit")}}</td>
   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Multi-line flexbox</td>
   <td>{{CompatGeckoMobile("28.0")}}</td>
   <td>1.3</td>
   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br />
    4.4</td>
   <td>11</td>
   <td>12.10<sup>[5]</sup><br />
    15{{property_prefix("-webkit")}}</td>
   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Safari up to version&nbsp; 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p>

<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>

<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="https://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>

<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>

<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li>
</ul>