web-dev-qa-db-ja.com

CSSのクロスブラウザーサポートFlexbox

下記のコードを使用していますが、Chrome=では機能しますが、IE9とSafariでは機能しません。

さまざまなベンダープレフィックスを取得したにもかかわらず、解決策を探しましたが、それらの結果は私を困惑させています。

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>
cssflexboxcross-browser
14
jack prelusky

CSS FlexboxモデルはUIデザイン用に最適化されています。これは主に親要素のオーバーフローを回避するために開発されています。祖先要素のサイズが制限されている場合は子を縮小します。次の場合は子要素のサイズを拡張してスペースを埋めます祖先要素のサイズが拡張します。最小および最大の幅/高さプロパティにより、フレックスコンテナーの縮小および展開動作が壊れる可能性があります。

CSS FlexBoxバージョンごとのバージョン

W3 2009：表示：ボックス;

box-align                start | end | center | baseline | stretch  
box-direction            normal | reverse | inherit
box-flex                 <number>   0.0
box-flex-group           <integer>  1
box-lines                single | multiple
box-ordinal-group        <integer>  1   visual
box-orient               horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements    no  no  visual
box-pack                 start | end | center | justify

W3 2011：ディスプレイflexbox | inline-flexbox

flex-align        auto | baseline   auto
flex-direction    lr | rl | tb | bt | inline | inline-reverse | block | block-reverse   flexboxes   no  lr | rl | tb | bt
flex-order        <integer> 1   
flex-pack         start | end | center | justify

W3 2012：ディスプレイフレックス|インラインフレックス

align-content    flex-start | flex-end | center | space-between | space-around | stretch    
align-items      flex-start | flex-end | center | baseline | stretch
align-self       auto | flex-start | flex-end | center | baseline | stretch                 
flex-direction   row | row-reverse | column | column-reverse
flex-flow        <'flex-direction'> || <'flex-wrap'>    
flex-grow        <number>   ‘0’ 
flex-shrink      <number>   ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order            <number>   0
16
chandru kutty

すべてのFlexbox実装をカバーするには、CSSは次のようになります。

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

ただし、flex-direction: rowは、以前のflex-direction宣言をオーバーライドしない限り必要ありません。rowがデフォルトの方向です。また、IE10は、FlexboxをサポートするIEの最初のバージョンです。

22
cimmanon

私のFlexbox css：私はいくつかのデバイスでAndroid 2.3.3およびIOSからテストし、次のように動作します：

.flex-container {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;

}

.item {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
2
Martin Alcubierre Arenillas

仕様を読んで完全に理解することをお勧めします： http://dev.w3.org/csswg/css-flexbox/

@ chris-coyierは最近、@ hugo-giraudelの助けを借りて彼の投稿を刷新しました： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

コードサンプル：Live（@ chris-coyierへのクレジットが元の投稿を見つけられないため、再作成されました）： http://cdpn.io/oDxnp

コンパイルされた出力は次のようになります

ディスプレイ：フレックス; =>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

フレックス方向：行。 =>

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
1
imagineux

IE9-は、残念ながら、Flexbox=をまったくサポートしていません。IE10は、2011バージョンをサポートしています。

Opera 12.1+は接頭辞なしの最新の2012バージョンをサポートしています。 Chrome 30+およびIE11 +でもサポートされます。Firefox22でも既にサポートされていますが、部分的にしかサポートされていません。フレックスラッププロパティとフレックスフローショートハンドはサポートされていません。

Firefox、Chrome、Safari 3.1+の以前のバージョンは2009バージョンをサポートしています。 Chrome 21+は、プレフィックス付きの2012バージョンもサポートしています。

1
Ilya Streltsyn