mozilla

Revision 330615 of CSS flexible box の利用

  • リビジョンの URL スラグ: CSS/Using_CSS_flexible_boxes
  • リビジョンのタイトル: CSS flexible box の利用
  • リビジョンの ID: 330615
  • 作成日:
  • 作成者: saneyuki_s
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{ 翻訳中() }}

CSS3 Flexible Box(可変ボックス)、または flexbox は、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードです。 多くのアプリケーションにおいて、flexible box モデルは、float を使わず、そして flex container のマージンがそのコンテンツのマージンを相殺することも無く、block モデルを超えるための手段を提供します。

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.

註: CSS Flexible Box レイアウト仕様は勧告候補の段階にありますが、すべてのプロパティはブラウザ互換性を保証するために、Internet Explorerであれば-ms-、Gecko であれば-moz-、Operaであれば -o-、そして WebKit であれば -webkit- のような接頭辞を付けた上で使用されるべきです。

Flexible box のコンセプト

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.

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 to 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.

Flexible box の用語

While a discussion of flexible boxes is liberated from terms like horizontal/in-line 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 flex-direction of row, 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.

flex_terms.png

Flex container(Flexコンテナ)
The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.
Flex item(Flex アイテム)

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

Axis(軸)

Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

  • The flex-direction property establishes the main axis.
  • The justify-content property defines how flex items are laid out along the main axis on the current line.
  • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
  • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
Direction(方向)

The main start/main end and cross start/cross end sides pairs 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.
Line(ライン)

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.

Dimension(寸法)

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.

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.

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.

基本的な flex の例

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
   {
      /* 基本のスタイルの指定 */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox の設定 */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: -moz-flex;
      -moz-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* transition を上手く動作させるために指定します (Transition
                      "width:auto" を指定している場合の transition は現在の Gecko と WebKit では不安定です。
                      詳細については http://bugzil.la/731886 を参照してください) */

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

   /* 色の指定 */
   .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 レイアウトの例

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:    -moz-flex;
   display:         flex;
   -webkit-flex-flow: row;
      -moz-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%;
      -moz-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
      -moz-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
      -moz-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
      -moz-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
      -moz-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
      -moz-order: 3;
           order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* 3 コラム表示には狭すぎる場合 */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
       -moz-flex-flow: column;
            flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* ドキュメントの順番に戻す */
    -webkit-order: 0;
       -moz-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

You can also manipulate a flexbox layout in this Flexbox Playground.

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] 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")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

注記

[1] Internet Explorer 10 と Safari は互換性の無い古いバージョンの草案仕様をサポートしています。最終版の仕様のサポートのためのアップデートは行われていません。

[2] Firefox は水平方向の flexbox のみをサポートしています。flexbox のサポートを有効にするには、ユーザーが設定値を追加する必要があります。

このリビジョンのソースコード

<p>{{ 翻訳中() }}</p>
<p>CSS3 <strong>Flexible Box</strong>(可変ボックス)、または <em>flexbox</em> は、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置される<a href="/en-US/docs/CSS/Layout_mode" title="/en-US/docs/CSS/Layout_model">レイアウトモード</a>です。 多くのアプリケーションにおいて、flexible box モデルは、float を使わず、そして flex container のマージンがそのコンテンツのマージンを相殺することも無く、block モデルを超えるための手段を提供します。</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>註:</strong> CSS Flexible Box レイアウト仕様は勧告候補の段階にありますが、すべてのプロパティはブラウザ互換性を保証するために、Internet Explorerであれば<code>-ms-</code>、Gecko であれば<code>-moz-</code>、Operaであれば <code>-o-</code>、そして WebKit であれば <code>-webkit-</code> のような接頭辞を付けた上で使用されるべきです。</div>
<h2 id="Flexible_box_.E3.81.AE.E3.82.B3.E3.83.B3.E3.82.BB.E3.83.97.E3.83.88">Flexible box のコンセプト</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 to 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_box_.E3.81.AE.E7.94.A8.E8.AA.9E">Flexible box の用語</h2>
<p>While a discussion of flexible boxes is liberated from terms like&nbsp;horizontal/in-line 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="internal default" src="/files/3739/flex_terms.png" /></p>
<dl>
  <dt>
    Flex container(Flexコンテナ)</dt>
  <dd>
    The parent element in which flex items are contained. A flex container is defined using the&nbsp;<code>flex</code>&nbsp;or&nbsp;<code>inline-flex</code>&nbsp;values of the&nbsp;<a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>&nbsp;property.</dd>
  <dt>
    Flex item(Flex アイテム)</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>
    Axis(軸)</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&nbsp;<strong>cross axis</strong> is the axis perpendicular to the <strong>main axis</strong>.</p>
    <ul>
      <li>The&nbsp;<code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code>&nbsp;property establishes the main axis.</li>
      <li>The&nbsp;<a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a>&nbsp;property defines how flex items are laid out along the&nbsp;main axis&nbsp;on the current line.</li>
      <li>The&nbsp;<a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a>&nbsp;property&nbsp;defines the default for how flex items are laid out along the&nbsp;cross axis&nbsp;on the current line.</li>
      <li>The&nbsp;<a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a>&nbsp;property defines how a single flex item is aligned on the&nbsp;cross axis, and overrides the default established by&nbsp;<code>align-items.</code></li>
    </ul>
  </dd>
  <dt>
    Direction(方向)</dt>
  <dd>
    <p>The <strong>main start</strong>/<strong>main end </strong>and&nbsp;<strong>cross start</strong>/<strong>cross end</strong> sides pairs 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>
    Line(ライン)</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>
    Dimension(寸法)</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="flexible_box_.E3.81.AE.E6.8C.87.E5.AE.9A">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>
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&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>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><span id="cke_bm_69S">&nbsp;</span>{{ CSS_Reference:FlexBox() }}<span id="cke_bm_69E">&nbsp;</span></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=".E4.BE.8B">例</h2>
<h3 id=".E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA_flex_.E3.81.AE.E4.BE.8B">基本的な flex の例</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;
  &lt;head&gt;
    &lt;style&gt;

   .flex
   {
      /* 基本のスタイルの指定 */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox の設定 */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: -moz-flex;
      -moz-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

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

      width: 30px; /* transition を上手く動作させるために指定します (Transition
                      "width:auto" を指定している場合の transition は現在の Gecko と WebKit では不安定です。
                      詳細については http://bugzil.la/731886 を参照してください) */

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

   /* 色の指定 */
   .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_.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E3.81.AE.E4.BE.8B">Holy Grail レイアウトの例</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;
  &lt;head&gt;
    &lt;style&gt;

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

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:    -moz-flex;
   display:         flex;
   -webkit-flex-flow: row;
      -moz-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%;
      -moz-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
      -moz-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%;
      -moz-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
      -moz-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%;
      -moz-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
      -moz-order: 3;
           order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* 3 コラム表示には狭すぎる場合 */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
       -moz-flex-flow: column;
            flex-flow: column;
   }

   #main &gt; article, #main &gt; nav, #main &gt; aside {
    /* ドキュメントの順番に戻す */
    -webkit-order: 0;
       -moz-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>You can also manipulate a flexbox layout in this <a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a>.</p>
<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]</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")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">注記</h3>
<p>[1] Internet Explorer 10 と Safari は互換性の無い古いバージョンの草案仕様をサポートしています。最終版の仕様のサポートのためのアップデートは行われていません。</p>
<p>[2] Firefox は水平方向の flexbox のみをサポートしています。flexbox のサポートを有効にするには、ユーザーが設定値を追加する必要があります。</p>
このリビジョンへ戻す