为何width:100%在flex-direction:row布局下无法生效？

问题描述 #

我的main容器包含两部分内容：

• 产品类型（手机、笔记本电脑）
• 品牌与产品

为实现二者横向排列，我给main设置了display: flex; flex-direction: row。之后构建设备行时，我给main加了width: 100%，给设备容器设置display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;，每个设备设置width: 25%，但容器始终无法拉伸。

改用grid布局（移除main的flex属性，添加display: grid; grid-template-columns）后布局恢复正常，但我不明白flex布局下为何失效。

原因解析 #

当main作为flex容器时，它的子元素（产品类型栏和品牌产品容器）默认属性是flex-shrink: 1、flex-grow: 0，且未设置flex-basis。这意味着品牌产品容器只会占据自身内容所需的宽度——即便你给它设置了width: 100%，这个100%是相对于它自身的“基础宽度”（而非父容器的宽度），自然无法拉伸占满剩余空间。

解决方案 #

给品牌产品容器添加flex: 1（等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%），让它自动填充main容器的剩余空间，内部设备布局就能正常生效：

/* 假设品牌产品容器的类为.product-container */
.product-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

修改后，main的flex布局可正常工作，设备容器会拉伸至满宽，内部25%宽度的设备也能正确换行排列。

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