使用Flexbox实现等宽布局失败，请求技术支援

我看了你的代码，发现问题出在Flexbox的层级设置上——你现在把flex属性加到了.item本身，但要实现等宽布局，得让.item的父容器（也就是.row）变成flex容器，然后让每个.item作为flex子项来平分宽度。咱们来调整一下代码：

修正后的完整代码 #

.container { width: 600px; }
/* 让row成为flex容器，控制内部item的等宽布局 */
.row { 
  display: flex; 
  gap: 10px; /* 用gap代替margin-bottom，更优雅的间距控制 */
  margin-bottom: 10px; 
}
/* 每个item作为flex子项，设置flex:1来平分宽度 */
.item { 
  flex: 1; /* 关键：让每个item自动平分父容器的可用宽度 */
  border: 1px solid silver; 
  display: flex; 
  justify-content: space-between; 
  min-height: 60px; 
}
.item > .selector { display: flex; align-items: center; padding-left: 20px; }
.item > .label-text { background-color: silver; color: white; padding: 0 10px; display: flex; align-items: center; }

关键修改点说明 #

• 给.row添加display: flex：这是让内部的.item们能使用Flexbox布局的基础，没有这个，.item的flex属性不会生效。
• 用gap:10px代替.item的margin-bottom：既控制了.item之间的横向间距，又避免了margin可能带来的布局问题。
• 给.item设置flex:1：这个属性会让每个.item自动平分.row的可用宽度，不管里面的内容多少，都能保持等宽。你之前的flex:1 1 0其实也能生效，但前提是父容器是flex容器，而且要去掉width:100%（不然会强制占满整行，破坏等宽）。

这样修改后，不管你在.row里放2个、3个还是更多.item，它们都会自动等宽分配.container的600px宽度啦。

内容的提问来源于stack exchange，提问作者Zoltán Fekete