<h1 id="nav_point_180">第11章 flexbox布局</h1> <p class="zw">学习CSS页面布局哪家强？无数教程帮你忙！我立刻能想起来就有Rob Chandanais的Blue Robot Layout Reservoir（“蓝色机器人教程”）、Eric Costello的CSS Layout Techniques（“CSS布局技巧教程”），等等。</p> <p class="zw">今天很难想象，当初这些教程教授的技术是多么的有新意，以及定位布局是多么的不靠谱。通过这些教程回顾历史，我们可以去一窥CSS带来的无限可能。浮动布局技术作为网站排版的第一选择离我们的时间并不远，差不多在最近15年的时间里，有无数的网站采用了<code>float</code>技术来实现网站布局。</p> <p class="图"><img alt="1101.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/77.jpg" style="width: 1314px" width="1314"></p> <p class="图题">蓝色机器人教程，曾是最重要Web布局教程网站之一。如今它已成为过去，用户只能通过搜索快照来访问它，这让人有些感伤。</p> <p class="zw">所有在浮动布局的大坑里挣扎过的人都知道，它从来不是一款理想的布局工具，它经常被浏览器bug以及盒模型问题所困扰。让我们难以忘怀的，还有清除浮动等。浮动成为了一个不完美的标准，而总有人试图在日益复杂的响应式布局中试图改造它，让其成为一款称手的布局工具时，但这只会带来更加糟糕的结果。</p> <p class="zw">当flexbox布局或者flexbox标准刚刚出现的时候，它们并不是很稳定，所以本书第一版中并未涉及此方面的内容。但是事情其实从那时候开始就发生了变化。</p> <p class="zw">现在浏览器不仅仅支持flexbox，而且所有的现代桌面和移动浏览器中，这个特性都是稳定可依赖的，而flexbox也获得了设计师和开发者的注意与想象发挥。</p> <p class="zw">相较于老套的布局方式，使用flexbox将会让你得到巨大的实惠。它是一款次世代布局工具，而且支持更多的响应式布局，并且无需对于标记处理就可以重排内容版式，同时也解决了背景高度相同而列高不同等类似的问题。</p> <p class="zw">此时此刻，我并不是在与你讨论是否要使用flexbox，你应该使用它。除非你还在为IE9和10提供访问服务，否则真的没有什么理由拒绝在网站和APP上使用flexbox布局。</p>
