CSS Flexbox使用flex-grow、flex-shrink时后两个div不显示求助

• Flex子元素的尺寸由flex-grow、flex-shrink、flex-basis三个属性共同决定，三者默认值为0 1 auto。你的四个子元素都没有内容，也没有设置width或flex-basis，所以默认基础宽度为0。
• flex-grow的作用是分配容器的剩余空间，仅当容器有多余可用空间时生效。你给前两个盒子设置了flex-grow:1和flex-grow:2，二者会按1:2的比例瓜分整个容器的全部宽度，直接占满了所有可用空间。
• 后两个盒子的flex-grow为默认值0，不会分配到剩余空间，自身基础宽度又为0，自然不会显示。而flex-shrink的作用是容器空间不足时按比例收缩子元素，当前场景下根本没有触发shrink的条件，所以你设置的flex-shrink完全没有生效。

场景1：四个盒子按比例分配容器宽度 #

如果你想让四个盒子都按比例展示，给后两个盒子也设置对应的flex-grow值即可，示例配置：

#box-1 {
  background-color: dodgerblue;
  height: 50px;
  flex-grow: 1;
}
#box-2 {
  background-color: orangered;
  height: 50px;
  flex-grow: 2;
}
#box-3 {
  background-color: dodgerblue;
  height: 50px;
  flex-grow: 1;
}
#box-4 {
  background-color: orangered;
  height: 50px;
  flex-grow: 1;
}

场景2：测试flex-shrink属性效果 #

flex-shrink只有在所有子元素的总基础宽度大于容器宽度时才会生效，你需要先给所有子元素设置固定的基础宽度，让总宽度溢出容器：

#box-container {
  display: flex;
  height: 300px;
  width: 800px; /* 固定容器宽度，方便测试 */
}
#box-1 {
  background-color: dodgerblue;
  height: 50px;
  flex-basis: 300px; /* 设置基础宽度 */
  flex-shrink: 1;
}
#box-2 {
  background-color: orangered;
  height: 50px;
  flex-basis: 300px; /* 设置基础宽度 */
  flex-shrink: 1;
}
#box-3 {
  background-color: dodgerblue;
  height: 50px;
  flex-basis: 300px; /* 设置基础宽度 */
  flex-shrink: 2; /* 收缩比例更高，空间不足时会缩得更小 */
}
#box-4 {
  background-color: orangered;
  height: 50px;
  flex-basis: 300px; /* 设置基础宽度 */
  flex-shrink: 1;
}

四个盒子总基础宽度为1200px，比容器的800px多了400px溢出，此时就会按照flex-shrink的比例收缩各个盒子，你设置的属性才会生效。

通用建议 #

实际开发中建议用flex简写属性同时设置三个值，避免默认值带来的布局异常，比如flex: 1 1 200px就代表flex-grow:1、flex-shrink:1、flex-basis:200px，可读性和兼容性更好。

内容的提问来源于stack exchange，提问作者samira