[移动web]弹性布局(一.旧版)

概述: 弹性布局

• 2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本box、新版本flex以及混合过渡版本flexbox三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局

一.旧版兼容情况

旧版弹性布局.png

二.旧版父容器相关属性

• 旧版本的弹性布局有两个属性值：

  display: box;  : 将容器盒模型作为块级弹性伸缩盒显示
  display: inline-box;  : 将容器盒模型作为内联级弹性伸缩盒显示

• box-orient: 设置box内部item的流动方向。

horizontal ： items从左到右水平排列
vertical ：   items从上到下垂直排列
inline-axis ：items沿着内联轴排列显示(同horizontal)
block-axis ： items沿着块轴排列显示(同vertical)

• box-direction: 设置box中的item流动顺序。

normal(默认) :从左向右
reverse: 从右向左

• box-pack 设置box中水平方向的item分布方式(靠左/右, 居中, 平均分布)

start   :  items以起始点靠齐(左对齐)
  end  :  items以结束点靠齐(右对齐)
center:  items以中心点靠齐(居中)
justify :  item平均分布

• box-align 设置box中垂直方向的item的对齐方式。

     start  ： items 在box顶部对齐
     end    ： items 在box底部对齐
   center ： items 全部垂直居中
baseline ： items中的文字全部垂直对齐,对应的item跟随变化位置
stretch  ： 默认值,效果与start类似

三.旧版item相关属性

• box-flex: 属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的，它们会基于父容器的宽度来分配它们所占的比例：

取值0代表不拉伸 ;取值相等代表等比拉伸,取值越大;拉伸优先级越大
实现原理(了解): 
以水平方向分布为例, 
设box中原先分布的items在水平方向上剩余的总空间为: sum, 
而每个item对应的宽为:item.._w, 
box-flex属性= item.._bf
则分配拉伸时, 
item0的从原先的宽度 item0_w 
变为 item0_w + (sum/(item..bf 累加值) * item0_bf)

• box-ordinal-group: 设置伸缩项目的显示位置。

显示位置优先级,越小越靠前,取值是正整数

效果详情见demo