乐趣区

关于javascript:基于-Flex-实现两端对齐垂直布局

jiezi

一般来说布局咱们都是 程度布局，最多搞个垂直居中。而且对于一些 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

欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。

退出移动版