flex：1===flex:1 1 auto（放大且缩小）

51 阅读 0 评论 34 点赞

我是靠谱客的博主动听冷风，最近开发中收集的这篇文章主要介绍flex：1===flex:1 1 auto（放大且缩小），觉得挺不错的，现在分享给大家，希望可以做个参考。

flex：1是（flex-grow：1、flex-shrink：1、flex-basis：auto）的缩写
flex-grow：设置的值为扩张因子，默认为0，剩余空间将会按照这个权重分别分配给子元素项目。
flex-shrink：flex元素仅在默认宽度之和大于容器的时候才会发生收缩。默认属性值为1，所以在空间不够的时候，子项目将会自动缩小。
flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）
flex:1===flex:1 1 auto（放大且缩小）。