Как в моем случае использовать flexbox?

Question

[qqGrand]

Будьте добры, покажите на примере, как мне сверстать такой вариант


Мне каждую строку нужно в отдельный flex контейнер грубо говоря брать? Или это все делается за раз и флекс позволяет так распологать блоки?

С flex совсем дел не имел, вот мое первое знакомство и нужно срочно: Спасибо!

Answer 1

[Александр]

Можно вот так, размеры естественно свои подставить:

Comments

[dom1n1k]

Решение демонстрирует одну из самых распространенных ошибок новичков - игнор идеологии флексбокса и использование width вместо flex-basis. Не надо так.

Answer 2

[Михаил Власов]

https://codepen.io/whiled0s/pen/xmEaGj
Сделал на флексах по-быстрому, каждый блок - контейнер для контента, дисплей флекс у большого контейнера.

Comments

[Михаил Власов]

Нужные отступы уже сам задай, это второстепенно

Answer 3

[fesservl]

https://jsfiddle.net/0ys96t8b/

Comments

[fesservl]

https://www.youtube.com/watch?v=FLbvUFVr3bg

Answer 4

[Владислав Лысков]

каждая строка - флекс-контейнер

Comments

[Rustam Bainazarov]

Почему? Что мешает настроить flex-basis для нужных элементов отдельно в рамках одного контейнера?

[Rustam Bainazarov]

А, ну вот в ответе выше как раз так и сделано.

[Владислав Лысков]

SmthTo, адатировать геморнее

[Rustam Bainazarov]

Владислав Лысков, да не особо :))

Просто задать новое значение flex-basis при нужном медиа-запросе.

[uRoot]

SmthTo, вот в этом и заключается гемор. В случае с Владислав Лысков оно само будет это делать.

[Rustam Bainazarov]

CryNet, а это как, простите?

Если вы в одном контейнере задали дочерними элементам flex: 0 0 100%, во втором — 0 0 50%, а в третьем — 0 0 33%?

Вам всё равно будет нужно адаптировать. Если хотите использовать flex-grow и -shrink, то это будет равносильно непредсказуемому поведению в плане расширения и сужения габаритов, которое будет зависеть от контента внутри дочернего блока.

[Владислав Лысков]

SmthTo, в моём случае flex-basis и width не нужен, достаточно отступов и flex-direction

[Rustam Bainazarov]

Владислав Лысков, а как у вас элементы будут точно занимать 100, 50 и 33 процента? Вы же не знаете, сколько контента содержит каждый дочерний элемент. С учётом стандартного flex: 1, какой-то из этих элементов может быть больше других, если в них всех разный контент. И в любом случае это не особо решает проблему адаптивности, всё равно придётся использовать медиа-запрос.

[uRoot]

SmthTo,

flex: 0 0 100%

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

[Rustam Bainazarov]

CryNet, а, мм, а что с планшетами? К примеру, строка с тремя элементами на полной версии.

Получается, на планшетах на какой-то строке будет по два элемента, а на другой — только один и пустое пространство? И всё в целом будет косое какое-то.

Словом, решение с одним контейнером выглядит наиболее привлекательно + media-запросы, но тут нужно понять, что точно нужно автору.

[Владислав Лысков]

SmthTo, ты безусловно прав, но так или иначе мой вариант универсальньее в тех случаях, когда тебе "дизайнер" даёт макет в одной версии и более своего монитора он ничего не придусмотрел (а это скорее правило, чем исключение)

[uRoot]

SmthTo,

только один и пустое пространство?

Третий станет по центру. Это тоже будет достаточно красиво.

Answer 5

[coderxx]

оба варианта
в зависимости от деталей тот или другой вариант может быть предпочтительнее
но в вашем примере без разницы
цена вопроса - плюс/минус строчка кода

Answer 6

[Владислав Афанасьев]

https://wp-kama.ru/id_8045/flex-v-css.html
На будущее ..