为什么填充视口高度可以使Flexbox正常工作？
[英]Why does filling my viewport height makes flexbox work?
问题描述
I am learning the ropes with bootstrap 4 and I stumbled across a little problem with flexbox. 
我正在用bootstrap 4学习绳索，但偶然发现了flexbox的一个小问题。 I was trying to align a text in the center of the page and it only worked when I added the class to fill the viewport. 我试图在页面中心对齐文本，并且仅当我添加类以填充视口时，该文本才起作用。 Why does it only work when I am using it? 为什么仅在使用时才起作用？ I can't wrap my head around it and I thought you guys could give me a hand. 我无法绕过它，我以为你们可以帮帮我。 It's a tiny piece of code so I'll post everything I wrote. 这只是一小段代码，因此我将张贴我编写的所有内容。
.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>
Note: Evidently, the CSS class is in a separate stylesheet. 注意：显然，CSS类位于单独的样式表中。 I just pasted the code below the HTML so you guys can see everything I included in the file. 我只是将代码粘贴在HTML下方，以便大家可以看到文件中包含的所有内容。
1 个解决方案
解决方案1
0 已采纳 2018-03-17 16:40:23
Because by the default the height of the row is the height of the content it contains. 因为默认情况下，行的高度是它包含的内容的高度。 Therefore align-items: center has no effects visually. 因此， align-items: center在视觉上没有效果。
Once you declared height or min-height , then align-items starts making effects. 声明height或min-height ， align-items开始产生效果。
Examples: 例子：
div { display: flex; align-items: center; margin-bottom: 20px; border: 1px solid; }
<div>Hello</div> <div style="height:100px;">Hello</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.