当前位置: 首页 > Web前端 > CSS

详解flex布局项目属性flex--flex-grow和flex-shrink

时间:2023-03-30 22:07:31 CSS

Overview*如果flex属性的概念是非常属性,直接跳过本pass1。flex属性有flex-grow、flex-shrink和flex-basis的简写,默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值:auto(11auto)和none(00auto)。2、flex-grow属性定义item的放大比例,默认为0,即如果还有剩余空间,则不放大。如果所有项目的flex-grow属性都为1,它们将平分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,而其他项目的flex-grow为1,则前者将占用其他项目两倍的剩余空间。3、flex-shrink属性定义item的缩小比例,默认为1,即如果空间不足,item会收缩。如果所有item的flex-shrink属性都为1,当空间不足时,它们会按比例缩小。如果一个item的flex-shrink属性为0,其他item为1,前者在空间不足时不会收缩。4.flex-basis属性定义分配多余空间前item占用的主轴空间(mainsize)。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto,即项目的原始大小。可以设置为与width或height属性相同的值(比如350px),那么item将占据一个固定的空间。例1.通过flex-grow属性的比例计算求出左右的宽度

分析:由于子项的总宽度(300+200)小于容器的宽度(600),因子项框定义flex属性,所以剩余的宽度,则按照两个子项的flex属性中flex-grow值的比例平分。左:(600-300-200)/(1+3)*1=25;右:(600-300-200)/(1+3)*3=75;所以最终左右宽度分别为300+25、200+75.2,flex-shrink属性比例运算
分析:因为子项的总宽度(500+400)大于容器的宽度(600),factoritembox定义了flex属性,所以两个子item的实际宽度需要根据flex属性中的flex-grow值的比例来计算。公式为:原宽比收缩宽度左:500-300*(500*4/(500*4+400*1))=500-300*2000/2400右:400-300*(400*1/(500*4+400*1))=400-300*400/2400所以最后左右的宽度分别是500-250和400-50。1辆汽车;表示什么flex-grow属性计算示例flex-shrink属性计算示例