Wie behebt man dieses Flex-Box-Problem mit der vertikalen Ausrichtung?

Question

Ich verwende das Materialise-Framework. Es funktioniert gut, aber ich wollte alle Seiten füllen das Fenster (mit Min-Höhe). Dies scheint die vertikale Ausrichtung der Elemente zu vermasseln.

Dies ist der CSS-Code Ich verwende:

.valign-wrapper { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-align-items: center; 
     -ms-flex-align: center; 
      align-items: center; 
} 

Das ist, was ich mit der Größe der Elemente anzupassen, so dass sie das Fenster zu füllen.

function resize() { 
    var heights = window.innerHeight; 
    $(".fill-container").each(function() { 
     $(this).css("min-height", heights + "px"); 
    }); 
} 
resize(); 
window.onresize = function() { 
    resize(); 
}; 

Hier ist ein Beispiel für etwas, das ich die Höhe des Fensters anpassen möchten, während die vertikale Ausrichtung beibehalten wird (es auf Stufe ist):

<div class="parallax-container valign-wrapper"> 
    <div class="section no-pad-bot"> 
     <div class="container fill-container"> 
      <div class="row center"> 
       <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
      </div> 
     </div> 
    </div> 
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div> 
</div> 

Die Frage ist also gibt es eine gute Alternative zur Verwendung von Flexboxen? Wenn nicht, wie bekomme ich dann die Container zur Größenänderung vor die Flexboxes zentrieren den Text?

Auch dieses ist, wie es aussieht, wenn Resize() aufgerufen wird, so dass Sie das Problem sehen:

Answer 1

Ich denke, es gibt eine Reihe von Möglichkeiten, wie Sie diese Adresse könnte. Aber Sie können einfach CSS verwenden, um min-height: 100vh anzuwenden. Ich lege das auf .valign-wrapper und es wird das Kind zentrieren, das .fill-container enthält. Auch angewendet justify-content: center horizontal zum Zentrum (pro Ihren Screenshot)

.valign-wrapper { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="parallax-container valign-wrapper"> 
 
    <div class="section no-pad-bot"> 
 
     <div class="container fill-container"> 
 
      <div class="row center"> 
 
       <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div> 
 
</div>

Answer 2

Wenn Sie Seitenhöhe wissen, ich denke, dass einfache Lösung hinzufügen werden:

$("h5").css("line-height", heights + "px");

Ich denke, es wird funktionieren. :)