如何用Flexbox实现酒店设施盒子等宽排列（含不满行场景）

当然可以实现，下面给你两种可行的方案：

方案一：调整Flexbox属性（纯Flex实现） #

你的问题根源在于给.amenity设置了flex-grow: 1，这会让最后一行的盒子自动拉伸填满剩余空间。修改方式如下：

1. 去掉.amenity的flex-grow: 1，改用flex: 0 1 14.5em，确保盒子不会被放大，仅在空间不足时缩小（这里因为flex-basis和min-width值一致，实际不会缩小）。
2. 给容器添加伪元素填充最后一行的空白，保证每行盒子均匀分布的同时，最后一行盒子不会被拉伸。

修改后的CSS代码：

.amenity-wrapper {
  margin: 0 auto;
  width: 96%;
  position: relative;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* 伪元素填充最后一行空白 */
.flex::after {
  content: "";
  flex: 0 1 14.5em;
}

.amenity {
  flex: 0 1 14.5em; /* 替换原flex-grow:1 */
  border: 1px solid #007aba;
  color: #007aba;
  padding: .4em .25em .25em;
  margin: 0 .5em .5em 0;
  white-space: nowrap;
  overflow: hidden;
}

方案二：使用Grid布局（更简单省心） #

Grid布局天生适配这种“自动填充、固定列宽”的场景，代码更简洁，效果更稳定：

修改后的CSS代码：

.amenity-wrapper {
  margin: 0 auto;
  width: 96%;
  position: relative;
}

.grid {
  display: grid;
  /* 自动填充列，每列最小宽度14.5em，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(14.5em, 1fr));
  gap: .5em; /* 替代margin控制盒子间距 */
  align-items: center;
}

.amenity {
  border: 1px solid #007aba;
  color: #007aba;
  padding: .4em .25em .25em;
  white-space: nowrap;
  overflow: hidden;
}

对应的HTML只需把.flex替换为.grid：

<div class="amenity-wrapper">
  <div class="grid">
    <div class="amenity"><i class="icon-<?php echo $key ?>"></i><span><?php echo $value ?></span></div>
    <div class="amenity"><i class="icon-<?php echo $key ?>"></i><span><?php echo $value ?></span></div>
    <div class="amenity"><i class="icon-<?php echo $key ?>"></i><span><?php echo $value ?></span></div>
    <!-- 更多设施盒子 -->
  </div>
</div>

两种方案都能实现需求：所有盒子宽度一致，最后一行的盒子不会被拉伸，完美适配不同数量的设施。

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