如何用CSS实现不同父元素下项目的等间距对齐？

希望在不为按钮设置宽度的前提下，让不同父元素中的按钮实现等间距排列，现有代码未达到预期效果，需在给定HTML结构下实现如图所示的布局：

现有代码 #

HTML #

<div class="container">
  <div class="buttons">
   <button>test</button>
   <button>test</button>
   <button>test</button>
   <button>test</button>
 </div>
 <button class="outer">test</button>
</div>

CSS #

.container{
  display:flex;
  width:100%
}
.buttons{
  display: flex;
  width: 75%;
  justify-content: space-between;
}
.outer{
  margin-left:auto
}

解决方案 #

可以利用CSS Grid的display: contents属性，让.buttons容器的子元素直接参与外层Grid布局，从而实现5个按钮的等间距排列，无需设置按钮宽度：

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  gap: 0; /* 若需要固定间距可设置具体值，如1rem，不设置则自动均分容器空间 */
}

.buttons {
  display: contents; /* 使内部按钮直接成为Grid容器的子项 */
}

button {
  flex: none; /* 可选：避免按钮被拉伸变形 */
}

原理说明 #

• display: contents会让.buttons容器本身脱离布局流，其内部的4个按钮会直接成为.container的Grid子元素，和.outer按钮一起组成5个Grid项目。
• grid-template-columns: repeat(5, 1fr)将容器宽度平均划分为5份，每个按钮占据1份空间，自然实现等间距排列，且无需为按钮设置固定宽度。

若需要按钮之间保留固定间距，只需调整.container的gap属性即可，比如设置gap: 1rem，此时按钮仍会自动适应剩余空间保持等宽排列。

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