flex弹性布局中子元素flex的三个属性

• 子元素只写flex时，为以下3个属性的简写
• flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis 属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。优先级大于width、height

计算

这里以主轴方向为横轴来算

flex-grow

• 当子元素宽度之和不满父元素时：子元素宽度=本身宽度 + 剩余宽度 * (本身flex-grow值 / 全部子元素flex-grow和)，说白了就是按比例来瓜分剩下的宽度。

flex-shink

• 当子元素宽度之和超出父元素时：子元素宽度=本身宽度 - (超出父元素的宽度 * (本身宽度 * 本身flex-shrink值 / (全部子元素的 (flex-shrink * 本身宽度) 之和)
• 举例

 .box{
            display: flex;
            flex-direction: row;
            margin:100px auto;
            width:400px;
            height:200px;
            border:1px solid red;
 
        }
        .innerA{
            flex-basis:200px;
            height:100px;
            background:black;
             flex-shrink:0;
        }
        .innerB{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-shrink:0;
 
        }

最终A的大小为 自身宽度(200px)- A减小的宽度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px

简写

flex 取值为 none，则计算值为 0 0 auto

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

flex 取值为 auto，则计算值为 1 1 auto

.item {flex: auto;}
.item {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

.item {flex: 1;}
.item {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0%;
}

flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

.item {flex: 2 3;}
.item {
   flex-grow: 2;
   flex-shrink: 3;
   flex-basis: 0%;
}

flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

.item {flex: 2333 3222px;}
.item {
   flex-grow: 2333;
   flex-shrink: 1;
   flex-basis: 3222px;
}