flex弹性布局

垂直局中有时候实现起来是比较费力的一件事

但是通过flex布局我们却可以轻松的实现

参考地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

随着旧版浏览器的抛弃，flex布局很有可能成为未来布局的首选方案

因为他得到了所有浏览器的支持，并且，可以边间、完整、响应式地实现各种页面布局。

参考这个http://www.w3school.com.cn/tiy/t.asp?f=css3_box-flex地址的例子话觉得很像栅栏布局，还是xx但是这个却不再需要float与清除浮动了。

进一步的补充的是，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

虽然在pc端对于浏览器的限制是很多的但是在移动端我们已经可以毫无顾虑的使用这些中的很大一部分了

参考http://www.w3school.com.cn/cssref

1.box-align和box-pack

目前没有浏览器支持box-align属性。Firefox支持替代的-moz-box-align属性；Safari、Opera支持替代的-webkit-box-align属性。

js语法： object.style.boxAlign="center"

实现垂直水平居中的样式

{

/* Firefox */

display:-moz-box;

-moz-box-pack:center;

-moz-box-align:center;

/* Safari, Chrome, and Opera */

display:-webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

/* W3C */

display:box;

box-pack:center;

box-align:center;

}

box-pack为对水平方向的居中

box-align:start|end|center|baseline|stretch

2.box-direciotn

目前没有浏览器支持box-direction属性，Firefox支持替代的-moz-box-direction属性；safati、Opera以及Chrome支持替代的-webkit0box-direction属性。

js语法：

 object.style.boxDirection="reverse"

{

/* Firefox */

display:-moz-box;

-moz-box-direction:reverse;

/* Safari, Opera, and Chrome */

display:-webkit-box;

-webkit-box-direction:reverse;

/* W3C */

display:box;

box-direction:reverse;

}

box-direction:normal|reverse|inherit;

3.box-flex

目前没有浏览器支持box-flex属性，Firefox支持替代的-moz-box-flex属性；safari、Opera以及支持替代的-webkit-box-flex属性。

js语法：object.style.boxFlex=2.0

div

{

display:-moz-box; /* Firefox */

display:-webkit-box; /* Safari and Chrome */

display:box;

width:300px;

border:1px solid black;

}

#p1

{

-moz-box-flex:1.0; /* Firefox */

-webkit-box-flex:1.0; /* Safari and Chrome */

box-flex:1.0;

border:1px solid red;

}

#p2

{

-moz-box-flex:2.0; /* Firefox */

-webkit-box-flex:2.0; /* Safari and Chrome */

box-flex:2.0;

border:1px solid blue;

}

box-flex:value;

3.box-flex-group

目前没有浏览器支持box-flex-group属性。

js语法：object.style.boxFlexGroup=2

box-flex-group:integer;

4.box-lines属性目前没有浏览器支持

5.box-ordinal-group

目前没有浏览器支持box-ordinal属性，Firefox支持替代的-moz-box-group属性，Safari和Chrome支持替代的-webkit-box-ordinal-group属性

js语法：object.style.boxOrdinalGroup=2

box-ordinal0group:integer;

6.box-orient

目前没有浏览器支持box-orient属性,Firefox支持替代的-moz-box-oriient属性，Safari、Opera以及Chrome支持替代的-webkit-box-orient属性。

js语法:box-orient:horizantal|vertical|inline-axis|block-axis|inherit;

7.box-pack属性

目前没有浏览器支持box-pack属性，Firefox支持替代的-moz-boxpack属性；Safari、Opera以及Chrome支持替代的-webkit-box-pack属性

js语法：object.style.boxPack="center"

box-pack:start|end|center|justify