web-dev-qa-db-de.com

Flexbox zentriert sich nicht vertikal IE

Ich habe eine einfache Webseite mit einigen Lipsum-Inhalten, die auf der Seite zentriert sind. Die Seite funktioniert gut in Chrome und Firefox. Wenn ich die Größe des Fensters verkleinere, füllt der Inhalt das Fenster, bis dies nicht möglich ist, und fügt dann eine Bildlaufleiste hinzu und füllt den Inhalt am unteren Bildschirmrand aus. 

Die Seite wird jedoch nicht in IE11 zentriert. Ich kann die Seite in IE zentrieren, indem Sie den Körper biegen, aber wenn dies der Fall ist, wird der Inhalt nach oben aus dem Bildschirm ausgeblendet und der Inhalt wird abgeschnitten.

Im Folgenden sind die zwei Szenarien aufgeführt. Siehe die dazugehörigen Fiddles. Wenn das Problem nicht sofort ersichtlich ist, reduzieren Sie die Größe des Ergebnisfensters, sodass eine Bildlaufleiste erstellt werden muss.

Hinweis: Diese Anwendung richtet sich nur an die neuesten Versionen von Firefox, Chrome und IE (IE11), die alle die Kandidatenempfehlung von Flexbox unterstützen. Die Kompatibilität der Funktionen sollte daher (theoretisch) kein Problem sein ).

Edit: Bei Verwendung der Vollbild-API zur Vollbilddarstellung des äußeren div werden alle Browser korrekt mit dem ursprünglichen CSS zentriert. Beim Verlassen des Vollbildmodus wird IE jedoch wieder horizontal zentriert und vertikal oben ausgerichtet. 

Edit: IE11 verwendet eine herstellerunabhängige Implementierung von Flexbox. Layout-Updates für flexible Boxen ("Flexbox")


Zentriert und skaliert korrekt in Chrome/FF, zentriert nicht, passt aber korrekt in IE11

Geige: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Zentriert überall korrekt, schneidet oben ab, wenn die Größe verringert wird

Geige: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}
87
Dragonseer

Ich habe festgestellt, dass z. B. der Browser Probleme hat, innere Container vertikal auszurichten, wenn nur der Stil für die Mindesthöhe eingestellt ist oder wenn der Höhenstil überhaupt fehlt. Was ich getan habe, war Höhenstil mit etwas Wert hinzuzufügen und das Problem für mich zu beheben.

zum Beispiel : 

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Jetzt haben wir den Höhenstil, aber die Min-Höhe wird ihn überschreiben. Das ist zB glücklich und wir können immer noch Min-Höhe verwenden.

Hoffe, das ist für jemanden hilfreich.

180

Versuchen Sie, das beliebige div, das Sie mit Flexbox haben, mit flex-direction: column in einen Container einzuwickeln, der auch Flexbox ist.

Ich habe das gerade in IE11 getestet und es funktioniert. Eine seltsame Lösung, aber bis Microsoft die interne Fehlerbehebung extern durchführt, muss dies erledigt werden!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 Beispiele, die Sie in IE11 testen können: http://codepen.io/philipwalton/pen/JdvdJEhttp://codepen.io/chriswrightdesign/pen/emQNGZ/

47
ericodes
5
David Zulaica

Nur für den Fall, dass jemand mit dem gleichen Problem hierher kommt, das in früheren Kommentaren nicht speziell angesprochen wurde.

Ich hatte margin: auto auf dem inneren Element, was dazu führte, dass es an der Unterseite des übergeordneten Elements (oder des äußeren Elements) haftete. Was für mich das Problem war, war, den Rand in margin: 0 auto; zu ändern.

5
Gal Talmor

ich habe beide Geigen aktualisiert. Ich hoffe, es wird deine Arbeit erledigen.

Zentrierung

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

zentrieren und scrollen

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }
1
Umar Khan

Ich habe nicht viel Erfahrung mit Flexbox, aber es scheint mir, dass die erzwungene Höhe der Tags html und body dazu führt, dass der Text oben verschwindet, wenn die Größe geändert wird. In IE kann nicht getestet werden, aber ich habe den gleichen Effekt in Chrome gefunden.

Ich habe deine Geige gespalten und die Erklärungen height und width entfernt.

body
{
    margin: 0;
}

Es sah auch so aus, als müssten die flex -Einstellungen auf andere flex -Elemente angewendet werden. Das Anwenden von display: flex auf .inner verursachte jedoch Probleme, so dass ich den .inner explizit auf display: block und den .outer auf flex für die Positionierung einstellte.

Ich habe die minimale .outer Höhe festgelegt, um das Ansichtsfenster zu füllen, den display: flex und die horizontale und vertikale Ausrichtung festgelegt:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Ich habe .inner explizit auf display: block gesetzt. In Chrome sah es so aus, als hätte es flex von .outer geerbt. Ich habe auch die Breite eingestellt:

.inner
{
    display:block;
    width: 80%;
}

Dies hat das Problem in Chrome behoben, hoffentlich auch in IE11. Hier ist meine Version der Geige: http://jsfiddle.net/ToddT/5CxAy/21/

1
Todd

Hier ist meine Arbeitslösung (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
0
Sergey Fedirko

Eine gute Lösung gefunden, die für mich funktioniert hat, überprüfen Sie diesen Link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Zuerst fügen wir ein übergeordnetes div hinzu, zweitens ändern wir die höhe: 100% bis min-höhe: 100 vh. Es wirkt wie ein Zauber.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  
0
Avirtum

Wenn Sie die Breite und Höhe des übergeordneten Elements definieren können, gibt es eine einfachere Möglichkeit, das Bild zu zentralisieren, ohne dafür einen Container erstellen zu müssen.

Wenn Sie die minimale Breite definieren, erkennt IE auch die maximale Breite.

Diese Lösung funktioniert für IE10 +, Firefox und Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

0
Humberto Mendes