弹性盒（flexbox, flexible box的简称）为css添加了一种新的布局模式，即弹性布局。
弹性盒提供了很多有用的属性，不需要使用浮动或者line-block值就能把多个元素排成一行。建立弹性盒子首先要提供两个组件。1. 弹性容器，建立弹性容器很简单，把div的display属性写成flex即可。2.弹性项目，直接嵌套在弹性容器的标签叫弹性项目，记住，只有弹性容器的子元素是弹性项目（如UL是div的子元素，但是UL中包含的Li元素不是div的子元素）。建议：在display属性声明时最好加上厂商前缀。
弹性容器相关的属性：
1.flex-flow属性：控制弹性项目的排列方向，也能控制是否换行。有两个值，之间用空格分开，第一个值指名排列方向。
row：这是默认值，各个弹性项目并排显示。
row-reverse：各个弹性项目并排显示，不过屏幕上的顺序是颠倒的，html第一个元素在最右边，最后一个元素在最左边。
column：各个弹性项目纵向叠放。
column-reverse：弹性项目顺序颠倒，与roe-reverse相反，最后一个html元素在最顶部，第一个在最底部。
第二个值是指名是否换行。
nowrap：这是弹性容器里的常规行为，不关浏览器窗口有多窄，都只会在一行内显示弹性项目，纵向同理。
wrap：当容器放不下弹性项目是，换行。（但是为了让弹性项目换行，还需要设置一些其他的属性，下面会讲）
wrap-reverse：与wrap作用类似，不过方向相反。
注：flex-flow属性是另外两个弹性盒相关css属性的简写形式，分别是flex-direction 和 flex-warp。
2.justify-content属性：告诉浏览器把弹性项目显示在一行里的什么位置。（有两个前提，1.弹性项目设置了宽度。2.各个项目的宽度之和小于弹性容器的宽度。）有五个可选值。
(1). flex-start:项目在一行里左靠齐，需要注意的是，当把方向设置为flex-flow:row-reverse时，这个选项会靠右对齐各个项目。
(2). flex-end:项目在一行里靠右对齐，如上，当方向设置为roe-raverse时，会左对齐各个项目。
(3). cneter:弹性项目居中显示在容器中间。
(4). space-between:均匀各个弹性项目，项目之间的空间大小相同，最左边的项目靠容器的左边，最右边的项目靠近容器的右边。
(5). space-around:把容器里剩余的空间平均分给各个项目，，包括最右边和最左边的项目。
注：这个属性要添加到css属性中去，还要为项目设置宽度。
3. align-items属性：决定高度不同的弹性项目在弹性容器里的纵向对齐方式。（在默认情况下，弹性项目会拉伸，因此高度相同。）
(1). flex-start:把各个项目的顶边与容器的顶边对齐。
(2). flex-end:把各个项目的底边与容器的底边对齐。
(3). center:把各个项目的纵向中心线与容器的纵向中心线对齐。
(4). baseline:把各个弹性项目里的第一个元素的基线对齐。
(5). stretch:这是弹性项目常规的对齐方法，拉伸容器里各个项目，使各个项目高度对齐。
注:如果容器的方向是column，那么，align-items属性用于控制不同的纵排弹性项目在弹性容器里的横向对齐方式。
4.align-content:如何放置显示为多行的弹性项目。要满足两个条件才会起作用1.弹性容器必须允许换行。2.弹性容器的高度必须大于多行显示的弹性项目。支持6个·值。
(1). flex-start:把各个弹性项目放在弹性容器的顶部。
(2). flex-end:放在弹性容器底部。
(3). center:各行整体纵向中心线与容器纵向中心线对齐。
(4).space-between:把纵向额外空间平均分布在各行之间，最上面一行放在容器的顶端，最下面一行放在容器的底部。
(5):space-around:把平均空间分布到各行的上下，包括最上面一行和最下面一行。
(6): stretch:这是常规行为，即拉伸各个项目。具有相同高度。
5.order属性：用于为弹性项目设置数值，指明项目在行（或者列）里的位置。p526。
注：order属性的数值与z-index属性的数值作用类似。
6.align-self属性：与弹性容器的align-items属性类似，不过后者应用于容器里的所有弹性项目，前者只应用于单个弹性项目。也就是说，我们可以让容器里的所有弹性项目都靠上部对齐，但是只让某一个项目靠底部对齐。
7.flex属性：是三个属性的简称，有三个值，第一个值是数字，指明弹性项目的相对宽度，假如某个弹性容器里有三个<div>标签，我们可以把这些标签的第一个属性设置为1，让他们的宽度相同，供给flex属性的值是相对单位，而不是绝对的度量值。第二个值也是数字，不过设定的是flex-shrink属性，当容器的宽度没有各个弹性项目的宽度之和大时，flex-shrink属性会起作用。控制弹性项目能收窄多少，能收取的量取决于弹性项目设置的宽度。最后一个值针对flex-basis属性，其作用是设置弹性项目的宽度。
刚刚看到这一章，觉得相对与其他布局方式，更加