html构建：flexbox.grid伸缩响应式页面的布局模式
github项目：https://github.com/kristoferjoseph/flexboxgrid
cdn资源加速：http://www.bootcdn.cn/flexboxgrid/
伸缩性布局（Flexbox）
Flexible Box 的css布局模块，在w3.org/TR/css3-flexbox中可以查得到。为了方便起见，下面这一模块统称 Flexbox。
Flexbox 赋予了我们能够对一个父级容器中子级元素进行水平以及垂直的定位，并且在这些子级元素的彼此之间都添加间距的能力。
举个例子，在IE10中使用Flexbox，首先就要用到display属性，看代码！
|
1
2
3
4
|
#fbexample { display: -ms-flexbox; background: black; } |
同样，我们还可以设置子级元素排列的方向，不过我们需要在添加相应的的浏览器供应商的前缀（对于IE10来说，我们需要在开头的地方添加-ms-flexbox），看代码！
|
1
2
3
4
|
#fbexample { display: -ms-flexbox; -ms-flex-direction: row;} |
Flexbox让我们能够以多种方式排列子级元素：从左到右，从右到左，从上到下，从下到上。
在这时候我们或许需要定义子级元素的排列坐标轴方向。
下面的代码同样控制了每个子级元素都在父级容器中间显示，同样，对于每个子级元素来说上下的空间分配都是一样的
|
1
2
3
4
5
|
#fbexample { display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center;} |
我们还可以用另一个属性flex-pack，这个属性控制子级元素如何分配剩余的空间。举个例子来说，首先我们要使得子级元素按照一定的方向在父级元素中排列：
|
1
2
3
4
5
6
|
#fbexample { display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center; -ms-flex-pack: start;} |
但是我们如果有过多的子级元素，而且我们不希望他们的尺寸被压缩到一个不是我们想要的情况的时候该怎么办呢？好吧，在这个时候我们采用flex-wrap把子级元素擦除之后，仍然可以让浏览器继续正常显示：
|
1
2
3
4
5
6
7
|
#fbexample { display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center; -ms-flex-pack: start; -ms-flex-wrap: wrap;} |
现在我们知道怎么建立起容器了，那该怎么控制好我们的子级元素呢？首先我们要在html把这些元素设定成Flexbox元素的子级元素,代码如下：
CSS代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#fbexample { display: -ms-flexbox; } #fbchild1 { background: blue; } #fbchild2 { background: green; } #fbchild3 { background: red; } |
HTML代码:
|
1
2
3
4
5
|
<div id="fbexample"> <div id="fbchild1">1</div> <div id="fbchild2">2</div> <div id="fbchild3">3</div></div> |
为了验证子级元素的自适应性。我们可以把flex的属性值设定为0，这代表着没有了自适应性，或者设定数值为1或2，代表着子级元素将要占据多少份额的空间.
图解说明：
当Flexbox被运用到元素当中，很容易就对子级元素进行丰富多样的布局，在这里我们看得到的是一个水平布局和包围起来的布局。
举个例子来说，我们有三个子级元素，第一个子级元素的数值设定为0，第二个子级元素的数值设定为1，第三个子级元素的数值设定为2。
第一个子级元素将会保留原来的尺寸大小，也就是说他没有自适应性，第二个子级元素将会和第三个子级元素共同分享多出来的空间，第二个子级元素占据其中的3分之1长度，而第三个子级元素就占据其中的3分之2长度。其中最值得称道的就是，在这个过程当中浏览器将会自动为你计算当中的长度，妈妈再也不用担心我的计算了！
|
1
2
3
4
5
6
7
8
9
10
11
|
#fbchild1 { background: blue;}#fbchild2 { background: green; -ms-flex: 1;}#fbchild3 { background: red; -ms-flex: 2;} |
在此时此刻，敏锐的你一定会发现，最新准则上面的一些属性不一定看起来完全正确，现在的Flexbox仅仅就是W3C所考虑的一个工作草图，这只是早期的一个标准。作为一个在发展的项目，经常变化是很正常的一件事情，下面，我们来看下最近准则的推出时间：
- November 29, 2011
- March 22, 2011
- July 23, 2009
如果你在caniuse.com中查找 Flexible Box布局模块，你将会看到使用的Flexbox属性前面都会出现供应商的前缀。一些供应商依据的是2009年的准则（可以参考上面的例子）而不是最新的 2011年9月的那个。这就是为什么我们不仅仅要参考准则上是否支持，还要在实践当中理解这些属性是否真的支持。
然而让人欣慰的是，我们不用担心在面对更新准则带来的转变难以适应，举个例子，就像现在这样子，说明一个元素是Flexbox就可以了，看代码！
|
1
2
3
4
|
#fbexample { display: -ms-flexbox; } |