在接触Flex之前一直在使用float、display、position。老实说，使用起来非常恶心。在使用Flex的时候，我们可以简洁优雅的实现复杂的页面布局1、Flex布局？flex容器默认有两个轴，水平主轴（mainaxis）和垂直横轴（crossaxis）。这是默认设置。当然，你可以将垂直方向改为主轴，将水平方向改为横轴。首先，要实现flex布局，需要先指定一个容器。任何容器都可以指定为flex布局，这样容器内的元素就可以使用flex进行布局。.container{显示：flex|内联柔性；//可以有两个值}分别生成块状或内联弹性容器框。简单的说，如果使用div之类的块元素，就用flex，如果使用行内元素，就用inline-flex。注意：此时设置flex布局后，子元素的float、clear、vertical-align属性将失效。1.1.容器的属性。容器有以下6个属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1.1.1。flex-direction属性flex-direction属性决定了主轴的方向（即项目的排列方向）。.box{弹性方向：行|行反转|栏目|column-reverse;}默认值：row，主轴为水平方向，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴在垂直方向，起点在上边缘；column-reverse：主轴在垂直方向，起点在下边缘；1.1.2、flex-wrap：判断容器内的物品是否可以包裹。默认情况下，项目排列在主轴上不会换行，而是使用flex-wrap来实现项目的换行。.container{flex-wrap:nowrap|包装|wrap-reverse;}nowrap(默认值)不换行，即当主轴尺寸固定时，空间不足时，item尺寸会相应调整，不会挤到下一行。wrap：当项目的主轴总尺寸超过容器时换行，第一行在上面wrap-reverse:wrap，第一行在下面1.1.3、flex-flow：flex-direction和flex的简写形式-wrap.container{flex-flow:||;}默认值为：rownowrap;1.1.4、justify-content：定义item在主轴上的对齐方式。.container{证明内容：flex-start|弹性端|中心|间隔|space-around;}flex-start(default):leftalignmentflex-end:rightalignmentcenter:centerspace-between:twoEndjustifiedwithequalspacingitemsbetweenitems,即剩余空间被平均划分为间隙。space-around：每个item在两边等间距，所以item之间的空间是item和边缘之间空间的两倍。1.1.5.align-items：定义项目在横轴上的对齐方式。container{对齐项目：flex-start|弹性端|中心|基线|flex-direction：row的默认值为stretch，即item的高度没有设置或者设置为auto时，会占据整个容器的高度。假设容器的高度设置为100px，没有设置item的高度，则item的高度也是100px。flex-start：横轴起点对齐，假设容器高度设置为100px，item分别为30px、60px、100px，如上图所示。flex-end：横轴终点对齐center：横轴中点对齐baseline：项目中第一行文本的基线对齐1.1.6、align-content：定义多轴对齐，如果项目只有一个轴，那么这个属性将不起作用。container{align-content:flex-start|弹性端|中心|间隔|环绕空间|stretch;}当我们将flex-wrap设置为nowrap时，容器只有一个轴，并且由于项目不换行，所以不会产生多个轴。当我们的flex-wrap设置为wrap时，容器中可能会有多个轴。这时候就需要设置多个轴之间的对齐方式。测试建立在主轴为水平方向时，即flex-direction:row,flex-wrap:wrap;默认值为stretch，即在容器的垂直方向上等分空间。如果没有设置高度，整个容器将被拉伸。flex-start：所有轴都对齐在交叉轴的起点flex-end：所有轴都在交叉轴的终点对齐center：所有的轴都在交叉轴的中间对齐space-between：坐标轴两端对齐Equal，即剩余空间均等分间隙。space-around：每条轴两边的间距相等，所以轴之间的间距是轴与边之间间距的两倍。至此，容器上的所有属性都完成了。接下来，让我们谈谈弹性项目上的属性。1.2.Flex项目的属性主要包括以下6个在项目上设置的属性。orderflex-growflex-shrinkflex-basisflexalign-self1.2.1,order属性order属性定义项目的排列顺序。值越小，排名越高，默认0>;}如果所有项的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。1.2.3、flex-shrink属性：定义item的收缩比例。item{flex-shrink:;}默认值：1，即空间不足时，item会收缩，负值对该属性无效。这里可以看到，虽然每个item的宽度都设置为50px，但是由于自身容器的宽度只有200px，所以此时每个item都会按同样的比例缩小，因为默认值为1。注意：如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个项目的flex-shrink属性为0，其他项目为1，前者在空间不足时不会收缩。1.2.4、flex-basis属性：定义item在分配多余空间前占用的主轴空间，浏览器根据该属性计算主轴上是否有多余空间。flex-basis属性定义了在分配多余空间Spindle空间（主要大小）之前项目占用的空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。.item{弹性基础：<长度>|汽车;/*defaultauto*/}默认值：auto，即item的原始大小。此时item的宽高取决于width或height的值。当主轴在水平方向时，设置flex-basis时，item的width设置值会失效。flex-basis需要配合flex-grow和flex-shrink一起使用才能发挥作用。当flex-basis值为0%时，该项目被认为具有零尺寸，因此即使将尺寸声明为140px也是无用的。当flex-basis的值为auto时，则根据size的设置值（如果是100px），剩余空间不计入100px。1.2.5.flex属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}这个属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。关于flex的值，有很多特殊情况，可以分为：当flex的值为非负数时，该数为flex-grow的值，flex-shrink为1，flex-basis为0%，以下是等价的：.item{flex:1;}.item{flex-grow:1;伸缩收缩：1；flex-basis:0%;}当flex的值为长度或百分比时，认为是flex-basis值，flex-grow取1，flex-shrink取1，有以下等价情况（注意0%是百分比而不是非负数）。item-1{flex:0%;}.item-1{flex-grow:1;伸缩收缩：1；flex-basis:0%;}.item-2{flex:24px;}.item-2{flex-grow:1;伸缩收缩：1；basis:24px;}当flex的值为两个非负数时，分别视为flex-grow和flex-shrink的值，flex-basis的值为0%，相当于如下:.item{flex:23;}.item{flex-grow:2;收缩：3；flex-basis:0%;}1.2.6、align-self属性：允许单个项与其他项有不同的对齐方式单个项覆盖父元素align-items定义的属性默认值为auto，这意味着继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}这个和align-items属性是一样的，只不过align-self是对单个item有效，而align-items是对容器下的所有item都有效。容器的align-items设置为flex-start，第三个子元素的align-self：flex-end；查看更多系列文章
