Android4.4以下版本webview 不支持css3 flex布局

可以使用display:-webkit-box布局来替代flex布局

文章来自：http://www.cnblogs.com/frankwong/p/4603141.html

一，-webkit-box属性讲解

box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

用于父元素的样式

属性 释义 display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代） box-orient: horizontal/vertical/inherit; 该属性定义父元素的子元素是如何排列的。 box-pack: start/end/center/justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式–垂直排列时–定宽） box-align: start/end/center/baseline/stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式–水平排列时–定高）

用于子元素的样式

属性 释义 box－flex: 0/任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

二，使用举例

1，让.parent也水平居中的话，再复用一次box属性即可；child-one占了1/6；child-two占了2/6; child-three占了3/6;

html代码

<style>          *{             margin: 0;             padding: 0;          }          .parent{              width: 500px;              height: 200px;              display: -webkit-box;             -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */         }         .child-one{             background: lightblue;             -webkit-box-flex: 1;         }         .child-two{             background: lightgray;             -webkit-box-flex: 2;         }         .child-three{             background: lightgreen;             -webkit-box-flex: 3;         }     </style> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">     <div class="parent">         <div class="child-one">1</div>         <div class="child-two">2</div>         <div class="child-three">3</div>     </div> </div>

2，父容器的宽度500px减去设置了子容器的150px基础上再减去（100px＋2×15px），这剩下的宽度值则按box-flex设置的值进行划分；

<style>        *{            margin: 0;            padding: 0;        }        .parent{            width: 500px;            height: 200px;            display: -webkit-box;            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            /* 加了固定高度和边距 */            width: 150px;            margin: 0 15px;        }    </style><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3;width:150px;</div>    </div></div>

3，竖向排列跟横向排列，在原理上，并没有什么区别；

<style>        *{            margin: 0;            padding: 0;        }        .parent{            width: 400px;            height: 600px;            display: -webkit-box;            -webkit-box-orient: vertical;/* 竖向排列 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            /* 加了固定的高度和边距 */            height: 200px;            margin: 15px 0;        }    </style><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3</div>    </div></div>

4，在水平方向上排列时，box-align:center;定义了垂直方向的居中；

<style>        *{            margin: 0;            padding: 0;        }        .parent{            width: 400px;            height: 200px;            display: -webkit-box;            -webkit-box-orient: horizontal;            -webkit-box-align: center; /* 水平 对应 box-align */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;            height: 100px;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;            height: 110px;        }        .child-three{            background: lightgreen;            -webkit-box-flex: 3;            height: 120px;        }    </style><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">    <div class="parent">        <div class="child-one">height: 100px;</div>        <div class="child-two">height: 110px;</div>        <div class="child-three">height: 130px;</div>    </div></div>