cssflex布局在日常开发中应用广泛，其灵活的灵活性方便了响应式需求的开发，网格布局，垂直居中等，设置好flex布局后，添加一个即可轻松实现很少的属性。基本使用可以参考阮老师的博客。弹性布局的特点。Flex可以看作是一个容器，它有一个主轴（mainaxis）和一个交叉轴（crossaxis）作为容器内容排列的基准。容器中的每个子元素称为一个项目，这些项目排列在主轴上，每个项目在主轴方向上所占的空间称为主要尺寸。我们可以通过设置item的width属性来指定mainsize的大小，或者通过flex属性（flex-grow、flex-strink、flex-basic组合）让mainsize响应式。如何计算item的尺寸指定width属性直接在每个item上设置宽度尺寸，item尺寸就是宽度的值。该方法不会使宽度自适应。如果容器宽度大于或小于项目宽度之和，则容器将出现。大量的空白或者超出容器，为了避免这种情况，通常会指定flex属性，让item宽度自适应，从而填满整个容器。如果item的总宽度小于container宽度，指定flex-grow属性，item会自动展开与container宽度一致/T，每个item的宽度为mainsize=flex-grow*W/Tdemo地址itemwidth设置width或flex-basic属性containerwidth先减去这些itemwidth或flex-basic的值，剩下的container的宽度会通过flex-grow计算并分配给所有item。mainsize=flex-basic+(W-每个item的宽度)*flex-grow/T*注意：flex-basic的优先级高于widthDemo地址itemwidth如果设置了max-widthitemwidth，先按照上面的两种算法计算宽度。如果项目宽度大于max-width，超出的宽度将被重新分配给没有设置max-width属性的项目。demo地址item总宽度大于容器宽度计算规则指定flex-strink属性，item宽度会自动收缩与容器宽度一致。引用MND：CSSflex-shrink属性指定了flex元素的收缩规则。只有当默认宽度的总和大于容器时，flex元素才会收缩。收缩的大小基于flex-shrink的值。其实这里收缩和膨胀的算法是不一样的。收缩的大小不能通过flex-strink直接确定。计算一下，以这段代码为例：.flex-item1{background-color:red;flex:08800px;}.flex-item2{背景色:灰色;flex:04400px;}.flex-item3{background-color:antiquewhite;flex:02200px;}.flex-item4{背景色:橙色;flex:01100px;}这里可以计算出item的总宽度为1500px，大于container的宽度1000px，按照MDN的说法，计算出第一个item的宽度应该是：800-(1500-1000)*(8/15)=533.33px可以看出item的收缩尺寸并不是直接通过flex-strink得到的，item的收缩应该是计算宽度后，你也需要使用flex-basic。以上面代码为例，首先计算item的虚拟总宽度VS=各个item的flex-basicflex-strink之和，然后计算单个item的占比P=flexflex-strink/VS,最后计算出item应该减少到size=realexcess*P,可以计算第一个item的宽度：如果item中有max-width或者min-width，先计算item的宽度收缩后，如果item宽度大于max-width，最终item的尺寸会以max-width的值为准，超出的宽度会分配给其他item；如果item小于min-width，则最终item的大小将以min-width为准，分配的宽度少的将从其他item中减去。这部分分配给其他项目的宽度必须严格遵守上面写的计算规则。演示地址项目同时具有max-width和min-width。"处理max-width和min-width，例如：.flex-item1{background-color:red;flex:04400px;/*240*/min-width:310px;}.flex-item2{background-color:gray;flex:02400px;/*320*/max-width:280px;}.flex-item3{background-color:antiquewhite;flex:04200px;/*120*/max-width:100px;}.flex-item4{background-color:orange;flex:02200px;/*160*/}.flex-item5{background-color:lightcoral;flex:02200px;/*160*/}宽度item1收缩后的宽度为240px，min-width为300px，所以item1借用了60px，需要从其他item中补60px；item2收缩后的宽度为320px，max-width为280px，所以如果item2少了40px，会退到其他item；item3page也是一样，120-100=20px，20px会退到其他item。来来回回，发现借用的item1的width刚好可以由item2和item3补上，补齐后，两者清空。因此e、item4和item5的宽度不会受到影响或改变。演示地址其他影响宽度计算的例子容器上设置了flex-wrap=wrap属性。项目的宽度超过了容器的宽度，超出的项目自动移到下一行。在每一行中，项目的宽度以flex-grow为准进行计算。如果在demo地址project中设置了position，如果position的值使project脱离文档流，容器中project的flex属性将失效，其他item的宽度会根据flex自适应财产。Demo地址总结flex布局中item的自适应宽度（高度）由flex-grow和flex-strink决定，两者都是将容器中剩余或多余的宽度（高度）分配给每个item，flex-grow是剩余的宽度根据flex-grow比例分配给每个item，flex-strink根据每个item的原始宽度*flex-strink占总虚拟宽度的比例分配item应该减去的宽度。
