Flex容器2个固定宽元素外3个子元素如何自动平分剩余宽度？

你可以通过Flex布局的flex系列属性实现需求，只需修改少量CSS即可：

• 给固定宽度的.logo和.about-us添加flex-shrink: 0，避免容器宽度不足时这两个元素被压缩，保证固定宽度始终生效
• 给普通的.item元素设置flex: 1，该属性等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，会让元素优先平分扣除固定宽度元素后的剩余空间，不会被自身内容撑开宽度

额外修正：你原有代码中.item的dispaly: flex存在拼写错误，需改为display: flex

修改后的完整CSS代码如下：

.container {
  display: flex;
  width: 100%;
  background-color: black;
}

.item {
  display: flex;
  height: 200px;
  flex: 1;
  background-color: red;
}

.logo {
  width: 180px;
  flex-shrink: 0;
  background-color: green;
}

.about-us {
  width: 50px;
  flex-shrink: 0;
  background-color: blue;
}

修改后容器总宽度100%，扣除logo和about-us的固定宽度后，剩余宽度会平均分配给三个普通item元素，完全符合你描述的计算逻辑。

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