2009 年，W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

可能是最全的学习 Flexbox 的资源了，希望对大家有所帮助。

作为一名前端 “攻城狮”，实现所有需求的页面布局是最基本的技能。下面的内容，给大家介绍一些复杂的布局。

grid 布局是二维布局系统，相比 flex 更为灵活，不过现在仍处于试验功能。可以在 Chrome 中开启试验特性可以使用

作者在这篇文章中，介绍了 Flexbox 的一些新特性，并通过一个简单的例子说明了如何用 Flexbox 来构建一个新闻网站的布局。

早前自己写的文章，写它的原因是看完别人写的文章后我还是记不住怎么用，所以自己重新梳理一遍，图例还是做得挺用心的，欢迎吐槽分享

在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的 flex， 但是基本上都会支持 - webkit-box，所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的 - webkit-box。 由于 flex.css 采用了 autoprefixer 编译，所以能够保证在浏览器不支持标准 flex 布局的情况下， 回滚到旧版本的 - webkit-box，保证移动设备中能呈现出一样的布局效果。 于是，一款移动端快速布局的神器诞生了...

github 有一个项目叫 solved-by-flexbox，本系列文章是对这个项目的中文翻译， 有兴趣阅读英文的同学可以看 english version，翻译不到之处请见谅。