html - 使用窄间隙的 Flexbox 将列表拆分为 3 组

Question

我正在尝试将列表分成 3 组。

我有类似的东西

.card {
    height: 200px;
    display: flex;
  }
  
  .details-container {
      flex: 1 1 60%;
      display: flex;
      flex-direction: column;
  }
  
      .items {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
        margin: 20px;
        height: calc(100% * (1 / 3) - 10px - 1px);
          list-style: none;
      }

  <div class="card">
    <div class="img-container">
    </div>
    <div class="details-container">
      <div>Header</div>

      <ul class="items">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
      <a class="view-all-details button is-primary">View All Details</a>
    </div>

这确实如我所愿，但您会看到列表之间存在巨大差距。我也试过“divs”，但仍然是同样的问题。

Answer 1

可以考虑align-content减少差距然后调整 flex 元素的边距:

.card {
  height: 200px;
  display: flex;
}

.details-container {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;

}

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content:center; /*OR flex-start if you want to align to the left*/
  margin: 20px;
  height: calc(100% * (1 / 3) - 10px - 1px);
  list-style: none;
}
.items > * {
  margin:0 10px;
}

<div class="card">
  <div class="img-container">
  </div>
  <div class="details-container">
    <div>Header</div>

    <ul class="items">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
    <a class="view-all-details button is-primary">View All Details</a>
  </div>