flex:1

在H5+CSS3的开发中，我们经常会实用弹性布局来进行页面的布局。
在谷歌内核的浏览器中的代码示例：
display: -webkit-box;
-webkit-box-flex: 1;

经常使用到的该属性常用为两种情况：
1、子元素之间的等比例空间分配；
2、子元素所占剩余空间分配；

此博文只分析第二种剩余空间分配的情况，一种是水平剩余空间，一种是垂直剩余空间；
css3中关于"flex:1"的"占满"布局的分析

此页面中，下方黄色div占据了除了红绿色部分以外的所有剩余空间；

红黄绿部分父级div 所使用的css为
display: -webkit-box;
height: 600px;
width: 400px;
-webkit-box-orient:vertical;

黄色部分div 所使用的css为
display: -webkit-box;
-webkit-box-flex: 1;
background: yellow;

注意：此时红绿色部分高度是固定的，想要元素占据剩余页面所有的空间，仅仅使用flex：1;是无效的，必须加上display:-webkit-box;以及-webkit-box-orient:vertical;
display:-webkit-box;默认子元素排列为水平排列;
因此垂直，则必须使用-webkit-box-orient:vertical;

否则，效果如下图：

css3中关于"flex:1"的"占满"布局的分析

水平剩余空间和垂直类似
-webkit-box-orient:horizontal;
或者不适用orient 属性，使子元素默认排列
如下图所示：
左边红色块占用的空间，右侧宽度固定
代码为：
.box1{
display: -webkit-box;
-webkit-box-flex: 1;
background: red;
}
.box2{
display: -webkit-box;
width: 100px;
background: green;
}
css3中关于"flex:1"的"占满"布局的分析

下图为左右1：1等比分配
.box1{
display: -webkit-box;
-webkit-box-flex: 1;
background: red;
}
.box2{
display: -webkit-box;
-webkit-box-flex: 1;
background: green;
}
css3中关于"flex:1"的"占满"布局的分析

注意：此情况只适用于内容长度一致，
如果内容长度不一致，两个div要设置一样的任意宽度–如：width:1px;