> 出處：[阮一峰的博客](http://www.ruanyifeng.com/blog/) 網頁布局（layout）是CSS的一個重點應用。  布局的傳統解決方案，基于[盒狀模型](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/)就不容易實現。  2009年，W3C提出了一種新的方案----Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。  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)。> 作者：阮一峰