css之flexbox

移动端部分浏览器对于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 {  overflow :  hidden ; } #L-box {  height :  100% ;  display : -webkit-box; -webkit-box-orient:vertical; } .L-header {  background :  #fc0 ;  height :  50px ;  line-height :  50px ;} .L-content { -webkit-box-flex:  1 ;  background :  #f1f1f1 ;  overflow :  auto ;} .L-footer {  background :  #fc0 ;  height :  50px ;  text-align :  center ;  line-height :  50px ; }

具体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 {  height :  58px ;  margin :  20px  20px  0 ;  border :  1px  solid  #000 ; } #container ul {  height :  58px ;  display : -webkit-box; } #container ul li { -webkit-box-flex:  1 ;  text-align :  center ;  line-height :  58px ;      border-right :  1px  solid  #000 ;} #container ul li:last-child {  border-right :  0  none ; }

流体布局demo：传送门

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