CSS flex выровнять столбцы как в газете

Question

У меня есть такой пример кода:

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
}

.item {
  flex: 50%;
}

<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>
</div>

Мои элементы выровнены немного неправильно, поэтому item 2 справа от item 1, и мне нужно немного его изменить ...

Должно быть так:

item 1 | item 4
item 2 | item 5
item 3 | item 6

Каждый следующий элемент должен находиться под предыдущим элементом и должен быть обернут в столбцы.Возможно ли это с простым CSS и HTML?

JsFiddle здесь

Answer 1

вы можете добавить flex-direction: column, чтобы следующий элемент находился ниже элемента .4 будет рядом с 1.вот хорошая статья, которую вы можете прочитать https://gedd.ski/post/flex-wrap/

Answer 2

Немного измените ваш код,

Добавьте flex-direction: column; к .items и flex: 0 1; к .item

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
  flex-direction: column;
}

.item {
  flex: 0 1;
}

<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>

</div>