flex布局注意点：

1.父元素display:flex之后成为伸缩容器，子元素（除了position:absolute或fixed）无论是display:block或者display:inline，都成为了伸缩项目。
2.可以固定一个伸缩项目的宽度，另一个伸缩项目自适应。
3.伸缩项目之间的空白自适应。
4.可以很方便进行水平和垂直方向的，居左，居中，居右，两边对齐等效果。
5.android浏览器4.4之前对于flex布局支持不好。
6.伸缩项目之间，没有inline-block元素之间的空隙。
7.伸缩项目自动box-sizing:border-box。

 

参考链接：

http://www.w3.org/html/ig/zh/css-flex-1/

http://www.w3cplus.com/blog/666.html

http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html