vue垂直布局_基于 Flex 实现两端对齐垂直布局

一般来说布局我们都是水平布局，最多搞个垂直居中。而且对于一些 float 、 position 好像本身就不太适合垂直布局。

正好前段时间用 weex 做了一个页面，weex 天生基于 flex 。且 weex 中 flex-direction 默认值为 column，flex-direction 定义了 flex 容器中 flex 成员项的排列方向。

页面分为三部分(header，section，footer)，有一些优化的点：类似两端对齐，但是最好可以让 section 偏上一点

尽可能一屏显示，如果不够那么出滚动条。

那么我们来看看有什么方案可以实现。

基于 Flex 实现

我是头部，我希望我不管大小屏幕都在最上面

我是内容，我希望我在屏幕的中间显示，我不希望我压住其他内容，我希望一屏可以展示这个页面

我是底部，我希望我可以据底，如果屏幕超出了，我滑动可见。

先设置一下基础条件 display: flex;flex-direction: column;，因为浏览器默认是水平对齐。

然后我们给盒子设置一下 min-height:500px 模拟一屏高度，正常可以使用 min-height: 100vh 或者 html,body{height: 100%;} 。