flex包含三个属性:flex-grow,flex-shrink,flex-basis
flex-grow: 默认值为0,代表元素的放大比例,当一个容器有多余的空间时,设置容器内某个元素的放大比例,该元素会对多余空间根据设置的比例分配大小
flex-shrink:默认值为1,代表元素的缩小比例,当空间不足时,多个元素会按照比例同样缩小,如果设置某个元素这个值为0,代表空间不足时该元素不缩小
flex-basis:代表元素再分配多余空间前所占比例,默认值auto等于元素本身大小不变
flex设置为1等同与flex-grow设置为1,元素分配剩余空间时按照设置的值进行等比例分配
.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}