嘿，我来帮你理清楚这个问题～ 当你设置display:flex后子元素没占满容器，大概率是没正确配置flex子项的flex属性，或者容器本身的宽度设置有问题，下面分情况给你拆解：

最常见的原因：子元素默认不会主动拉伸 #

Flex子项的默认样式是flex: 0 1 auto，翻译过来就是：

• flex-grow: 0：不会主动占据容器的剩余空间
• flex-shrink: 1：空间不够时会自动缩小
• flex-basis: auto：宽度由自身内容决定

所以如果想让三个div均分容器宽度，最简单的做法是给子元素设置flex: 1：

/* 容器样式 */
.container {
  display: flex;
  width: 100%; /* 确保容器占满你期望的宽度，比如屏幕宽度 */
}

/* 子元素样式 */
.item {
  flex: 1; /* 三个元素会自动平分容器的可用宽度 */
  box-sizing: border-box; /* 关键！防止padding、border撑宽元素导致总宽度溢出 */
}

如果要精确控制33%宽度 #

如果你想严格让每个子元素占33%（而不是灵活均分），可以这样写：

.item {
  flex: 0 0 33.333%; /* flex-grow:0 不拉伸，flex-shrink:0 不缩小，flex-basis:33.333% 基础宽度 */
  box-sizing: border-box;
}

注意这里用33.333%而不是33%，是为了避免三个33%加起来不够100%导致的空隙。如果需要子元素之间有间距，别用margin（会导致总宽度超过100%换行），可以给容器加gap: 10px（根据需求调整间距）。

额外检查点 #

• 确保你的容器（比如包裹三个div的父元素）本身有足够的宽度，比如如果容器直接放在body里，要给html, body设置width: 100%; margin: 0;，避免默认的margin导致容器宽度不足。
• 子元素有没有设置固定宽度？如果子元素写了width: 200px这种固定值，会覆盖flex的分配逻辑，记得去掉或者配合flex属性使用。

内容的提问来源于stack exchange，提问作者Rafael López Martínez