flex

概要

flex CSS プロパティは、flex アイテムが余白を埋めるように寸法を変更する度合いを指定します。flex アイテムは flex grow factor または flex shlink factor に比例して、利用可能な余白を使用してはみ出すことがないように拡張されます。

• 初期値 error:(<s*codes+ids*=s*"initial-flex"[^>]*>)</s*codes+ids*=s*"initial-flex"[^>
• 適用対象 flex アイテム
• 継承 no
• メディア visual
• 計算値個々のプロパティを参照

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

形式構文: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex: none                                            /* 値 'none' の場合 */
flex: <'flex-grow'>                                   /* 値が 1 つの構文、パターン 1 */
flex: <'flex-basis'>                                  /* 値が 1 つの構文、パターン 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* 値が 2 つの構文、パターン 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* 値が 2 つの構文、パターン 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* 値が 3 つの構文 */

flex: inherit

値

<'flex-grow'>

詳しくは <数量> をご覧ください。負の値は不正とみなされます。

<'flex-shrink'>

詳しくは <数量> をご覧ください。負の値は不正とみなされます。この値は省略可能です。

<'flex-basis'>

flex アイテムの flex basis を定義します。width プロパティおよび height プロパティで正当な任意の値を受け入れます。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。既定値は 0% です。

none

このキーワードは 0 0 auto に計算されます。

auto

このキーワードは 1 1 auto と等価です。

initial

このキーワードは 0 1 auto と等価です。

例

FIXME: 

仕様書

ブラウザ実装状況

[1] Firefox は単一ラインの flexbox のみサポートしています。flexbox サポートを有効にするには、Firefox 18 および 19 ではユーザが about:config の設定 "layout.css.flexbox.enabled" を true に変更することが必要です。

参考情報

• Using CSS flexible boxes
• flex 関連 CSS プロパティ: margin 、 align-content 、 align-items 、 align-self 、 display 、 flex 、 flex-basis 、 flex-direction 、 flex-flow 、 flex-grow 、 flex-shrink 、 flex-wrap 、 justify-content 、 min-height 、 min-width 、 order