css之flexbox

转载 2013年12月02日 21:47:12

移动端部分浏览器对于fixed支持颇为棘手,经过亲身实践和查阅大量资料,得到以下兼容列表:


  • ios safari    --ios5+强力支持,ios4及更早版本不支持

  • android 2.1   --及更早版本不支持

  • android 2.2    --支持

  • android 2.3    --支持,需要设置页面不可缩放,即:<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0" /> 

  • android 3.0+    --支持,不需要屏蔽页面缩放

  • blackberry 5.0    --支持

  • blackberry 7.0    --支持(仅仅是在模拟器中测试)

  • blackberry Playbook (1.0.7)    --支持、存在bug(可忽略)

  • firefox mobile    --支持

  • opera mobile    --支持、存在bug

  • opera mini    --不支持

  • windows phone 7    --不支持

  • webos    --2.0+支持

  • amazon kindle fire    --android2.3类似

  • amazon kindle(netfront)    --甚至不支持字体颜色,对fixed支持很给力


由此可知,使用fixed并不能很好满足固定布局的需求,不过要做到渐进增强使用fixed依然是不错的选择,即fixed在支持浏览器中将降级为static。

 

除此之外,html5规范中新增了flexbox布局,如在webkit中的实现display: -webkit-box,规范了CSS盒模型,在flexbox布局模型里,子元素可以在任何方向(横向、纵向)上排列,它们的大小可以智能缩放以适应父元素的宽度或高度。同样也可以对其中任何一个或多个元素设置fix宽或高度,其余元素通过设置比例实现智能缩放。

 

再从需求入手,只要设置页面包裹器为flexbox且等高于浏览器视口,规定子元素排列方式为纵向(-webkit-box-orient:vertical),应用导航和底部工具栏设置固定像素,应用主体(中间部分)能自适应页面高度且可滚动即可。


代码实现如下:


1)DOM结构

1
2
3
4
5
<div id="L-box">
    <div class="L-header"></div>
    <div class="L-content" id="iscroll"></div>
    <div class="L-footer">应用工具栏<input type="tel" placeholder="测试虚拟键盘" style="width:120px;" /></div>
</div>

2)css设置

1
2
3
4
5
html , body { overflowhidden; }
#L-box { height100%display: -webkit-box; -webkit-box-orient:vertical; }
.L-header { background#fc0height50pxline-height50px;}
.L-content { -webkit-box-flex: 1background#f1f1f1overflowauto;}
.L-footer { background#fc0height50pxtext-aligncenterline-height50px; }

具体demo地址:



demo代码详解:


  • 在demo中由于要兼顾ios最大化应用界面的问题,即隐藏浏览器地址栏,添加了一小段js应用代码,建议在实际应用中继续保留,提高ios用户的使用体验

  • 应用主体部分滚动利用iscroll库实现

 

说到此处,或许有人会疑问,既然应用主体部分滚动利用iscroll实现,关于导航栏和工具栏位置固定,用absolute定位一样可以实现,事实上也是如此。不过在使用absolute定位地址栏位置时,有两个地方需要注意:


  1. 额外的js计算得出主体部分的高度

  2. 在绝对定位元素上的input在获取焦点后,移动终端的虚拟键盘经常出现诡异的问题(慎重)


因此,综合考虑多方面元素,使用flexbox布局依然是最佳实践。 



三,流体布局


1,介绍


流体布局在这里是指横向排列布局元素,兼容布局元素边框、内填充等因素,适应手机横竖屏切换和不同终端分辨率的一种页面布局方式。



图上所示功能分解:


  • 横向排列7个子元素,长度均等

  • 第一和最后子元素离视口左右边界分别为20px

  • 每个子元素包含边框

  • 适应手机横竖屏切换、不同终端分辨率


2,设计思路


分析以上功能点,其实用inline-block、float配置子元素,使之横向排列,再辅以百分比宽度即可。但由于每个元素均有外边框(一定意义上说不可设置百分比),要实现上述需求,则需在每个子元素外嵌一层dom节点,如此势必增加了设计复杂度,出于对节省代码量及dom渲染速率的考虑,这并算不得合理的设计。


对于这种百分比类表格结构,使用table是个不错的选择。table本身必须设置宽度(百分比、px均可),但在视口宽度不固定前提下,设置table宽度为px值显然是行不通,若设置百分比,则对于需求第二点(左右边界20px),又有点黔驴技穷。不过在此基础上稍作变通亦可,即在table外嵌一层block元素如div,设置div的左右边距20px,再次设定table宽度为100%即可。这种做法,先不考虑多嵌套一层包裹器,单就table本身而言,并不符合w3c新的规范,同时即使用它也略显老土了。


除此之外,在讲述固定布局时,曾提到flexbox布局,可满足在任意方向上排列子元素并使之适应父元素宽高,这无疑是实现此种布局的利器。


实现代码如下:


1)DOM结构

1
2
3
4
5
6
7
8
9
10
11
<section id="container">
     <ul>
         <li>31</li>
         <li>32</li>
         <li>33</li>
         <li>34</li>
         <li>35</li>
         <li>36</li>
         <li>37</li>
     </ul>
</section>

2)CSS设置

1
2
3
4
#container { height58pxmargin20px 20px 0border1px solid #000; }
#container ul { height58pxdisplay: -webkit-box; }
#container ul li { -webkit-box-flex: 1text-aligncenterline-height58px;     border-right1px solid #000;}
#container ul li:last-child { border-right0 none; }

流体布局demo:传送门


小结:flexbox的强大之处,不在于可对布局元素按比例分配宽高,而在于重新定义CSS盒模型,在使用百分比的同时,可以兼容边框、内填充等因素。

Flexbox in CSS epub

  • 2017年10月05日 16:57
  • 4.83MB
  • 下载

Flexbox.in.CSS.2017.5.pdf

  • 2017年09月28日 09:04
  • 14.13MB
  • 下载

使用CSS3 Flexbox布局

本文由大漠根据Helen Emerson的《Using the CSS3 flexbox layout》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文...

Flexbox in CSS 无水印pdf

  • 2017年10月06日 17:37
  • 14.13MB
  • 下载

Flexbox in CSS azw3

  • 2017年10月05日 16:55
  • 6.13MB
  • 下载

css3 flexbox layout(弹性布局)完全解析

参考文章:flexbox 完全指导w3c规范一、背景​ Flextbox Layout(弹性盒布局或伸缩盒布局),提供了一种更加有效的方式去布局、对齐和给容器中的子元素分配空间,即使他们的尺寸未知...

详解CSS3弹性盒模型---Flexbox

详解CSS3弹性盒模型---Flexbox
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css之flexbox
举报原因:
原因补充:

(最多只允许输入30个字)