修改后的代码更加精简，不需要其他小伙伴帮忙。让flex家族负责布局。概念应用弹性布局的容器通常称为弹性盒/容器（flexcontainer）。可以使用display:flex或display:inline-flex生成弹性容器。flexbox的children通常被称为flexelements/items（弹性项目），它们使用flex布局模型进行布局。.container{显示：flex|inline-flex;}如果你想了解flex布局的工作原理，首先需要学习的是它自己的术语。下面是直接引用了flexdraft中的术语介绍图：别被英文原文的术语吓到，我们翻译一下，很容易理解：在术语图中，可以看到两个轴，即主轴和主轴。垂直交叉轴。同时标出主轴的起点（mainstart）和终点（mainend），交叉轴的起点（crossstart）和终点（crossend）。默认情况下，弹性布局是在主轴方向上布局的。flex元素占用的主轴空间（mainsize）就是flex元素的宽度（width），flex元素占用的横轴空间（crosssize）就是flex元素的高度（height）。flex容器属性flex容器可以使用以下属性来控制容器的行为：这里有一个demo供参考。目前有一个新的规范（CSSBoxAlignmentModuleLevel3）处于工作草案状态，它为一些属性增加了新的值，比如[first|last]?baseline,self-start,self-end,开始,结束,left,right,unsafe|安全的。大多数浏览器都没有实现这些新值，为了演示，这里只解释初始版本的值。Firefox浏览器对新值的实现更高级，同样推荐使用Firefox浏览器观看demo。flex-directionflex-direction指示内部元素如何在flex容器中布局。可以简单理解为flex容器的布局方向。默认值为row，可选语法如下：/*公共属性*/flex-direction:row|行反转|栏目|列反转；简而言之，内容是从左到右排列的。row-reverse：和row一样，只是主轴起点和主轴终点相反。column：主轴由水平变为垂直，布局从上到下排列。column-reverse：主轴由水平变为垂直，布局从上到下排列。值得注意的是，全局属性dir的作用是指示元素文本的方向性，受row和row-reverse的影响。在本示例代码笔演示中：flex-directionflex-wrapflex-wrap指定flex元素应该显示在单行还是多行中。如果可以换行，您甚至可以通过此属性控制线条的堆叠方向。它的值如下：flex-wrap:nowrap(defaultvalue)|包装|换行；可以通过本例demo右上角的按钮修改元素个数，观察三个值之间的变化：nowrap：flex容器宁愿挤压元素的空间也不愿wrap。即使压缩到一定程度，容器也会溢出。wrap：如果子项超过容器的宽度，允许换行。wrap-reverse：与wrap相同的行为，只是交换了横轴的起点和终点。此示例代码笔演示：flex-wrapflex-flowflex-flow属性是flex-direction和flex-wrap的简写。这个没什么好说的，就不多写demo了。/*语法*/flex-flow:||;/*单独设置flex-direction属性*/flex-flow:row;flex-flow:column;/*单独设置flex-wrap属性*/flex-flow:nowrap;flex-flow:wrap;/*同时设置两个属性，建议按语法顺序写*/flex-flow:rownowrap;flex-flow:columnwrap;justify-contentjustify-content属性定义了容器的flex元素之间的对齐方式主轴。这是flex布局中常用的属性之一。证明内容：正常|间隔|环绕空间|空间均匀|中心|弹性启动|flex-end在初始版本中，justify-content的默认值为flex-start。但是在最新版的chrome浏览器中修改为正常。为了比较属性之间的差异，本示例demo清除了元素两边的margin：normal：排列效果等同于flex-start。flex-start：默认是左对齐，从行首开始。每行的第一个flex元素与行首对齐，所有后续的flex元素与前一个元素对齐。flex-end：默认右对齐，从行尾开始排列。每行的最后一个flex元素与行尾对齐，其他元素将与下一个元素对齐。center：此值将元素对齐到中心。space-between：首末两端对齐，内部元素间距相等。space-around：将flex元素均匀分布在每一行上。相邻元素之间的距离相同，第一个和最后一个元素之间的距离是相邻元素之间距离的一半。space-evenly：剩余空间均匀分布在主轴上每个元素的两侧。（注意这里和space-around的区别）在本例codependemo中：justify-contentalign-itemsalign-items属性不仅在flex布局中有效，在grid（网格）布局中也适用。它在flex布局中的作用是确定交叉轴的对齐方式。这也是flex/*主流浏览器已经实现的值*/align-items:normal|弹性启动|弹性端|中心|基线|stretch/*新稿增加的值*/align-items:|开始|结束|[第一|最后]基线|左|rightnormal：normal在flex布局中表现得像拉伸。stretch：flex元素在横轴方向上被拉伸到与容器相同的高度或宽度。如果未设置容器的高度，则采用当前行中最高元素的高度。例如，本例中元素4是第一行中最高的元素，第一行中的高度被拉伸到与最高元素相同的高度。第二行最高的元素是元素2，所以第二行的高度取到元素2。flex-start：元素对齐到横轴的起点。flex-end：元素对齐到横轴的末端。center：元素以横轴为中心。基线：所有元素都与基线对齐。从交叉起点到元素基线距离最远的元素将与交叉起点对齐以确定基线。示例中将元素6的font-size放大，与中心比较，看差异。本例codependemo中：align-itemsalign-contentjustify-content作用于主轴，而align-content用于定义横轴的对齐方式。值得注意的是，如果flex容器中只有一个轴，则该属性将不起作用。/*主流浏览器已经实现的值*/align-content:normal|间隔|环绕空间|空间均匀|拉伸|中心|弹性启动|*/align-content:[first|last]?baseline,start,end,left,right在父容器中设置flex布局后，如果子元素没有设置height属性，容器中的子元素会默认被拉伸。为了方便观察两者的区别，作者在demo中新增一列进行对比。左列的flex元素使用height属性，右列使用min-height属性。同时将flex容器高度设置为400px:normal:就像没有设置任何值并且元素处于默认位置一样。stretch：拉伸所有行以填充剩余空间。剩余的空间平均分配给每一行（如果一个元素设置了高度，那么这个值将对该元素没有影响）。flex-start：横轴起点对齐。flex-end：对齐交叉轴的末端。center：横轴居中。space-between：横轴两端对齐，行间距相等space-around：横轴均匀对齐，行两端间距相等space-evenly：剩余空间为均匀分布在横轴上每个元素的两侧。本例codependemo：align-contentFlexItemFlexContainer（弹性容器）的一级子元素是Flexitem（弹性元素）。以下属性主要适用于Flex项目。flex-basisflex-growflex-shrinkflexalign-selfforderflex-growflex-grow属性用于定义元素的比例，它接受一个正整数，默认值为0。flex-grow:/*示例：只接受正值*/flex-grow:1;本例codependemo：align-contentflex-shrink与flex-grow相反，flex-shrink属性处理元素的收缩，默认为1，表示元素默认会随着容器收缩按比例收缩。值为0不缩放。flex-shrink:/*示例：默认缩放*/flex-shrink:1;/*示例：使元素不缩放*/flex-shrink:0;在下面的演示中，每个弹性项目的宽度和高度是相等的。当父容器有足够的空间时，元素不需要收缩，所以flex-shrink没有机会发挥作用。减小flex容器的尺寸后，可以发现flex-shrink的值越大，元素被挤压的空间就越大。本例中dmeo:flex-shrinkflex-basisflex-basis指定了flex元素在主轴空间的初始尺寸（mainsize）。flex-basis:<'width'>当一个元素同时设置了flex-basis（auto除外）和width属性时，flex-basis具有更高的优先级。W3C鼓励使用flex速记属性（在下一节中介绍）来控制灵活性，而不是直接使用flex-basis属性。因为简写属性flex正确地重置了任何未指定的属性以供常见使用。本例demo：flex-basisflex属性是flex-grow、flex-shrink、flex-basis的缩写，指定弹性元素如何拉伸以适应flex容器中的可用空间。默认值为01自动。弹性：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]flex属性可以指定1、2或3个值。单值语法：该值必须是以下之一：无单位数字（）：它将被视为的值。一个有效的宽度值：它将被用作的值。关键字none、auto、initial。双值语法：第一个值必须是一个无单位的数字，它将被用作的值。第二个值必须是以下之一：一个无单位的数字：它将作为的值。一个有效的宽度值：它将被用作的值。三值语法：第一个值必须是无单位的数字，作为的值。第二个值必须是一个无单位的数字，它将被用作的值。第三个值必须是有效的宽度值，它将被视为值。关于这个属性没有什么可以证明的。它实际上是前面介绍的三个属性的组合：本例中的demo：flexalign-selfalign-self属性作用于flex布局中的单个flex元素，它会控制指定元素在横轴上的对齐方式地点。对齐自我：自动|正常|伸展|中心|弹性启动|flex-end;/*大多数浏览器没有实现的功能*/align-self:start|结束|自启动|自我终结|[第一|最后的]？baseline;auto：设置为父元素的align-items值，如果该元素没有父元素，则设置为stretch。normal：在flex布局中，相当于stretch的效果。stretch：flex元素将根据容器的宽度和高度根据其自身边距框的横向尺寸进行拉伸。center：使项目在交叉轴上居中。flex-start：flex元素将对齐到横轴的起点。flex-end：flex元素将对齐到横轴的末端。本示例演示：align-selforderorder属性用于设置指定flex元素在容器中的顺序。容器中的flex元素按值升序排列，如果值相同，则按其源代码出现的顺序排列。默认值为0。它接受一个整数值（integer），比如-2、0、3等。.这个例子demo：orderCompatibility如果你想把你学到的新东西应用到实际项目中，你不得不考虑它的兼容性。通过caniuse我们可以看到，flex布局经过多年的发展，主流浏览器已经实现了flex布局的基本模块。PC端需要考虑的是是否兼容IE，移动端最低兼容ios3.2+，Android2.1+。如果需要开发微信小程序，那么小程序官方推荐使用flex布局。早期的flex布局是通过display:box;来声明的，使用的是旧规范，后来这个值被flex代替了。还有一些非常低级的浏览器可能需要添加浏览器前缀才能使用flex布局。所以，如果你在某处看到下面的代码，请不要感到惊讶，这是因为开发者正在使布局兼容：.flex-center{display:-webkit-box;显示：-webkit-flex；显示：-moz-box；显示：-ms-flexbox；显示：弹性；-webkit-box-pack：中心；-webkit-justify-content：居中；-moz-box-pack：中心；内容：中心；-webkit-box-align：居中；-webkit-align-items：居中；-moz-box-align：居中；-ms-flex-align:居中；align-items:center;}但是如果要我们在开发的时候手动写这种兼容似乎不太靠谱，因为它是兼容和冗余的。好在现在的前端开发都会使用脚手架，脚手架一般都会内置postcss、autoprefix等插件来帮助我们完成这些事情。可能有朋友会说，我们老项目还得兼容IE8+，难道flex布局就没机会了吗？其实github上有个叫flexibility的polyfill可以让IE8+实现flex布局效果。在这篇文章的最后，我介绍了如何使用flex布局，各个属性的作用和作用，我会在下一篇文章中详细说说flex布局。实际工作中的妙用~由于不支持codepen和caniuse的插入，所以将这些外部demo转成图片。如果想预览各个属性的效果，可以直接访问原文：GettingStartedwithFlexboxLayout|anran758的博客进行操作或者直接打开各个demo所在的页面。参考资料：CSSFlexibleBoxLayoutModuleLevel1CSSBoxAlignmentModuleLevel3MDN|弹性项目