第11章 flexbox布局

学习CSS页面布局哪家强?无数教程帮你忙!我立刻能想起来就有Rob Chandanais的Blue Robot Layout Reservoir(“蓝色机器人教程”)、Eric Costello的CSS Layout Techniques(“CSS布局技巧教程”),等等。

今天很难想象,当初这些教程教授的技术是多么的有新意,以及定位布局是多么的不靠谱。通过这些教程回顾历史,我们可以去一窥CSS带来的无限可能。浮动布局技术作为网站排版的第一选择离我们的时间并不远,差不多在最近15年的时间里,有无数的网站采用了float技术来实现网站布局。

1101.tif

蓝色机器人教程,曾是最重要Web布局教程网站之一。如今它已成为过去,用户只能通过搜索快照来访问它,这让人有些感伤。

所有在浮动布局的大坑里挣扎过的人都知道,它从来不是一款理想的布局工具,它经常被浏览器bug以及盒模型问题所困扰。让我们难以忘怀的,还有清除浮动等。浮动成为了一个不完美的标准,而总有人试图在日益复杂的响应式布局中试图改造它,让其成为一款称手的布局工具时,但这只会带来更加糟糕的结果。

当flexbox布局或者flexbox标准刚刚出现的时候,它们并不是很稳定,所以本书第一版中并未涉及此方面的内容。但是事情其实从那时候开始就发生了变化。

现在浏览器不仅仅支持flexbox,而且所有的现代桌面和移动浏览器中,这个特性都是稳定可依赖的,而flexbox也获得了设计师和开发者的注意与想象发挥。

相较于老套的布局方式,使用flexbox将会让你得到巨大的实惠。它是一款次世代布局工具,而且支持更多的响应式布局,并且无需对于标记处理就可以重排内容版式,同时也解决了背景高度相同而列高不同等类似的问题。

此时此刻,我并不是在与你讨论是否要使用flexbox,你应该使用它。除非你还在为IE9和10提供访问服务,否则真的没有什么理由拒绝在网站和APP上使用flexbox布局。