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

通常来讲布局咱们都是水平布局，最多搞个垂直居中。并且对于一些 float 、 position 好像自己就不太适合垂直布局。

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

页面分为三部分（header，section，footer），有一些优化的点：

1. 相似两端对齐，可是最好可让 section 偏上一点
2. 尽量一屏显示，若是不够那么出滚动条。

那么咱们来看看有什么方案能够实现。

基于 Flex 实现

<div id="app">
    <header>
        我是头部，我但愿我无论大小屏幕都在最上面
    </header>
    <section>
        <div>我是内容，我但愿我在屏幕的中间显示，我不但愿我压住其余内容，我但愿一屏能够展现这个页面</div>
    </section>
    <footer>
        我是底部，我但愿我能够据底，若是屏幕超出了，我滑动可见。
    </footer>
</div>

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

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

地址：https://www.lilnong.top/static/html/flex-direction-column-sf.html

justify-content: space-between;

咱们能够直接暴躁的设置两端对齐 #app{justify-content: space-between;}
justify-content: space-between; 第一个没有前padding，最后一个没有后padding
justify-content: space-around; 每个块先后padding同样大，也意味着相邻之间是双倍 padding
justify-content: space-evenly; 每一个空白区域同样大

看上去是实现了，可是若是咱们还但愿微调位置，那么就很难搞（变大，而后设置 min-height，容许缩小）。
地址：https://www.lilnong.top/static/html/flex-direction-column-sf.1.html

flex: 1 0 auto

flex 是什么意思呢？是 flex-grow （放大）、flex-shrink （缩小）、flex-basis（基准大小） 的缩写。

那咱们能够考虑用 section 撑开，而后内容垂直居中便可。

注意看这个方案和上一个方案的背景色就能看出差异，可是一样不太好操做。

测试地址：https://www.lilnong.top/static/html/flex-direction-column-sf.2.html

flex: 1 + 空白块

基于上面的方案，咱们知道 flex 能够自动放大和缩小，那么咱们用他来作空白区域不就 OK 了？

地址： https://www.lilnong.top/static/html/flex-direction-column-sf.3.html

若是为了让下面的空白区域更大，咱们能够给 flex-grow: 3; 更大的缩放区域

其余方案

1. section 保留安全区域(min-height)，上下padding。头尾absolute。
2. 绝对定位，容易被覆盖。

还有什么方案呢？

微信公众号：前端linong

欢迎你们关注个人公众号。有疑问也能够加个人微信前端交流群。