原文链接:https://juejin.im/post/5de6379f6fb9a015fd699b41
总结:flex: 1 其实是flex-grow, flex-shrink, flex-basis的缩写
对应的值是:flex-grow: 1, flex-shrink: 1, flex-basis: 0%
flex-grow: 扩展,子元素宽度之和小于父元素宽度 那么子元素就会分配父元素剩余的宽度
flex-shrink: 收缩, 子元素宽度之和大于父元素宽度 那么子元素就会按照比列收缩
flex-basis: 是弹性盒子的基准值,在没有设置宽度的情况下宽度由content决定,如果content内容过长就会溢出外层容器,如果设置一个宽度,只要这个宽度小于外层容器的剩余宽度(一般设置为0,这样就可以保证百分之百小于剩余宽度) flex-grow就会起作用 自动分配剩余宽度,这样就可以保证flex-basis的宽度是外层容器的宽度而不是content的宽度,内容也就不会溢出