html - 无论 child 的宽度如何，都显示 child 之间的 flex 均匀空间

Question

我有两个具有 display: flex 和 justify-content: space-between 的行组件实例:

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

每个组件的children之间的间距会不同，因为children的宽度不同。在不更改子项顺序的情况下，如何确保两个组件实例在每个子项之间具有相同的空间量？在实例中，空间(例如长短之间的空间)不必相等——我想要的是两个实例的第一个和第二个子实例之间的空间相同，第二个子实例之间的空间相同和两个实例的第三个 child 是相同的。

Answer 1

这听起来很简单的解决方案，但它确实是，只需给类一个固定的宽度，然后将它放在 .component-row childrens 上。

.component-row {
  display: flex;
  justify-content: space-between;
}

.eq1 {
  width: 30%;
}
.eq2 {
  width: 20%;
}
.eq3 {
  width: 35%;
}

<div class="component-row">
  <div class="eq1" style="background-color: red;">looooooooooong</div>
  <div class="eq2" style="background-color: purple;">short</div>
  <div class="eq3" style="background-color: pink;">awdasdsdasad</div>
</div>

<div class="component-row">
  <div class="eq1" style="background-color: green;">looooooooooong</div>
  <div class="eq2" style="background-color: yellow;">srt</div>
  <div class="eq3" style="background-color: blue;">mediummm</div>
</div>