> 出处:[阮一峰的博客](http://www.ruanyifeng.com/blog/) 网页布局(layout)是CSS的一个重点应用。 ![](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif) 布局的传统解决方案,基于[盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model),依赖 [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)属性 + [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便,比如,[垂直居中](https://css-tricks.com/centering-css-complete-guide/)就不容易实现。 ![](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png) 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 ![](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg) Flex布局将成为未来布局的首选方案。本文介绍它的语法,[下一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章:[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)。> 作者:阮一峰