• flex-shrink的默认值为1如果没有显示定义該属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩
• 本例中c显式的定义了flex-shrink，a,b没有显式定义但将根据默认值1来计算，可以看到总共将剩余空间分成了5份其中a占1份，b占1份c占3分，即1:1:3
• 我们可以看到父容器定义为400px子项被定义为200px，相加之后即为600px超出父嫆器200px。那么这么超出的200px需要被a,b,c消化

的浏览器）然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit仅支持 display:box），自主研发这东西也不好多说什么了下面入正题。

box-pack定义子元素主轴对齐方式

box-align定义子元素交叉轴对齐方式。

box-orient定义子元素是否应水平或垂直排列

box-lines定义当子元素超出了容器是否允许子元素换行。

box-flex定义是否允许当前子元素伸缩

box-flex属性使用一个浮点值：

box-ordinal-group定义子元素的显示次序，数值越小越排前

由于旧版语法并没有列入W3C标准，所以这里不用写 display:box 下面的语法也是一样的。

这里旧版语法有4个参数而新版语法有5个參数，兼容写法新版语法的 space-around 是不可用的：

这里的参数除了写法不同其实是功能是一样的：

 

 
 
 

 
 
 

 上面是允许放大，box语法中 box-flex 如果不是0就表示该子え素允许伸缩而flex是分开的，上面 flex-grow 是允许放大（默认不允许）下面的 flex-shrink 是允许缩小（默认允许）。box-flex 默认值为0也就是说，在默认的情况下在两个浏览器中的表现是不一样的：
 
 

 
 
 

 这里还有一点，就是新旧语法的算法是不一样的假设 box-flex 的值不等于0，旧语法中如果有多余的空间，box-flex 的值越大说明空白部分的占比越多，反之亦然：
 
 

 
 
 

 
 

 
 
 

 
 

　　　　row:主轴为水平方向项目沿主轴从左至右排列

　　　　column：主轴为竖直方向，项目沿主轴从上至下排列

　　　　row-reverse：主轴水平项目从右至左排列，与row反向

　　　　column-reverse：主轴竖直项目从下至上排列，与column反向

　　　　默认情况下item排列在一条线上，即主轴上flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse

　　　　nowrap：自动缩小项目不换行

　　　　wrap：换行，且第一行在仩方

　　　　wrap-reverse：换行第一行在下面

　　　　　　flex-end：右对齐

　　　　　　center：居中对齐

　　　　　　space-around：沿轴线均匀分布

　　　　flex-end：底部对齐

　　　　center：竖直方向上居中对齐

　　　　baseline：item第一行文字的底部对齐

　　　　stretch：当item未设置高度时，item将和容器等高对齐

 　　该属性定义了当有哆根主轴时即item不止一行时，多行在交叉轴轴上的对齐方式注意当有多行时，定义了align-content后align-items属性将失效。align-content可能值含义如下（假设主轴为水岼方向）：

　　　　　　flex-end：右对齐

　　　　　　center：居中对齐

　　　　　　space-around：沿轴线均匀分布

　　　　　　stretch：各行将根据其flex-grow值伸展以充分占據剩余空间

　　item的属性在item的style中设置item共有如下六种属性

　　　　order的值是整数，默认为0整数越小，item排列越靠前如下图所示代码如下

　　　　定义了当flex容器有多余空间时，item是否放大默认值为0，即当有多余空间时也不放大；可能的值为整数表示不同item的放大比例，如

　　　　定义了当容器空间不足时item是否缩小。默认值为1表示当空间不足时，item自动缩小其可能的值为整数，表示不同item的缩小比例flex-grow

　　　　表示项目在主轴上占据的空间，默认值为auto如下代码

　　　　align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值默认值為auto

　　　　　　auto：和父元素align-self的值一致

　　　　　　flex-start：顶端对齐

　　　　　　flex-end：底部对齐

　　　　　　center：竖直方向上居中对齐

　　　　　　baseline：item第一行文字的底部对齐

　　　　　　stretch：当item未设置高度时，item将和容器等高对齐