FlexboxとInternet Explorer 11（<html>のdisplay：flex？）

117

「フロート」レイアウトから離れ、将来のプロジェクトではCSSフレックスボックスを使用する予定です。現在のバージョンのすべての主要なブラウザーが（何らかの方法で）フレックスボックスをサポートしているように見えるのを見て、私は嬉しく思いました。

いくつかの例を見るために、「Solved by Flexbox」に向かいました。ただし、「スティッキーフッター」の例はInternet Explorer 11では動作しないようです。少し遊んでみdisplay:flexて、<html>とwidth:100%に追加することで動作しました<body>

だから私の最初の質問は：誰かがそのロジックを私に説明できますか？私はいじっただけでうまくいきましたが、なぜそれがそのように働いたのかよくわかりません...

次に、Internet Explorer以外のすべてのブラウザーで機能する「メディアオブジェクト」の例があります。私もそれをいじりましたが、成功しませんでした。

したがって、2番目の質問は、「メディアオブジェクト」の例をInternet Explorerで機能させる「クリーンな」可能性はあるのでしょうか。

— こでかん
ソース

1

この古い質問への更新のみ：リンクされたデモはIE11で正常に動作します。これが尋ねられてから3年間でバグが修正されたに違いありません。

— ダリル

151

http://caniuse.com/#feat=flexboxによると：

「IE10とIE11のデフォルト値は、のためにflexある0 0 autoのではなく、0 1 auto2013年9月の時点で、ドラフト仕様に従って、」

つまり、flex:1簡単に言うと、CSSのどこかに次のようなものがある場合、それはすべてのブラウザで同じように翻訳されるわけではありません。に変更してみてください1 0 0。すぐに機能することがわかります。

問題は、このソリューションがおそらくFirefoxを台無しにすることですが、その後、ハックを使用してMozillaのみをターゲットにし、元に戻すことができます。

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

以来flexboxW3C候補と公式ではありません、ブラウザは異なる結果を与える傾向があるが、私はそれが近い将来に変更されますね。

誰かがより良い答えを持っているなら、私は知りたいです！

— Odisseas
ソース

1

IE10のニーズ-ms-flex: 1 0 0;とIE11 が必要だと思いflex: 1 0 0;ます。

— アインシュタイン、2014年

19

Google Chrome 39では、これが突然機能しなくなりました。私は追跡するために年齢を取りましたが、それは3桁目の仕様でした。Chrome 39はに準拠していませんflex: 1 0 0;。しかしflex: 1 0 0%;（％に注意してください ）または機能します。flex: 1 0 auto;

— 2014年

はい、これは私のデザインのいくつかを壊したのも事実です！私はそれを単に変更して修正しましたが、flex: 1;それはあなたが何をしようとしているのかに依存すると思います...

— Odisseas

1

IE11の中心的な問題は、計算方法flex-basisです。 Githubのはなぜの良い議論があるflex:1 0 100%IE11のためのいくつかのケースでは動作しますがflex: 1 0 0%、さらにはflex: 1 0 auto他の人で作品を。事前に内容を知る必要があります。

— P.Brian.Mackey

caniuse.com/#feat=flexbox、それは、具体的にIE 11は..第三引数、フレックス基本プロパティに追加する手段を必要とすることが既知の問題で言及

— ヘンリーネオ

49

別のフレックスコンテナーを使用してmin-height、IE10とIE11の問題を修正します。

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

動作するデモをご覧ください。

フレックスボックスレイアウトはbody、jQueryプラグイン（オートコンプリート、ポップアップなど）を介して挿入された要素を台無しにするため、直接使用しないでください。
使用しないでくださいheight:100%またはheight:100vhフッターは、ウィンドウの下部に固執し、長いコンテンツに適応しませんので、あなたのコンテナに。
使用するflex-grow:1のではなく、flex:1用IE10とIE11のデフォルト値の原因flexです0 0 autoありません0 1 auto。

— ベリグ
ソース

3

副作用を避けるために追加flex-direction: columnする.ie-fixMinHeight必要があることがわかりました。IE固有のHTMLがない場合、使用できます.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

これは2歳ですが、ありがとうございます。私はこのstackoverflow.com/a/24979148/359157をフォローしていて、EdgeとChromeが問題なく動作しているのにIEが無効化された理由を突き止めようと永遠に戦いました。heightVsがmin-height鍵となりました。

— TyCobb 2018年

39

あなただけが必要flex:1です。IE11の問題が修正されます。私はOdisseasの2番目です。さらに、100％の高さをhtml、body要素に割り当てます。

CSSの変更：

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

作業用URL：http : //jsfiddle.net/3tpuryso/13/

— アショククマールグプタ
ソース

この問題について詳しく説明してください。IEで「メディアオブジェクト」の例を機能させる「クリーン」な可能性はありますか？

— Ashok Kumar Gupta

1

これは私にとってはうまくいきます。（それは私を捕まえので）私が見つけたことの一つは、あなたが含む要素を持っている場合、ということですdisplay: flex;と、関連するスタイルが適用されなければならないの両方bodyとコンテナ：jsfiddle.net/Skateside/nezdrrkr

— ジェームス・ロング

HTMLの高さを100％に設定すると、コンテンツがmain適切に拡大しなくなるようです（少なくともクロムでは）。十分なコンテンツを追加すると、フッターがオーバーランします。 jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSethは、現在の状態では、基本的に100％まで成長し、1ピクセル以上にはならないように指示しています。代わりにを設定しhtmlてmin-height: 100%、コンテンツをフォローする必要があります

— Odisseas

ありがとう！私にとって欠けていた部分は、実際にはflex属性ではありませんでしたが、含まれている要素の高さ：100％（私のサイトにはレスポンシブなサイドバーが含まれているため、.pusher divでした）。

— ザンサー2017年

0

以下は、Internet Explorer 11とChromeでも機能するflexの使用例です。

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

スニペットを展開

— BadTree Lu
ソース

15

だけを貼り付けるのではなく、追加情報を入力してくださいHtml。

— Peter

7

この答えはおそらく正しいと便利ですが、問題の解決にどのように役立つかを説明するためにいくつかの説明を含めることが望ましいです。これは、動作が停止する原因となる変更（おそらく無関係）があり、ユーザーがいったんどのように動作したかを理解する必要がある場合に、将来的に特に役立ちます。

— Erty Seidohl、2018年

0

時々それは追加するのと同じくらい簡単です： '-ms-'スタイルの前に-ms-flex-flowのように：行の折り返し。それも動作させるために。

— マーセル・グレイ
ソース

3

時々、しかしほとんどの場合はそうではありません;）IEをグローバルにダンプしましょう

— trainoasis