如果子元素的宽度的总和超过父容器,flex-grow 将不生效。
父容器总宽度为 500px,现在为每个item的宽设置为300px
div1: 宽250px
div2: 宽250px
父容器总宽度为 500px,现在为每个item的宽设置为300px
同时定义了 item1 和 item2 的 flex-shrink 的属性分别为1和4。
100为 = |父容器宽度 - 子元素的总宽度| = |500 - 600| = 100
div1宽: 300px - 100/5*1 = 280px
div2宽: 300px - 100/5*4 = 220px
设置项目的 flex-shrink 为0
项目的 flex-shrink 设为0来看下不压缩
div1: 宽300px 不压缩
div2: 宽300px 不压缩