14

以下のコードを使用していますが、Chrome では動作しますが、IE9 と Safari では動作しません。

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

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>
4

5 に答える 5

23

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 の最初のバージョンです。

于 2013-07-03T14:36:26.517 に答える
16

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

バージョンごとの 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 : フレックスボックスを表示 | インラインフレックスボックス 

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
于 2013-07-03T13:05:37.157 に答える
2

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

視覚に関心のある @chris-coyier は最近、(@hugo-giraudel) の助けを借りて投稿を刷新しました: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

コードサンプル：ライブ（@ 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;
于 2014-05-20T15:36:02.093 に答える
1

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

Opera 12.1+ は、接頭辞なしの最新の 2012 バージョンをサポートしています。Chrome 30 以降および IE11 以降でもサポートされます。Firefox 22 でもすでにサポートされていますが、部分的にしかサポートされていません。flex-wrap プロパティと flex-flow ショートハンドはサポートされていません。

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

于 2013-07-03T14:57:47.833 に答える