Где использовать flex?

Question

[xonar]

Доброго вечера всем. Просьба не ругаться сразу.
"Изучил" флексбоксы, как они работают. Но, так и не понял, когда их нужно применять, а когда не нужно. В гугле каждый пишет по-разному.

На примере макета можете объяснить, где их задействовать? На макете (скрин приложу), я выделил красным цветом, где можно использовать, а точнее нужно флексы.

И если можно вкратце, порекомендуйте когда их стоит использовать в каких случаях, а когда нет.

Answer 1

[ⓒⓢⓢ]

флексы нужны для удобства расположения внутренних элементов.

Первый выделенный блок, какое удобство тут принесёт флекс?
По мне так никакого, тут только внешние отступы между элементами пригодятся.
Второй блок
Да, тут можно воспользоваться флексом, чтобы контролировать расположение и ширину дочерних элементов
Третий блок
Тут тоже не вижу удобств от флекса, центрирование блока можно и внешними отступами (margin)

Comments

[xonar]

В целом, если нет дочерних элементов, то флекс не используется. Так?

[ⓒⓢⓢ]

xonar, да

[ⓒⓢⓢ]

xonar, флексы хорошо подходят для вертикального выравнивания дочерних элементов и вариант в вашем втором блоке. В большинстве остальных случаях удобнее использовать что-то другое, - внешние\внутренние отступы, позиция и т.д.

[xonar]

ⓒⓢⓢ, Спасибо, очень подробно разъяснили, теперь понял.

Answer 2

[profesor08]

1. как хочешь, но нужды нет.
2. 50/50, разницы нет, но с флексами кода меньше будет, да и надежнее.
3. можешь использовать, но нужды нет.

Flexbox он для удобства, если тебе удобно, то используй, хоть везде, если не удобно, то не используй. Тут нет строгих правил. И вообще в вебе нет строгих правил. Развлекай себя как хочешь.

Comments

[xonar]

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

Спасибо за помощь)

[profesor08]

xonar, нет, обосрут в любом случае

Answer 3

[TheTrace]

Ну по сути, не везде его можно использовать у тебя, например в блоке в самом верху его просто подвинули влево и вверх от центра, в последней использовали flex-direction: column и justify-content. Подробнее в этой статье: https://tproger.ru/translations/how-css-flexbox-works/

Comments

[xonar]

Статью эту как раз и изучал, но всё равно не могу понять, почему в первом варианте не стоит использовать. Тут достаточно будет использовать position ?