flex弹性布局需要现代浏览器才能支持,但是在当下我们很大一部分电脑页面还是需要考虑IE8,IE9浏览器,所以出于浏览器的兼容性问题,在电脑端使用flex,或者老一点的box-flex弹性布局的新旧规范有些让人瞻前顾后,展不开手脚。除非你的公司特强强势,或者你的老板说了,我们不管IE,这个时候你才能大胆使用flex弹性布局。但是flex弹性布局确实可以简化我们的布局,让我们布局更加省时,更加高效,可以抛弃很多JS对布局的计算。
其实呢,css的奥秘非常多,只要你能钻研,就可以发现,早先的CSS2的属性就可以供我们实现一些简陋的flex布局模式。之前在float的讲解中,我们介绍了使用float实现纯粹的横向flex布局模拟,如果你不清楚,可以连接过去查看:float实现flex弹性布局模拟。
今天,我们就absolute的技巧应用,来实现不完全的纵向flex弹性布局模拟。
我们根据代码效果来讲解,好理解些
<div class="absflex_cont"> </div> <style> .absflex_cont{ border:1px solid #bababa; position:fixed; z-index: 2; right:0; bottom:0; top:0; width:360px; background:#0632B0; } </style>
效果如上。css样式中,fixed的和absolute有一样的特性,我们并没有给这个div设置高度,而是通过:top:0;bottom:0;来设置div的高度。这个好理解,就是说这个div上顶着天,下踩着地,那就是百分百的高度了。
<div class="absflex_cont"> <div class="absflex_top"> 妹纸前端侧边栏 </div> <div class="absflex"> <ul> <li>mooshine</li> <li>妹纸前端</li> <li>妹子前端</li> <li>absolute纵向布局</li> <li>flex弹性布局</li> <li>mooshine</li> <li>妹纸前端</li> <li>妹子前端</li> <li>absolute纵向布局</li> <li>flex弹性布局</li> <li>mooshine</li> <li>妹纸前端</li> <li>妹子前端</li> <li>absolute纵向布局</li> <li>flex弹性布局</li> <li>flex弹性布局</li> <li>mooshine</li> <li>妹纸前端</li> <li>妹子前端</li> <li>absolute纵向布局</li> <li>flex弹性布局</li> </ul> </div> <div class="absflex_bottom"> <a href="javascript:;" class="absflex_btn">取消</a><a href="javascript:;" class="absflex_btn">确定</a> </div> </div> <style> .absflex_cont{ border:1px solid #bababa; position:fixed; z-index: 2; right:0; bottom:0; top:0; width:360px; background:#0632B0; } .absflex_top{ line-height:42px; text-indent:2em; font-size:15px; background:#E88A03; color:#fff; } .absflex_bottom{ line-height:80px; background:#07A725; text-align:right; box-sizing:border-box; padding-right: 12px; position: absolute; left:0; right:0; bottom:0; } .absflex_btn{ display: inline-block; font-size: 13px; font-weight:bold; line-height:36px; padding:0 1.3em; background:#1D78B7; color:#fff; text-decoration: none;; } .absflex_btn:active{ color:#0C5486; } .absflex_btn + .absflex_btn{ margin-left:8px; } .absflex{ position:absolute; left:0; right:0; top:42px; bottom:80px; overflow-y:auto; } .absflex ul{ margin:0; padding:0; list-style: none; } .absflex ul li{ font-size:13px; color:#ffffff; line-height:32px; text-indent:1em; border-bottom: 1px solid #ffffff; } .absflex ul li + li{ margin-top:12px; } </style>
效果如下:
效果如上,代码的主要部分就是absflex的top:42px;bottom:80px;通过top,bottom联合定位使用,就可以确定absflex div的自适应高度,它比flex差的就是,top,bottom是定值,所以说是不完善的flex纵向布局。
absflex_bottom通过left:0;right:0;实现width:100%的效果。
最后给个demo,体验一下这种absolute互斥定位实现的不完善flex布局:absolute同时设置top,bottom实现不完善flex布局。
上面代码中我们还使用了“+”相邻元素选择器,对于相邻元素选择器不熟悉的可以连接过去学习一下:css + 相邻元素选择器。
虽然我们通过absolute同时设置top,bottom实现的flex纵向弹性布局不是十分完善,但是呢,它在一定程度上有了纵向部分自适应高度的能力,还是可以简化我们很多布局的,掌握这个技能对于CSS布局的提高还是十分有好处的。