非常方便的布局
html：
<body>
<div id="app">
<div class="header">
<h1>你好，世界！</h1>
</div>
<div class="main">
啊<br />啊<br />
</div>
<div class="footer">
<p>唉呀妈呀</p>
</div>
</div>
</body>
css：
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}
运行结果
非常适合上中下的快速布局，该布局只需要设置最外面main的css属性，以及中间部分div的属性，就可以直线头部和底部时钟贴着浏览器，中间部分自适应页面，没有内容时，网页会变成一整页，内容很多时，会撑开并有滚动条可以下拉。