mozilla

Revision 432923 of 使用 CSS 弹性盒

  • Revision slug: CSS/Tutorials/Using_CSS_flexible_boxes
  • Revision title: 使用 CSS 弹性盒
  • Revision id: 432923
  • Created:
  • Creator: Nightingale
  • Is current revision? No
  • Comment

Revision Content

CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它即不使用 floats,也不会导致弹性盒容器的 margins 与其内容的 margins 进行合并。 

越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。

注意:由于 CSS 弹性盒处于候选推荐阶段,并不是所有的浏览器都提供了实现。 WebKit 实现要求使用 -webkit 前缀;Gecko 实现不需要前缀,但是有优先级关系(使用 Aurora 或者 Nightly 的情况除外);Internet Explorer 实现了规范的较旧版本,需要前缀。Opera 12.10 实现了规范的最新版本,不需要前缀。通过查看兼容性表中的每个属性,可以了解最新的兼容状态。

弹性盒概念

弹性盒布局的定义中,它可以自动调整子元素的高/宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。

不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。虽然正在出现的网格布局目标为大比例布局,弹性盒布局最适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

弹性盒布局名词

虽然弹性盒布局的讨论中自由地使用了如水平轴、内联轴和垂直轴、块级轴的词汇,仍然需要一个新的词汇表来描述这种模型。参考下面的图形来学习后面的词汇。图形显示了弹性容器有一个值为row的属性flex-direction,其意义在于包含的子元素相互之间会根据书写模式和文本流方向在主轴上水平排列,即从左到右。

flex_terms.png

弹性容器
弹性子元素的父元素。使用值 flexinline-flexdisplay
属性来定义弹性容器为弹性容器。
弹性子元素

弹性容器的每一个孩子变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。

每个弹性盒布局以两个轴来排列。弹性子元素沿着主轴依次相互排列。侧轴垂直于主轴

  • 属性 flex-direction 建立主轴。
  • 属性 justify-content 定义了弹性子元素如何在当前线上沿着主轴排列。
  • 属性 align-items 定义了弹性子元素如何在当前线上沿着侧轴排列。
  • 属性 align-self 覆盖父元素的align-items属性,定义了单独的弹性子元素如何沿着侧轴排列。
方向

The main start/main end and cross start/cross end 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 writing-mode (left-to-right, right-to-left, etc.).

  • The order property assigns elements to ordinal groups and determines which elements appear first.
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
Lines

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

Dimensions

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

Designating a flexible box

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.

Flex item considerations

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 display:none.

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.

Currently, due to a known issue, specifying visibility:collapse on a flex item causes it to be treated as if it were display:none instead of the intended behavior, treating it as if it were visibility:hidden. The suggested workaround until this issue is resolved is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse.

The margins of adjacent flex items do not collapse. Using auto margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See Aligning with 'auto' margins in the W3C Flexible Box Layout Model specification for more details.

To ensure a reasonable default minumum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto 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.

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 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 align- properties, just put auto margins on the flex items you wish to center.  Instead of the justify- 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 justify-content 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 justify-content property.

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. 

Flexible box properties

{{ CSS_Reference:FlexBox() }}

Properties not affecting flexible boxes

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container.

  • column-* properties of the Multicol module have no effect on a flex item.
  • {{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using float causes the display property of the element to compute to block.
  • {{cssxref("vertical-align")}} has no effect on the alignment of flex items.

Examples

Basic flex example

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

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .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 > 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 http://bugzil.la/731886 for more info.) */

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

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

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

Holy Grail Layout example

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

HolyGrailLayout.png

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.

​
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  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 > 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 > 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 > 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-flow: column;
   }

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

 </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Playground

There are several flexbox playgrounds available online for experimenting:

Things to keep in mind

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.

Flexibles boxes are laid out in conformance of the writing mode. Which means that main start and main end are laid out according to the position of start and end.

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
{{ CompatGeckoDesktop("19.0") }}(Behind a pref) [2]
21.0{{ property_prefix("-webkit") }} {{ CompatNo() }} [1] 12.10 {{ CompatNo() }} [1]
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
{{ CompatGeckoMobile("19.0") }}(Behind a pref) [2]
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

Notes

[1] Internet Explorer 10 and Safari support an old incompatible draft version of the specification. They have not been updated to support the final version.

[2] Firefox supports only single-line flexbox. To activate flexbox support, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

 

Revision Source

<p>CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的<a href="/zh-CN/docs/CSS/Layout_mode" title="/zh-CN/docs/CSS/Layout_mode">布局方式</a>。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它即不使用 floats,也不会导致弹性盒容器的 margins 与其内容的 margins 进行合并。<span style="line-height: inherit;">&nbsp;</span></p>
<p>越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。</p>
<div class="note">
  <strong>注意:</strong>由于 CSS 弹性盒处于候选推荐阶段,并不是所有的浏览器都提供了实现。 WebKit <code>实现要求使用 -webkit 前缀</code>;Gecko 实现不需要前缀,但是有优先级关系(使用 Aurora 或者 Nightly 的情况除外);Internet Explorer 实现了规范的较旧版本,需要前缀。Opera 12.10 实现了规范的最新版本,不需要前缀。通过查看兼容性表中的每个属性,可以了解最新的兼容状态。</div>
<h2 id=".E5.BC.B9.E6.80.A7.E7.9B.92.E6.A6.82.E5.BF.B5">弹性盒概念</h2>
<p>弹性盒布局的定义中,它可以自动调整子元素的高/宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。</p>
<p>不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。虽然正在出现的网格布局目标为大比例布局,弹性盒布局最适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。</p>
<h2 id="Flexible_boxes_vocabulary">弹性盒布局名词</h2>
<p>虽然弹性盒布局的讨论中自由地使用了如水平轴、内联轴和垂直轴、块级轴的词汇,仍然需要一个新的词汇表来描述这种模型。参考下面的图形来学习后面的词汇。图形显示了弹性容器有一个值为<code>row</code>的属性<code>flex-direction</code>,其意义在于包含的子元素相互之间会根据书写模式和文本流方向在主轴上水平排列,即从左到右。</p>
<p><img alt="flex_terms.png" class="internal default" src="/files/3739/flex_terms.png" /></p>
<dl>
  <dt>
    弹性容器</dt>
  <dd>
    弹性子元素的父元素。使用值 <code>flex</code> 或 <code>inline-flex</code>的 <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a><br />
    属性来定义弹性容器为弹性容器。</dd>
  <dt>
    弹性子元素</dt>
  <dd>
    <p>弹性容器的每一个孩子变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。</p>
  </dd>
  <dt>
    轴</dt>
  <dd>
    <p>每个弹性盒布局以两个轴来排列。弹性子元素沿着<strong>主轴</strong>依次相互排列<strong>。侧轴</strong>垂直于主轴<strong>。</strong></p>
    <ul>
      <li>属性 <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> 建立主轴。</li>
      <li>属性 <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> 定义了弹性子元素如何在当前线上沿着主轴排列。</li>
      <li>属性 <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> 定义了弹性子元素如何在当前线上沿着侧轴排列。</li>
      <li>属性 <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> 覆盖父元素的<code>align-items属性,</code>定义了单独的弹性子元素如何沿着侧轴排列。</li>
    </ul>
  </dd>
  <dt>
    方向</dt>
  <dd>
    <p>The <strong>main start</strong>/<strong>main end </strong>and&nbsp;<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&nbsp;main axis&nbsp;and&nbsp;cross axis&nbsp;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&nbsp;<a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a>&nbsp;property assigns elements to ordinal groups and determines which elements appear first.</li>
      <li>The&nbsp;<a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a>&nbsp;property shorthands the&nbsp;<a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a>&nbsp;and&nbsp;<a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>&nbsp;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&nbsp;<a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>&nbsp;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&nbsp;<strong>main size</strong>&nbsp;and&nbsp;<strong>cross size,</strong>&nbsp;which respectively follow the&nbsp;main axis&nbsp;and&nbsp;cross axis&nbsp;of the flex container.</p>
    <ul>
      <li>The&nbsp;<code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code>&nbsp;and&nbsp;<code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code>&nbsp;properties have a new value,&nbsp;<code>auto</code>&nbsp;that establishes the minimum size of a flex item.</li>
      <li>The&nbsp;<a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a>&nbsp;property shorthands the&nbsp;<code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>,&nbsp;<a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, and&nbsp;<a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a>&nbsp;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&nbsp;the&nbsp;<a href="/en/CSS/display" title="/en/CSS/display">display</a>&nbsp;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.&nbsp;The&nbsp;<code>flex</code>&nbsp;value makes the flex container a block-level element. The&nbsp;<code>inline-flex</code>&nbsp;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,&nbsp;<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&nbsp;<code style="color: rgb(93,86,54); font-size: 14px">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&nbsp;<code style="font-size: 14px">visibility:collapse</code>&nbsp;on a flex item causes it to be treated as if it were&nbsp;<code style="font-size: 14px">display:none</code>&nbsp;instead of the intended behavior, treating it as if it were&nbsp;<code style="font-size: 14px">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&nbsp;<code>visibility:collapse</code>.</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="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>&nbsp;in the W3C Flexible Box Layout Model specification for more details.</p>
<p>To ensure a reasonable default minumum 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")}}&nbsp; and {{cssxref("min-height")}} for more details.</p>
<p>Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. &nbsp;This means that the flex items will stay centered, even if they overflow the flex container. &nbsp;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! &nbsp;In 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. &nbsp;Instead of using the <code>align-</code>&nbsp;properties, just put auto margins on the flex items you wish to center. &nbsp;Instead of the <code>justify-</code>&nbsp;properties, put auto margins on the outside edges of the first and last flex items in the flex container. &nbsp;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. &nbsp;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&nbsp;damage the document's accessibility.&nbsp;</p>
<h2 id="Flexible_box_properties">Flexible box properties</h2>
<p>{{ CSS_Reference:FlexBox() }}</p>
<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>column-* properties of the&nbsp;<a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">Multicol module</a>&nbsp;have no effect on a flex item.</li>
  <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using&nbsp;<code>float</code>&nbsp;causes the&nbsp;<code>display</code>&nbsp;property of the element to compute to&nbsp;<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.&nbsp;</p>
<pre class="brush:html;">
​&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

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

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-direction: row;
&nbsp;&nbsp; }

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

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

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

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

&nbsp;&nbsp;&nbsp;.flex &gt; div:hover
&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 200px;
&nbsp;&nbsp; }
&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&lt;/style&gt;
&nbsp;&nbsp;&nbsp; 
&nbsp;&lt;/head&gt;
&nbsp;&lt;body&gt;
  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
  &lt;div class="flex"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;uno&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;due&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;tre&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&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="internal default" 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;
&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;style&gt;

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

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

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

 &lt;/style&gt;
&nbsp; &lt;/head&gt;
&nbsp; &lt;body&gt;
 &lt;header&gt;header&lt;/header&gt;
 &lt;div id='main'&gt;
&nbsp;&nbsp;&nbsp; &lt;article&gt;article&lt;/article&gt;
&nbsp;&nbsp;&nbsp; &lt;nav&gt;nav&lt;/nav&gt;
&nbsp;&nbsp;&nbsp; &lt;aside&gt;aside&lt;/aside&gt;
 &lt;/div&gt;
 &lt;footer&gt;footer&lt;/footer&gt;
&nbsp; &lt;/body&gt;
&lt;/html&gt;</pre>
<h2 id="Playground">Playground</h2>
<p>There are several flexbox playgrounds available online for experimenting:</p>
<ul>
  <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
  <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</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>Flexibles boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="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/CSS/direction" title="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&nbsp;&nbsp; <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</td>
        <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br />
          {{ CompatGeckoDesktop("19.0") }}(Behind a pref) [2]</td>
        <td>21.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo() }} [1]</td>
        <td>12.10</td>
        <td>{{ CompatNo() }} [1]</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br />
          {{ CompatGeckoMobile("19.0") }}(Behind a pref) [2]</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>[1] Internet Explorer 10 and Safari support an old incompatible draft version of the specification. They have not been updated to support the final version.</p>
<p>[2] Firefox supports only single-line flexbox. To activate flexbox support, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>.</p>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
Revert to this revision