乐趣区

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

一般来说布局咱们都是 程度布局,最多搞个垂直居中。而且对于一些 float、position 如同自身就不太适宜垂直布局。

正好前段时间用 weex 做了一个页面,weex 天生基于 flex。且 weex 中 flex-direction 默认值为 columnflex-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

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

退出移动版