第一章：介绍flexbox
如果你想构建一个响应式网站，你真的需要了解flexbox。
什么是Flexbox？
Flexbox是CSS3弹性盒布局模型（ CSS3 flexible box layout module ）的通称。这个模型定义了一种新的布局模式（ layout mode ）。你可能会问，什么是布局模式？
布局模式是一套规则，这套规则决定了网页元素（ web elements ）的大小（ size ）和位置（ position ），这套规则也基于它们和兄弟、祖先元素的关系。
【 A layout mode is a set of rules that determine the size and position of web elements, based on their relationships with siblings and ancestors. 】
布局模式有如下几种类型：
- block ：为放置文档（ documents ）而设计
- inline ：为放置文本（ text ）而设计
- table ：为放置表格（ tables ）而设计
- positioned ：Designed for positioning elements independent of other elements
- flex ；Designed for laying out web components that can be resized smoothly
下图显示了一个网页（ web page ）动态改变布局以适应不同屏幕的分辨率
当是小屏幕时，一行只能显示一列，当是大屏幕时，一行能显示三列的内容。一个网页设计师可以合理地使用任何布局模式来达到上图的变化——小屏幕一列大屏幕三列，但机智的设计师会使用flexbox。
为什么要使用flexbox?
使用flexbox最主要的原因是：使用flexbox可以让复杂的布局变得简单。举例来说，使用 flexbox 可以很容易：
① 垂直对齐父元素里面的内容
【 Align content vertically within a parent element 】
② 基于网格布局创建等高的列
【 Create equal-height columns for grid-based layouts 】
③ 在不同的设备和屏幕分辨率下对内容进行重新排序
【 Reorder content for different screen resolutions and different devices 】
上面这几件事情通过其他的布局模式再加上传统的css也能做到，但是它们需要float，好的JavaScript功底（ fancy javascript ），或者 clever hacks。
相比之下，flexbox才是真的页面（ page ）布局工具。设计师只需几行代码就能不费力的构建复杂的布局，no floats, no workarounds, and no hacks 。
NOTE
For a good description of common design problems that were once hard or impossible to solve with CSS alone, visit https://philipwalton.github.io/solved-by-flexbox/.
Philip Walton shows (with code) how each problem is now “trivially easy” to solve with flexbox
flexbox和响应式web设计
flexbox对响应式web设计来说特别有用。当你在构建一个响应式网站时，你其实是建立了这样一个站点，这个站点能自动适应当前的设备。当在手机上时它会收缩以适应小屏幕，当在桌面等设备上上它会扩展以适应大屏幕。
【 When you build a responsive website, you build a site that adapts itself to the device on which it is displayed. It shrinks to fit the small screen of a smart phone and expands to fill the large screen of a desktop monitor. 】
使用 flexbox，网页上的零件可以被：
【 With flexbox, components on a web page can be made to: 】
① 随着浏览器的viewport变大而扩展开来
② 随着viewport的变小而收缩
③ 无视viewport的行为（ behavior ），保持相同的大小。
这种布局控制（ layout control ）的程度（ degree ）对表现（ performance ）没有损耗。这儿没有附加的框架去争夺珍贵的资源降低性能。一切都是靠简单的css完成，通过flexbox 布局模式。而且响应快如闪电。
【 There are no add-on frameworks to compete for precious resources and slow things down. 】
flexbox 的挑战
http://caniuse.com/#search=flex.
flexbox面临的主要挑战来源于外部——当前浏览器的支持程度而不是内部——flexbox本身非常容易学习。一方面我们想发挥 flexbox 炫酷的布局能力，另一方面，我们希望网站在所有的浏览器上功能完整。
【 On the other hand, we want websites to be fully functional on all browsers 】
这里有个底线：如果你只支持现代浏览器你可以毫无顾忌的现在就使用flexbox，如果你还需要支持老的浏览器，你需要采用下面一个或全部的策略：
① 在样式表内添加浏览器前缀（ vendor prefixes ）
② 渐进增强的设计方案（ Design with progressive enhancement ）
接下来的步骤
在接下来的章节里，我们将会学习 flexbox 的术语和语法。你将会看到，flexbox 是如何助于布局控制（ layout control ），你也会学到怎样和那些不支持flexbox的老浏览器打交道。
到本书结束，你将会知道如何用flexbox构建一个响应式网页可以在所有的浏览器所有的设备上运行。
