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结构

2）css设置

具体demo地址：

三栏布局

两栏布局

demo代码详解：

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

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

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

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

在绝对定位元素上的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结构

2）CSS设置

流体布局demo：传送门

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