• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 7天前 18次浏览

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

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

正好前段时间用 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

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

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; 每个空白区域一样大

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

看上去是实现了,但是如果我们还希望微调位置,那么就很难搞(变大,然后设置 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(基准大小) 的缩写。
基于 Flex 实现两端对齐垂直布局

那我们可以考虑用 section 撑开,然后内容垂直居中即可。

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

注意看这个方案和上一个方案的背景色就能看出差别,但是同样不太好操作。

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

flex: 1 + 空白块

基于上面的方案,我们知道 flex 可以自动放大和缩小,那么我们用他来做空白区域不就 OK 了?

基于 Flex 实现两端对齐垂直布局
地址: https://www.lilnong.top/static/html/flex-direction-column-sf.3.html

如果为了让下面的空白区域更大,我们可以给 flex-grow: 3; 更大的缩放区域
基于 Flex 实现两端对齐垂直布局

其他方案

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

还有什么方案呢?

微信公众号:前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。

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


喜欢 (0)