Решение демонстрирует одну из самых распространенных ошибок новичков - игнор идеологии флексбокса и использование width вместо flex-basis. Не надо так.
Если вы в одном контейнере задали дочерними элементам flex: 0 0 100%, во втором — 0 0 50%, а в третьем — 0 0 33%?
Вам всё равно будет нужно адаптировать. Если хотите использовать flex-grow и -shrink, то это будет равносильно непредсказуемому поведению в плане расширения и сужения габаритов, которое будет зависеть от контента внутри дочернего блока.
Владислав Лысков, а как у вас элементы будут точно занимать 100, 50 и 33 процента? Вы же не знаете, сколько контента содержит каждый дочерний элемент. С учётом стандартного flex: 1, какой-то из этих элементов может быть больше других, если в них всех разный контент. И в любом случае это не особо решает проблему адаптивности, всё равно придётся использовать медиа-запрос.
CryNet, а, мм, а что с планшетами? К примеру, строка с тремя элементами на полной версии.
Получается, на планшетах на какой-то строке будет по два элемента, а на другой — только один и пустое пространство? И всё в целом будет косое какое-то.
Словом, решение с одним контейнером выглядит наиболее привлекательно + media-запросы, но тут нужно понять, что точно нужно автору.
SmthTo, ты безусловно прав, но так или иначе мой вариант универсальньее в тех случаях, когда тебе "дизайнер" даёт макет в одной версии и более своего монитора он ничего не придусмотрел (а это скорее правило, чем исключение)
оба варианта
в зависимости от деталей тот или другой вариант может быть предпочтительнее
но в вашем примере без разницы
цена вопроса - плюс/минус строчка кода
Простой
