无论孩子的宽度如何，在孩子之间都显示出均匀的挠性空间

Question

我有两个具有display: flex的相同行组件的实例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>

每个组件的子代之间的间距将有所不同，因为子代具有不同的宽度。 在不更改子代顺序的情况下，如何确保两个组件实例在每个子代实例之间具有相同的空间？ 在实例内，空间（例如，长短之间的空间）不必相等-我想要的是两个实例的第一个和第二个孩子之间的空间相同，而第二个之间和两个实例的第三个子对象相同。

Answer 1

听起来很简单的解决方案，但是，只需在类上提供固定的宽度，然后将其放在.component-row子级上即可。

 .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> 

Answer 2

最明显的是给每个项目指定一个宽度，尽管如果您不想要或不想要， flexbox不是最好的解决方案，而grid是。

由于CSS Grid缺乏良好的浏览器支持，因此CSS Table没有，并且是完成此任务的理想选择。

 .component-container { display: table; width: calc(100% - 40px); } .component-row { display: table-row; } .component-row div { position: relative; display: table-cell; border: 1px solid gray; } .component-row div:nth-child(2) { left: 20px; } .component-row div:nth-child(3) { left: 40px; } 

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