{"path":"242256","ref":"Flexbox简介.md","title":"Flexbox简介","content":"# Flexbox时代已经到来\n\n为何说Flexbox时代已经到来呢？\n\n我们可以想想，在之前传统的布局过程中，我们是基于盒模型基于浮动或者定位来布局，那这些布局的缺陷就是调试麻烦，针对一些特殊布局不容易实现，像比较经典的垂直居。那我们所说的网页布局也是我们CSS的重点应用。\n\n![](https:\/\/box.kancloud.cn\/086ef529ca70620ce68d6dcf07441ec0_403x352.png)\n\n在2009年，W3C提出了一种新的解决方案，就是Flex布局，可以简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持，所以现在我们可以放心大胆的来使用。可以看下这是[caniuse](http:\/\/caniuse.com\/#search=flexbox)上的查询结果：\n ![](https:\/\/box.kancloud.cn\/427f6cb2e4057d8994f76230e2959e07_668x574.png)\n \n那未来的布局，不论是移动端还是PC端，Flex布局将成为主流。\n![](https:\/\/box.kancloud.cn\/1d8827c335c3b488c1176657ce1dbbd3_700x368.png)\n\n以下是Flexbox相关的一些素材，可以学习的时候作为参考：\n* [Specification](http:\/\/www.w3.org\/TR\/css3-flexbox\/) [w3.org]--ref\n* [Flexbox CSS generator](http:\/\/bennettfeely.com\/flexplorer\/) [bennettfeely.com] --tool\n* [A Complete Guide to Flexbox](http:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/) [css-tricks.com]--info\n* [Examples on how to solve common layout problems with flexbox](http:\/\/philipwalton.github.io\/solved-by-flexbox\/)  [philipwalton.github.io] --info\n* [Flexbox playground and code generator](http:\/\/the-echoplex.net\/flexyboxes\/)[the-echoplex.net]--tool\n让我们一起领略Flexbox的魅力吧~~\n"}