介绍Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。CompatibilityIE10+,Chrom21+,Firefox22+,Safari6.1+基本概念//任何容器都可以指定为flex布局。//注意：具有Webkit内核的浏览器必须以-webkit为前缀。//设置为Flex布局后，子元素的float、clear、vertical-align属性将失效。.box{显示：-webkit-flex；/*Safari*/display:flex;}//内联元素.box{display:inline-flex}采用弹性布局的元素称为弹性容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。容器的属性1.flex-direction//flex-direction属性决定了主轴的方向（即item的排列方向）。//他可能有四个值//row（默认值）：主轴是水平的，起点在左端。//row-reverse:主轴是水平的，起点在右端。//column:主轴垂直，起点在上边缘。//column-reverse:主轴垂直，起点在底部。.box{弹性方向：行|行反转|栏目|column-reverse;}2.flex-wrap默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。//nowrap（默认）：不换行。//wrap:换行符，第一行在上面。//wrap-reverse:换行符，第一行在下面。.box{flex-wrap:nowrap|包装|wrap-reverse;}3.flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。.box{flex-flow:||;}4.justify-contentjustify-content属性定义项目在主轴上的对齐方式。.box{justify-content:flex-start|弹性端|中心|间隔|space-around;}//可能取5个值，具体对齐与轴的方向有关。下面假设主轴是从左到右。//flex-start（默认值）：左对齐//flex-end：右对齐//center：居中//space-between：两端对齐，items之间的间距相等。//space-around:每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。5.align-itemsalign-items属性定义项目如何在交叉轴上对齐。.box{对齐项目：flex-start|弹性端|中心|基线|stretch;}//可能取5个值。具体对齐方式与横轴的方向有关，以下假设横轴为自上而下。//flex-start:交叉轴起点对齐。//flex-end:交叉轴的末端对齐。//中心：交叉轴的中点对齐。//基线：项目中第一行文本的基线对齐方式。//stretch（默认值）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。6.align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。.box{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}//这个属性可能有6个值。//flex-start:对齐横轴的起点。//flex-end:与交叉轴的末端对齐。//中心：与交叉轴的中点对齐。//space-between：与横轴两端对齐，轴之间的间隔均匀分布。//space-around：每条轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。//拉伸（默认）：轴填充整个交叉轴。项目的属性1.orderorder属性定义了项目排列的顺序。值越小，排名越高，默认为0。.item{order:;}2.flex-growflex-grow属性定义了item的放大比例，默认为0，也就是说，如果还有剩余空间，则不会放大。如果所有项目的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。.item{flex-grow:;/*default0*/}3.flex-shrinkflex-shrink属性定义了item的缩小比例，默认为1，即空间不足时，item会收缩。如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性无效。item{flex-shrink:;/*default1*/}4.flex-basisflex-basis属性定义了item在分配多余空间之前所占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。可以设置为与width或height属性相同的值（比如350px），那么item将占据一个固定的空间。.item{弹性基础：<长度>|汽车;/*defaultauto*/}5.flexflex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}6.align-selfalign-self属性允许单个项目具有相同的对齐方式，可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。这个属性可以取6个值，除了auto，其他的和align-items属性完全一样。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}备注：摘自Flex布局教程：语法阮一峰
