Отключить гибкий интервал

Question

У меня есть список элементов, которые я хочу отобразить, и я использую flex-wrap.

Но моя проблема в том, что столбцы (после первого) выравниваются в центре оставшегося пространства.вместо того, чтобы придерживаться первого столбца.

.items {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 500px;
}

.items .item {
  font-size: 5rem;
  border: 1px solid grey;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
  width: 20rem;
  text-align: center;
}

<div class="items">
  <div class="item">
    #1
  </div>
  <div class="item">
    #2
  </div>
  <div class="item">
    #3
  </div>
  <div class="item">
    #4
  </div>
  <div class="item">
    #5
  </div>
</div>

https://codepen.io/anon/pen/oyjmaV

Есть идеи по решению проблемы?

Answer 1

Причина, по которой это происходит, в том, что начальная настройка гибкого контейнера установлена ​​на align-content: stretch, что затем заполняет все оставшееся пространство.

Вы можете добавить align-content: flex-start, чтобы переопределить этоповедение по умолчанию.

Обновлено Codepen: https://codepen.io/anon/pen/wXKOQy