Разделить список на группы из 3 с Flexbox с узким зазором

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, чтобы уменьшить разрыв, а затем отрегулировать запас по гибким элементам:

.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>