html - polyfill - justify-content ie11




Flexbox und Internet Explorer 11(Anzeige: flex in<html>?) (3)

Ich plane, weg von "floaty" Layouts zu gehen und css flexbox für zukünftige Projekte zu verwenden. Ich war erfreut zu sehen, dass alle gängigen Browser in ihren aktuellen Versionen (auf die eine oder andere Weise) Flexbox unterstützen.

Ich ging zu "Solved by Flexbox" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ um einige Beispiele zu sehen. Das "Sticky Footer" -Beispiel scheint jedoch in IE11 nicht zu funktionieren. Ich spielte ein bisschen herum und brachte es zum Laufen, indem ich display:flex zu <html> und width:100% zu <body> hinzufügte

Meine erste Frage ist also: Kann mir jemand diese Logik erklären? Ich habe nur herumgespielt und es hat funktioniert, aber ich verstehe nicht ganz warum WAR es so ...

Dann gibt es das "Media Object" Beispiel, das in allen Browsern funktioniert, außer - Sie haben es erraten - IE. Ich habe auch damit herumgespielt, aber ohne Erfolg.

Meine zweite Frage lautet daher: Gibt es eine "saubere" Möglichkeit, das "Media Object" -Beispiel in IE zu betreiben?


Hier sehen Sie ein Beispiel für die Verwendung von flex, das auch in Internet Explorer 11 und Chrome funktioniert.

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>


Laut http://caniuse.com/#feat=flexbox :

"Die IE10- und IE11-Standardwerte für flex sind 0 0 auto anstatt 0 1 auto , wie in der Entwurfsspezifikation, Stand September 2013"

In einfachen Worten, wenn Sie irgendwo in Ihrem CSS etwas haben: flex:1 , das ist nicht in allen Browsern gleich übersetzt. Versuchen Sie, es in 1 0 0 ändern und ich glaube, Sie werden sofort sehen, dass es - Kind - funktioniert.

Das Problem ist, dass diese Lösung wahrscheinlich Firefox durcheinander bringt, aber dann können Sie einige Hacks verwenden, um nur Mozilla zu tarnen und es wieder zu ändern:

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

Da flexbox ein W3C-Kandidat ist und nicht offiziell, neigen Browser dazu, andere Ergebnisse zu liefern, aber ich denke, das wird sich in flexbox Zukunft ändern.

Wenn jemand eine bessere Antwort hat, würde ich gerne wissen!


Verwenden Sie einen anderen Flex-Container, um das Problem mit der minimalen min-height in IE10 und IE11 zu beheben:

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;
}

Sehen Sie eine funktionierende Demo .

  • Verwenden Sie das flexbox-Layout nicht direkt auf dem body es Elemente über jQuery-Plugins (Autocomplete, Popup usw.) enthält.
  • Verwenden Sie keine height:100% oder height:100vh auf Ihrem Container, da die Fußzeile am unteren Rand des Fensters bleibt und sich nicht an lange Inhalte anpasst.
  • Verwenden Sie flex-grow:1 statt flex:1 weil die Standardwerte IE10 und IE11 für flex 0 0 auto und nicht 0 1 auto .






flexbox