Проблема переноса во flexbox?

Question

[Денис]

Добрый день. Прошу помощи в такой вот задаче. Есть обычные блоки внутри flex контейнера ( 3 колонки, 2 ряда). Размеры блоков указаны в процентах.
Пример: codepen.io
Вопрос:
- как сделать так, чтобы блоки переносились на новую строку без медиа-запросов?
(у меня была идея использовать некую "стенку" с помощью фиксированного min-width, но мне показалось это не очень гибким вариантом)
- и вообще, стоит ли использовать фиксированные значения для flex элементов, если предполагается адаптивный дизайн?

Прошу прощения, если вопросы показались "атататата гугл знает,а ты нет"

Answer 1

[Сергей Горячев]

.item{
  width: calc(800px / 3);
}

Но вообще, лучше медиа-запросы.
Они придуманы, чтобы ими пользоваться.

Comments

[Денис]

Спасибо! Вижу, что не избежать фиксированных значений при подобной задаче.. Будем юзать медиа

Answer 2

[Артем]

Можно указать min-width, тогда на более маленьких мониторах блоки будут переноситься.
Если указать пропорции flex, то перенесенные блоки будут растягиваться в соответствие с экраном.