CSS3 弹性盒布局总结（一）

一、css3弹性盒是什么？

       一种提供响应式布局的解决方案，与传统的CSS2盒模型在子元素表现上有很大不同。具体不同是在盒子会自动随着外部元素的宽度或者设备宽度不同而动态分配宽度。

二、布局结构：父元素+n个子元素

        父元素以box-开头的相关属性：

1. display:flex   声明弹性盒布局

2.    box-orient（horizontal|vertical）声明内部子元素的排列方向

3. box-lines(single|multiple)  子元素布局是否自动换行   chrome firfox 暂不支持multiple

4. box-pack(start|center|end|justify)   相对子元素之间的水平排列方式，可以想象ps里的图层水平居中的功能，justify 为两端对齐

5. box-align(start|center|end|baseline|stretch)  相对子元素之间的垂直排列方式，也可以想象 css2 里的vertical-align  属性，方便记忆 ；baseline 以英文字母o,m,n底边位置线为准

   stretch 默认值，拉伸子元素以填充父块元素。

子元素属性：

1. box-flex: 0.0（默认值）   子元素的可伸缩的相对比例   目前没有浏览器支持box-flex,即 chrome,safari 要使用-webkit-前缀，Firefox 要使用-moz-前缀。

2. box-ordinal-group：value（正整数） 子元素之间的显示方式，数值小的排前面，数值大的排后面

3. box-flex-group  目前暂未有浏览器支持

父与子元素除了上述属性，还有其他重要的属性，详见part two

参考博文：张旭鑫博客