无需百分比，如何用Flex实现三列容器内Div的水平均分？

当然有更优雅的解决办法！你完全不用纠结百分比的计算（尤其是多列场景，比如7列时手动算百分比既麻烦又容易有精度问题），Flex布局本身就提供了完美的工具——flex: 1 属性。

核心原理 #

flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，作用是：

• flex-grow: 1：让每个子元素平等地分配父容器的可用剩余空间
• flex-basis: 0%：确保所有子元素的初始基准宽度一致，避免内容长度影响分配比例
• flex-shrink: 1：当父容器空间不足时，子元素会等比例收缩

这样不管你有3个、7个还是任意数量的子元素，它们都会自动均分父容器的100%宽度，完全不用手动设置百分比。

修改后的实现代码 #

.container {
  display: flex;
}
.left-div, .middle-div, .right-div {
  display: flex;
  justify-content: center;
  flex: 1; /* 关键属性，替代width:33.3% */
}

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<style>
.container {
  display: flex;
}
.left-div, .middle-div, .right-div {
  display: flex;
  justify-content: center;
  flex: 1;
  /* 可添加边框方便查看均分效果 */
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="left-div"> Left </div>
<div class="middle-div"> Middle </div>
<div class="right-div"> Right </div>
</div>
</body>
</html>

为什么这个方案更好？ #

1. 无需计算：不管子元素数量怎么变，都不用调整百分比，动态场景下更省心
2. 避免精度问题：解决了33.3%这类近似值可能导致的微小间隙或容器溢出问题
3. 内容无关：即使子元素内容长度不同，依然能保持均分宽度，内容会在自己的区块内居中（不会像justify-content: space-between那样把内容分散到两端）

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