flex属性

flex:1其实是一个简写 是由三个属性合并

1.flex-grow: 也就是剩余空间的占比
2.flex-shrink: 如果宽度超出容器的剩余空间的 就会自动缩小 也就是控制缩放 3.flex-basis: 其实就是子元素的宽 但是优先级高于width 默认是auto自动

flex: 1其实就是:

.item {
    flex-grow: 1; // 占比一份
    flex-shrink: 1; // 超出父盒子的话自动缩放调整内容
    flex-basis: auto; // 宽度自动
}