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;}