flex:1的含义 (超级详细)

flex : 1 其实是代表3个属性的简写：flex-grow、flex-shirnk、flex-basis，这3个属性是可以单独进行设置的

当设置了 flex:1 属性时，代表 flex-grow: 1、flex-shrink：1、flex-basis：0%

• flex-grow：该属性定义项目放大的比例，取值越大，代表向父级索取的宽度越大，默认值为1
• flex-shirnk：该属性定义项目缩小的比例，取值越大，代表缩小的比例越大，默认值为1，该属 性常用来当子元素的宽度超出父元素的宽度时，通过设置flex-shirnk属性让子级的宽度不超过父级宽度，达到自适应缩小的效果
• flex-basis：该属性定义在平分剩余空间之前，项目在主轴上占据的空间大小位置，默认值为0%（ 注意：当设置了flex-basis属性之后，该元素下的子级元素的 width 属性不在生效，最终子级盒子的宽度是通过flex-grow属性设置的 放大比例）

接下来结合代码分析: 左侧是结构，中间是样式，右侧给box下的div统一设置了 flex : 1 属性

借助浏览器控检查元素可以发现，当设置了 flex:1时，可以看到div的样式中多了flex：1属性，展开就是刚刚上述所说的3个属性

 注意：当设置了flex：1时，原先给元素设置的width属性是不会生效的

因为当设置了flex：1时，其实是代表3个属性的简写：flex-grow、flex-shrink、flex-basis，

而flex-basis：0%属性作用到元素时，相当于元素的宽度都变为 0 了，如果父盒子的宽度此时是300px，那么现在每个子盒子的宽度都是 0px，此时在给每个div设置 flex-grow:1，意味着将平分父元素的宽度，那么每个子盒子将会得到 100px，此时就实现了平分父元素宽度的效果，每个子盒子的宽度都是一样的

 在来看以下代码：这里仅仅只设置了 flex-grow:1和flex-basis: 0%，没有设置flex-shrink属性，同样也实现了，子级平分父级宽度的效果

 虽然说只设置 flex-grow:1和flex-basis: 0%两个属性，也可以实现效果

但是推荐加上 flex-shrink属性，来防止万一子级宽度超出了父级盒子的宽度，通过flex-shrink属性来按比例缩小子级盒子，达到不超出父级盒子宽度的效果！

以上就是flex:1具体的含义 ~ ~ ~ :）：）