css3-弹性盒模型

1.Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
例题：中间宽度固定，两侧宽度自适应：

.box div:nth-of-type(1){ -webkit-box-flex:1;}.box div:nth-of-type(2){ -webkit-box-flex:400px;}.box div:nth-of-type(3){ -webkit-box-flex:1;}

中间自适应屏幕，两侧固定宽度：

.box div:nth-of-type(1){ -webkit-box-flex:400px;}.box div:nth-of-type(2){ -webkit-box-flex:1;}.box div:nth-of-type(3){ -webkit-box-flex:400px;}或者.box div:nth-of-type(1){ width:400px; float:left;}.box div:nth-of-type(2){ float:left;}.box div:nth-of-type(3){ width:400px; float:left;}

一个未知宽高的块元素水平垂直居中：
方法一：

table：table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}.test {background:red; display:inline-block;}<table>    <tr>        <td>            <div class="test">            水平垂直居中了吧<br>            两行文字哦            </div>        </td>    </tr></table>

方法二：

.test {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}//css3里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();

方法三：

.a{     position:absolute;     width:100px;     height:100px;     top:0;     left:0;     bottom:0;     right:0;     margin:auto;    }

方法四：

弹性盒模型：.flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}.flex-hc {  -webkit-box-pack:center;             -ms-justify-content:center;             -webkit-justify-content:center;             justify-content:center;}.flex-vc {  -webkit-box-align:center;             -ms-align-items:center;            -webkit-align-items:center;             align-items:center;}.wrap {position:fixed; width:100%; height:100%; left:0px; top:0px;}.test{ width: 100px; height: 100px; background: red;}