Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。其设置方式：
            
                {
                    display: box;              /* OLD - Android 4.4- */
                    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox;      /* TWEENER - IE 10 */
                    display: -webkit-flex;     /* NEW - Chrome */
                    display: flex;  
                }
需要注意的是，如果设置为flex布局后，子元素的float、clear、vertical-align属性将失效。
属性 值 说明 样例
[容器的属性] flex-direction：主轴上的方向与排列方式 row 默认值，主轴为水平方向，即子元素以行的方式排列分布；添加方式是从左到右分布，即表现出来的样子是正序居左上展示
1
2
row-reverse 主轴为水平方向，即子元素以行的方式排列分布；添加方式是从右到左分布，即表现出的样子是倒序并且居右上展示
1
2
column 主轴为竖直方向，即子元素以列的方式排列分布；添加方式是从上到下分布，即表现出的样子是正序居左上展示
1
2
column-reverse 主轴为竖直方向，即子元素以列的方式排列分布；添加方式是从下到上分布，即表现出的样子是倒序居左下展示
1
2
[容器的属性] flex-wrap:用于控制一行放不下时如何处理换行 nowrap 默认值，不换行，带来的效果是，如果子元素的超出一行的展示宽度，则元素缩放以便放入一行中
1
2
3
4
wrap 换行，第一行在最前，带来的效果是，如果子元素的超出一行的展示宽度，则子元素进行折行，并且行高平分父容器的高度；即表现出的样子是元素和行都正序排列，并且行高取决于行数和父容器的高度
1
2
3
4
wrap-reverse 换行，第一行在最后，带来的效果是，如果子元素的超出一行的展示宽度，则子元素进行折行，并将折行进行倒序展示，并且行高平分父容器的高度；即表现出的样子是元素是正序排列，但行是倒序排列，并且行高取决于行数和父容器的高度
1
2
3
4
[容器的属性] flex-flow：是flex-direction和flex-wrap的合集简写形式，第一个设置内容是flex-direction，第二个设置内容是flex-wrap;使用方式如下：flex-flow:row wrap; - - -
[容器的属性] justify-content:主轴上的元素的对齐放置方式 flex-start 默认值，在主轴上从开始到结束方向，以次摆放元素
1
2
flex-end 在主轴上从结束到开始方向，以次摆放元素
1
2
center 在主轴上居中展示
1
2
space-between 在主轴上间距均分展示，元素之间的间隔都相等
1
2
space-around 主轴方向上，每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。
1
2
[容器的属性] align-items：副轴上的对齐放置方式 stretch 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
1
2
flex-start 在副轴上从开始到结束方向，以次摆放元素
1
2
flex-end 在副轴上从结束到开始方向，以次摆放元素
1
2
center 在副轴上居中，以次摆放元素
1
2
baseline 在副轴上以项目的第一行文字底线的对齐方式展示
1
2
[容器的属性] align-content:与align-items有相似之处，但algin-items设置的是单个元素副轴上的对齐方式，而align-content设置的是行（列）在副轴上的对齐方式 stretch 默认值，如果项目未设置高度或设为auto，将占满整个容器的副轴长度
1
2
flex-start 行与行（列与列）之间没间距，从副轴的开始向结束依次放置行
1
2
3
4
flex-end 行与行（列与列）之间没间距，从副轴的结束向开始依次放置行
1
2
3
4
center 行与行（列与列）之间没间距，在副轴上居中依次放置显示
1
2
3
4
space-between 在副轴上间距均分展示，行与行（列与列）之间的间隔都相等
1
2
3
4
space-around 副轴方向上，每个行（列）两侧的间隔相等，所以，行（列）之间的间隔比行（列）与边框的间隔大一倍。
1
2
3
4
[项目的属性] order:定义项目的排列顺序。数值越小，排列越靠前 <integer> 默认为0，可以设置为负值
1
2
[项目的属性] flex-grow:属性定义项目的放大比例，为0时不放大，放大的范围时父容器的剩余空间 <integer> 默认为0，表示不放大，如果所有元素的值都相同，则表示要均分父容器，可以用于填充剩余空间时使用，比如左侧菜单宽度固定，右侧空间随浏览器大小变化的场景
flex-grow属性需要注意的问题：flex-grow用于扩展的空间是父控件剩余的空间！
父控件剩余的空间=父控件的总空间-所有子元素的初始空间。
元素的初始空间：如果仅仅设置的(width|height)，则是width|height的值，如果还设置了flex-basis的值，则是flex-basis的值，如果以上两个都未设置，则是元素的值是由内容撑开的值。
由以上可见，当两个div的内容长度不同，并只设置了flex-grow：1的情况下其实两个div的长度是不同的。举例：
父控件的宽度是100px，div1的内容撑开的宽度是10px，div2的内容撑开的宽度为20px，当都设置了flex-grow：1的情况下
div1的宽度=div1的初始宽度 + (父控件宽度 - div1的初始宽度 - div2的初始宽度) / 2 = 10 + (100 - 10 - 20) / 2 = 45
div2的宽度=div2的初始宽度 + (父控件宽度 - div1的初始宽度 - div2的初始宽度) / 2 = 20 + (100 - 10 - 20) / 2 = 55 由以上可见如想要空间按照flex-grow的值进行等比例设置，则可以通过以下2中方式设置：1、设置width或height的初始值都相等，2、设置flex-basis的值都相等
123
123
123
123
[项目的属性] flex-shrink:定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小;本属性与min-width同时存在时，min-width会起作用，即当控件大小缩小到min-width时，控件将不再缩小 <integer> 默认为1，表示不足时可以缩小，如果所有元素的值都相同，则表示均等缩小，如果一个为0其它为1，则表示为0的不缩小；该属性需要与width或flex-basis使用，当所有元素的大小和大于父控件大小时，根据shrink的值开始等比例缩放
1
2
3
4
[项目的属性] flex-basis:与控件的width属性相同功能,当两个属性同时设置时，flex-basis会覆盖width的值;用于设置或检索弹性盒伸缩基准值 **px|auto 默认为auto，表示控件的本来大小
1
2
[项目的属性] flex:是flex-grow, flex-shrink 和 flex-basis的简写 三个值，后两个属性可选。 默认为0 1 auto，
[项目的属性] align-self:是flex-grow, flex-shrink 和 flex-basis的简写 auto，继承父元素的align-items；其它元素的功能与align-items的相同 默认值，设置单个项目的布局方式，让某个元素与其它元素不同的对齐方式，会覆盖align-items的属性
1
2
3
1
2
3