javascript - 如何解决这个 flex-box 垂直对齐问题？

Question

我正在使用 Materialise 框架。效果很好，但我想让所有页面都填满窗口(使用最小高度)。这似乎搞砸了元素的垂直对齐。

这是我正在使用的 CSS 代码:

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

这就是我用来调整元素大小以便它们填满窗口的方法。

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

这是我想要在保持垂直对齐(水平对齐)的同时匹配窗口高度的示例:

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

所以问题是是否有一个很好的替代使用 flex 盒子的方法？如果不是，那么如何让容器在 flexbox 将文本居中之前调整大小？

此外，这是调用 resize() 时的样子，因此您可以看到问题:

Answer 1

我认为有很多方法可以解决这个问题。但是您可以只使用 CSS 来应用 min-height: 100vh。我只是把它放在 .valign-wrapper 上，它将使包含 .fill-container 的 child 居中。还应用 justify-content: center 水平居中(根据您的屏幕截图)

.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>