参考阮一峰老师写的Flex布局教程学习文章。兼容性概述如下。弹性布局用于为盒子模型提供最大的灵活性。1、浏览器支持：Chrome21+、Opera12.1+、Firefox22+，2、基于webkit的浏览器必须加-webkit前缀，如显示：-webkit-flex；3、设置布局为Flex后，子元素的float、clear、vertical-align属性将失效。容器上的6个属性1.flex-direction决定主轴的方向flex-direction:row|row-reverse|column|column-reverse;row（默认值）：主轴是水平的，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。2.一个轴放不下flex-wrap如何包裹flex-wrapflex-wrap:nowrap|wrap|wrap-reverse;nowrap（默认）：不换行。wrap：换行符，第一行在上面。wrap-reverse：换行，第一行在下面。3、flex-flow是flex-direction属性和flex-wrap属性的缩写。默认值为rownowrapflex-flow:||<弹性包装>;4.justify-content定义主轴中的itemJustify-content:flex-start|flex-end|center|space-between|space-around;flex-start（默认）：leftjustifyflex-end：rightAligncenter：居中space-between：两端对齐，item之间的间隔相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。5.align-items定义项目如何在横轴上对齐。（假设横轴是从上到下）align-items:flex-start|flex-end|center|基线|拉伸；flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。6.align-content定义多轴的对齐方式。如果项目只有一个轴，则此属性无效。对齐内容：flex-start|flex-end|center|space-between|space-around|stretch；flex-start：对齐横轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。子元素上的6个属性1.order属性定义了项目排列的顺序。值越小，排名越高，默认为0。order:;2、flex-grow属性定义item的放大比例，默认为0，即如果还有剩余空间，则不放大。弹性增长：<数字>；如果所有子元素的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，而其他子元素为1，则前者剩余占用的空间将是其他子元素的两倍。3、flex-shrink属性定义item的缩小比例，默认为1，即如果空间不足，item会收缩。弹性收缩：<数字>；/如果所有子元素的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个子元素的flex-shrink属性为0，其他子元素为1，前者在空间不足时不会收缩。负值对该属性没有影响。4.flex-basis属性定义了分配多余空间前子元素占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值是auto，也就是子元素的原始大小。弹性基础：<长度>|汽车;/\*defaultauto\*/可以设置为与width或height属性相同的值（比如350px），则item会占据固定的空间。5、flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。弹性：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]该属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。6、align-self属性允许单个item与其他item有不同的对齐方式，可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。对齐自我：自动|弹性启动|弹性端|中心|基线|拉紧;
