Flex переместить элементы той же ширины на следующую строку

Question

Я пытаюсь добиться следующего с помощью CSS3 flex:

Все блоки имеют ширину 33% и по 3 на строку.У меня нет div для строк, только блоки, и те, которые не помещаются, должны двигаться ниже.

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Мой CSS:

.wrap {
  display: flex;
  flex: 1;
}

.block {
  display: flex;
  flex-direction: column;
  flex: 1 0 33%;
  width: 33%;
}

Любой блок после третьего перемещается в нижнюю часть, что я и хочу, но он растягивается на 100% вместо сохранения 30% ширины.Если во втором ряду два блока, они растягиваются на 50% каждый ...

Как заставить их все остаться на 33%?

Примечание: HTML-код является динамическим и должен оставатьсятот же самый.Я не могу обернуть каждые 3 блока подряд.

Answer 1

Есть несколько вещей, которые нужно изменить, и несколько других ненужных, однако, поскольку я не знаю, как будет выглядеть полный шаблон, я отмечу это в комментариях.

.wrap {
  display: flex;
  flex: 1; /* unnecesary */
  flex-wrap: wrap;

  /* the following styles are just so the result is visible */
  background-color: blue;
}

.block {
  display: flex; /* unnecesary, only the container needs to be flex */
                 /* unless this is another flex container */
  flex-direction: column; /* also unnecesary unless it's for purposes not shown in the example */
  width: 33.3333%;

  /* the following styles are just so the result is visible */
  height: 20px;
  background-color: red;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 2

Используйте свойство Flex-based следующим образом

.wrap {
  display: flex;
  flex-flow: wrap;
}
.wrap .block{
  flex-basis: 33.33%
}

<div class="wrap">
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
 </div>