如何像表格一样在<li>内均匀分布元素？Flexbox实现求助

修改后的完整代码 #

#overzicht {
  max-height: 500px;
  overflow-y: auto;
  /* 移除ul上的display:flex，我们不需要它作为flex容器 */
}

.list-group-item {
  display: flex; /* 让li成为flex容器，控制内部span的布局 */
  justify-content: space-between; /* 子元素水平均匀分布，两端贴紧容器 */
  align-items: center; /* 可选：让元素垂直居中，视觉更协调 */
  gap: 10px; /* 可选：给元素之间设置固定间距，避免内容拥挤 */
}

span {
  flex: 1; /* 让每个span平分容器的可用宽度，确保内容长短不影响均匀占比 */
  text-align: center; /* 可选：让span内的文字居中，排版更整齐 */
}

<ul id="overzicht" class="list-group">
  <li class="list-group-item">
    <span>Name</span>
    <span>Address</span>
    <span>Status</span>
  </li>
  <!-- 可以添加更多列表项测试效果 -->
  <li class="list-group-item">
    <span>John Doe</span>
    <span>123 Long Street, Cityville</span>
    <span>Active</span>
  </li>
</ul>

关键调整说明 #

• 把flex容器从
  移到
  • ：我们要控制的是<li>内部三个<span>的布局，所以<li>才是需要设置display:flex的容器。
  • justify-content的选择：
    • space-between：两端元素贴住容器边缘，中间元素间距相等，适合需要对齐首尾的场景；
    • 如果你想要所有元素（包括两端）的间距都完全相等，可以换成justify-content: space-evenly；
    • 要是想让两端留一点空隙，中间间距一致，就用justify-content: space-around。
  • flex:1给：这个属性让每个<span>都能分配到相等的可用空间，哪怕某个<span>的内容很长，也不会挤压其他元素的位置，保证整体均匀分布。
  • 可选的优化属性：align-items: center让元素垂直居中，避免不同高度的内容导致排版混乱；gap可以给元素之间设置固定间距，让布局更透气。

  这样调整后，你的<li>内的元素就能完美实现均匀分布啦！

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