flex

by 2 contributors:

概要

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 と等価です。
注意: 'flex' 短縮プロパティの <'flex-basis'> の既定値は、flex-basis プロパティの初期値とは異なります。
注意: <'flex-grow'> および <'flex-shrink'> の属性を省略すると '1' に設定されます。

FIXME: 

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module 勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0) (要設定) [1]
20.0 (20.0)
21.0-webkit 未サポート 12.10 未サポート
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? ? 未サポート 12.10 未サポート

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

参考情報

ドキュメントのタグと貢献者

タグ: 
Contributors to this page: ethertank, yyss
最終更新者: ethertank,
サイドバーを隠す