Flex-Aligner arbeitet an Firefox/Edge, nicht an Chrome

Question

Ich kann keinen Aligner mit Chrome arbeiten lassen, aber er funktioniert sowohl auf Firefox als auch auf Edge.

Ich verwende Flex CSS:

body { 
     min-height: 100%; 
     display: flex; 
     flex-direction: column; 
    } 

    wrapper { 
     height: 100%; 
     /* flex: 1; would be enough but it looks bad in IE */ 
     flex: 1 0 auto; 
     background-color: #3D9970; 
    } 

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

    .aligner-center { 
     max-width: 50%; 
     background-color: #ffb443; 
     padding: 20px; 
    } 

Sie sehen Ergebnis here

ich auch mit display:table ohne Erfolg versucht.

Haben Sie eine Idee, wie Sie mein Login-Formular div mit Chrome ausrichten?

Dank

Answer 1

Das Verhalten in Chrome erwartet wird, da es eine strengere Umsetzung der Flexbox spec (take a look at this thread too) hat:

1. Der Standarddehnungswert von align-self Eigenschaftsänderungen nur der verwendete Wert von die Eigenschaft des Elements cross size (height in diesem Fall).

2. Prozent berechnet aus dem explizit angegebenen Wert der cross-size Eigentum der Eltern, nicht, dass es Wert verwendet.

Der Prozentsatz wird mit Bezug auf die Höhe der erzeugten Box der umschließenden Blöcke berechnet. Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird (d. H. Abhängig vom Inhalt Höhe) und dieses Element nicht absolut positioniert ist, wird der Wert zu 'auto' (Source: W3C) berechnet.

Das bedeutet, dass auf height:100%aligner Einstellung, die das Kind wrapper (wiederum das Flex Kind eines flexbox) ist. Da wir bei wrapper keine Höhe angegeben haben, bedeutet das, dass es 100% der Standardhöhe wählt, die auto ist.

Lösung:

Eine der Lösungen ist Ihre wrapper ein flexbox zu und width: 100% für die aligner geben zu machen - siehe Demo unter:

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
wrapper { 
 
    height: 100%; 
 
    /* flex: 1; would be enough but it looks bad in IE */ 
 
    flex: 1 0 auto; 
 
    background-color: #3D9970; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.aligner-center { 
 
    max-width: 50%; 
 
    background-color: #ffb443; 
 
    padding: 20px; 
 
} 
 
body { 
 
    font: 16px/1.5 sans-serif; 
 
} 
 
p { 
 
    margin-bottom: 1em; 
 
} 
 
header, 
 
wrapper, 
 
footer { 
 
    padding: 2em; 
 
    color: white; 
 
} 
 
header { 
 
    background-color: #85144B; 
 
} 
 
footer { 
 
    background-color: #001F3F; 
 
}

<header> 
 
    Header 
 
</header> 
 
<wrapper> 
 
    <div class="aligner"> 
 
    <div class="aligner-center"> 
 
     Login Form 
 
    </div> 
 
    </div> 
 
</wrapper> 
 
<footer> 
 
    Footer 
 
</footer>