文章目录

1. 1. 弹性盒子概况
2. 2. 强大的老爹
3. 3. 其他
4. 4. 参考
5. 5. 扩展阅读

移动端开发接触不多，所以弹性盒子是听的很多，但实际用的很少。这次难得开发移动端那就强迫自己用下喽，抓住工作计划多接触点新东西。之前吧：
1.工作之余实战编码情况几乎没有。【这点正在转变中，重新计划时间分配】
2.对新知识不那么渴求，比如能用老方法去搞定的（浮动|定位），一般不会去主动尝试新概念（弹性盒子）。
   这是思维方式的问题，一时半会不好改。【但目前在计划把小点搞懂些，先慢慢爱上自己熟悉的，在等热情之火燎技术之原】

流体布局控

说明：此文重点阐述弹性盒子的理论，代码并没有考虑最新标准写法及浏览器兼容等方面。

弹性盒子概况

CSS3中新的盒子模型：弹性盒子模型（Flexible Box Model）

弹性盒子能干嘛？
1.按份分，自适应父容器 box-flex：1-1-1，1-2-1，1-2-3（至少是1的整数）
2.有要固定宽的 width:100px; 即优先子的width，剩余的再按比例flex
3.垂直|水平对齐
4.留白

鑫空间[1]里举了个分房子的例子，概念上通俗易懂，如下：
box-flex：分配房子，子按比例分配父标签的宽度|高度空间
box-flex的属性 即如何分配，分配比例

不论孩子们争得有多high…凡事，凡事都得有个首先。。。首先，亲爹得开金口：房子，你们自己分吧！

/*在此声明下，子元素的行为和表现 和 CSS2中的传统盒子模型的表现 有显著差异*/
#father {
  display:box;  /*弹性盒子模型的声明*/
}

强大的老爹

不管孩子们怎么折腾，父还是很牛掰的，可以做很多事情。如下：
1.box-orient: horizontal|vertical 决定子元素的方向，横排|竖排
2.box-direction: normal|reverse 决定子元素的排列顺序（normal是：左->右 上->下）

3.box-align: start|end|center|baseline（文字的）|stretch（拉伸-等高布局不再愁） 决定垂直方向上的空间利用，即垂直方向的对齐
   相当于CSS2的 vertical-align
4.box-pack: start|end|center|justify（两端对齐） 决定水平方向上的空间利用，即水平方向的对齐
   相当于CSS2的 text-align:left|right|center|justify 【start更概况，是因为box还能玩倒序】

5.box-lines 决定子元素是否可以换行（支持性待测）
   不过，一般情况下用弹性盒子就是为一行方便的。多行的话 用浮动更直观吧~感觉

对比之下，再看子元素，瞬间清晰多了。孩子的属性：
1.width
2.box-flex
3.box-ordinal-group：拉帮结派，值越小-位置越靠前
4.box-flex-group

其他

CSS2.1中的4种布局模式：盒模型，块布局 + 行内布局 + 表格布局 + 定位布局
CSS3引入了新的布局模式：弹性布局，即这里的弹性盒子，很方便的自适应浏览器窗口的流动布局。

参考

CSS box-flex属性，然后弹性盒子模型简介 源自鑫空间。举例通俗易懂 房子-分配；里面也有各个属性的demo，很直观
弹性盒子模型 源自Sunny_lyy。flex的新旧版写法、浏览器兼容写法；各属性值

扩展阅读

http://css-tricks.com/old-flexbox-and-new-flexbox/
http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-direction.html