将表中的项目均匀地分布在表格中

Question

我想将李中的物品均匀分布，我该怎么做？我试过flexbox，但我不确定如何做到这一点。

#overzicht {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
}

span {
  display: inline-flex;
  justify-content: space-between;
}

<ul id="overzicht" class="list-group">
  <li class="list-group-item">
    <span>Name</span>
    <span>Address</span>
    <span>Status</span>
  </li>
</ul>

Answer 1

您应该将“display：flex”添加到要作为表格传播的元素的直接父级。

#overzight > li {
  display: flex;
  justify-content: space-between;
}

span {
  flex-grow: 1;
  flex-shrink: 0;
}

可以在此处找到适用于flexbox的精彩教程和备忘单：https://css-tricks.com/snippets/css/a-guide-to-flexbox/