网页布局（layout）是CSS的一个关键应用。布局的传统方案，基于盒模型，依赖display属性+position属性+float属性。对于那些特殊的布局，例如邪恶的垂直中心，非常不方便。2009年，W3C提出了一种新的解决方案——Flex布局，可以以简单、完整、响应式的方式实现各种页面布局。目前所有浏览器都支持它，这意味着现在可以安全地使用此功能。（ie10+支持flex布局，对于我现在的项目，因为cors是用来解决跨域的，所以对ie的支持也是ie10+，非常契合）我说支持，但ie从来没有让我们失望，flex在下即错误和解决方案可按需提供。一、基础知识和术语1、什么是弹性布局Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。任何容器都可以指定为弹性布局。.box{display:flex;}内联元素也可以使用Flex布局。.box{display:inline-flex;}Webkit浏览器必须以-webkit为前缀。当然，如果你也使用了无敌autoprefixer，就不需要这样做了。.box{显示：-webkit-flex；/*Safari*/display:flex;}另外需要注意的是，设置flex布局后，子元素的float、clear、vertical-align属性将失效。2.基本概念是使用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。二、属性1、容器的属性容器中可以设置6个属性。.box{弹性方向：行|行反转|栏目|column-reverse;}该属性的4个值分别代表：row（默认值）：主轴水平，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。1.2flex-wrap默认情况下，项目排列成一行（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。.box{flex-wrap:nowrap|包装|wrap-reverse;}该属性的3个值分别表示：nowrap（默认）：无换行。wrap：换行符，第一行在上面。wrap-reverse：换行，第一行在下面。1.3flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。.box{flex-flow:||;}1.4justify-content属性justify-content属性定义项目在主轴上的对齐方式。.box{justify-content:flex-start|弹性端|中心|间隔|环绕空间|space-evenly;}这个属性的六个值分别代表（具体对齐方式和轴的方向有关，下面假设主轴从左到右）：flex-start（默认）：left-alignedflex-end：右对齐center：居中space-between：两端对齐，item之间的间距相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。space-evenly：每个项目之前的间距和到边缘的间距相等1.5align-items属性align-items属性定义项目如何在交叉轴上对齐。.box{对齐项目：flex-start|弹性端|中心|基线|stretch;}该属性的5个值分别表示（具体对齐方式与横轴方向有关，以下假设横轴为自上而下）：flex-start：交叉轴对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。1.6align-content属性align-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。.box{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}该属性的6个值分别代表：flex-start：与横轴起点对齐。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。2.项目的属性项目还有6个属性可以设置：orderflex-growflex-shrinkflex-basisflexalign-self2.1order默认情况下，项目按照源的顺序排列。但是order属性可以控制它们在flex容器中的显示顺序。.item{命令：<整数>;/*default0*/}2.2flex-growflex-grow属性定义了item的放大比例，如果所有item的flex-grow属性都为1，则平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。.item{flex-grow:;/*default0*/}2.3flex-shrink与flex-grow相反，flex-shrink属性定义了item的缩小比例，如果所有item的flex-shrink属性都为1，空间不够时,它将按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。.item{flex-shrink:;/*default1*/}2.4flex-basisflex-basis属性定义了item在分配多余空间之前所占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。.item{弹性基础：<长度>|汽车;/*defaultauto*/}可以设置为与width或height属性相同的值（比如350px），那么item会占据一个固定的空间。（https://css-tricks.com/snippe...说这个关键字还没有很好的支持，所以很难测试，也很难知道它的siblingsmaxcontent,mincontent和fitcontent做了什么。)2.5flexflex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}这个属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。2.6align-selfalign-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}这个属性可能取6个值，除了auto，其他的和align-items属性完全一样。3、路漫漫其修远兮。其实就是对flex布局没有了解。这篇文章只是为了加深印象，做一个总结。本文大部分内容复制自flex布局教程和ACompleteGuidetoFlexbox
