flex布局笔记排序理解-webkit-box在使用postcss做css代码后向兼容时，display:flexcompatibility后的代码往往有display:-webkit-box。一些移动端的核心比较低，只支持老版本的box布局，不支持flex布局。盒式布局是弹性布局的前身。与float不同的是，float会在超出边界时自动换行，box和flex不会。box和flex的区别当容器中子元素的总宽度超过父元素时：box=>子元素溢出父元素的边框flex=>子元素被挤压查看时比较主轴修改排列方式：box=>-webkit-box-orient:(horizo??ntal|vertical)flex=>flex-direction:(row|column)（效果一样，区别只是属性名不同）顺序ofarrangement:box=>-webkit-box-direction:(normal|reverse)flex=>flex-direction:(row-reverse|column-reverse)注：flex的反转效果，以row-reverse为例，从容器最右边开始排列，box的反作用从容器最左边开始排列（查看对比）主轴空余空间管理：box=>-webkit-box-pack:/start:空余空间在右边/端：左边的空间/中心：两边的空间/justify；项目之间的空余空间flex=>justify-content:/flex-start左侧额外空间/flex-end右侧额外空间/center两侧额外空间/space-between,space-around,space-evenly不同形式项目之间侧轴上的额外空间剩余空间管理：box=>-weblit-box-align:/start:下面的剩余空间/center:两侧的剩余空间/end:flex上面的剩余空间=>align-items:/flex-start:下方多余空间/center:两侧多余空间/flex-end:顶部多余空间/baseline:基线对齐/stretch:等高布局注：4和5是相对于主轴和侧边axis,不固定为X轴或者y轴item(item)局部拉伸压缩box=>-webkit-box-flex(可以同时控制拉伸和压缩)flex=>flex-grow(只能控制拉伸),flex-shrink(只控制压缩)wide设置box=>widthflex=>width或flex-basis，flex-basis优先级高于width。flex布局的基本概念可以参考flex布局的基本概念一劳永逸。大多数财产规则并不复杂。请参考下图使用。你需要注意的属性是flex-grow和flex-shrink。flex-grow的计算方式flex-grow的作用：当主轴方向有多余空间时，将多余空间赋值给对应的itemflex-grow默认值：0flex-grow触发条件：主轴方向有多余空间主轴方向flex-grow对于额外空间计算：额外空间根据flex-grow的值进行分配。示例：假设内容宽度为600px，flex布局里面有4个item。项目的初始宽度分别为50px、100px、150px和200px。第一项的flex-grow：4；第四项的flex-grow：1；问：四项的宽度是多少？解决方法：计算剩余空间的宽度：Surplus=600px-(50+100+150+200)px=100pxgrow)=100px/(4+1)=20px宽度根据flex-grow值分配：第一项宽度=初始宽度+单位flex-grow宽度*flex值=50px+20px*4=130px第四项itemwidth=initialwidth+unitflex-growwidth*flexvalue=200px+20px*1=220px因此，四个item的宽度分别为130px、100px、150px、220px。示例中可以查看flex-shrink的计算方法。flex-shrink的作用：当容器的flex-wrap为nowrap，且item的初始宽度之和大于容器的宽度时，容器会压缩其中的item，flex-shrink决定压缩时间。规则。flex-shrink默认值：1flex-shrink触发条件：容器宽度不够，需要压缩内容才能显示flex-shrink计算方法：计算每个item的压缩空间权重=flex-shrink*width，根据给权重分配压缩空间是否有item会压缩为0宽度，如果有则假设这些item的宽度为0，重新计算压缩空间分配注意：当item中有内容时，待压缩item的最小宽度为content宽度示例：假设content宽度为300px，flex布局，里面有4个item，item的初始宽度分别为50px、100px、150px、200px。Q1：4个项目的实际显示宽度是多少？item1的flex-shrink设置为10；item4的flex-shrink设置为5；Q2：四项的宽度分别是多少？解：Q1：计算压缩空间宽度Compression=(50+100+150+200)px-300px=200px分配压缩空间4item宽度比例为1:2:3:4，初始flex-shrink为1unitweight宽度=200px/(1*1+2*??1+3*1+4*1)=20px第一项宽度=初始宽度-单位重量宽度*重量=50px-20px*1*1=30px第二项宽度=初始width-单位重量宽度*weight=100px-20px*2*1=60px第三项宽度=初始宽度-单位重量宽度*weight=150px-20px*3*1=90px第四项宽度=初始宽度-单位重量宽度*weight=200px-20px*4*1=120px需要重新计算吗？由于第2步计算出来的item宽度都大于等于0，所以不需要重新计算。因此，四个item宽度分别为30px、60px、90px、120px。Q2：计算压缩空间宽度compression=(50+100+150+200)px-300px=200px分配压缩空间4item宽度比例为1:2:3:4，item1和item4的flex-shrink为10，5.剩下的flex-shrink是1个单位重量宽度=200px/(1*10+2*1+3*1+4*5)=40/7px第1项宽度=初始宽度-单位重量宽度*重量=50px-40/7px*1*10=-7.14px需要重新计算吗？由于第一项的计算宽度为-7.14px<0，因此需要重新分配压缩空间来计算压缩空间宽度。由于上一步item1的宽度小于0，所以将item1的宽度取为0，重新计算压缩空间宽度Compression=(100+150+200)px-300px=150px分配压缩空间单位权重width=150px/(2*1+3*1+4*5)=6px第一项宽度=0第二项宽度=初始宽度-单位重量宽度*重量=100px-6px*2*1=88px第三项宽度=初始宽度-单位重量宽度*重量=150px-6px*3*1=132px第4项宽度=初始宽度-单位重量宽度*重量=200px-6px*4*5=80px因为步骤5计算的宽度需要重新计算吗大于等于0，所以不需要重新计算Calculation因此，四个item宽度分别为0、88px、132px、80px。可以查看示例注意：在item中添加文字后，宽度不能压缩为0，压缩空间的计算会比较复杂。
