为什么填充我的视口高度会使 flexbox 工作？答案

【问题标题】：Why does filling my viewport height makes flexbox work?为什么填充我的视口高度会使 flexbox 工作？
【发布时间】：2018-03-18 23:27:44
【问题描述】：

我正在使用 bootstrap 4 学习绳索，我偶然发现了 flexbox 的一个小问题。我试图在页面中心对齐文本，并且仅在添加类以填充视口时才有效。为什么它只在我使用时才有效？我无法绕过它，我想你们可以帮我一把。这是一小段代码，所以我会发布我写的所有内容。

.fill-viewport {
  min-height: 100vh;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Landing Page</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  </head>
  <body>

    <section id="introduction">
      <div class="container">
        <div class="row fill-viewport align-items-center">
          <div class="col-12">
            <h1>Some text here</h1>
            <p>Please center </p>
            <a href="#" role="button">Try it yesterday</a>
          </div>
        </div>
      </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  
  </body>
</html>

注意：显然，CSS 类位于单独的样式表中。我只是将代码粘贴在 HTML 下方，以便你们可以看到我在文件中包含的所有内容。

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

因为默认情况下，行的高度是它包含的内容的高度。因此align-items: center 在视觉上没有影响。

一旦你声明了height 或min-height，那么align-items 就会开始产生效果。

例子：

div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid;
}

<div>Hello</div>
<div style="height:100px;">Hello</div>

【讨论】：