Почему многие современные сайты верстают на флексах?

Question

[Xveeder]

На таких крупных площадках как Themeforest многие шаблоны сделаны на "display-flex", очень часто вижу такое мнение что построение сеток на основе "float" или "inline-block" лучше, потому что флексы поддерживаются не всеми браузерами. Так ли это и почему в таком случае они так популярны?

UPD. Меня интересует, насколько можно положиться на это удобнейшее свойство? Т.е. я бы был счастлив верстать на флексах, но не уверен что это ко времени. При этом, в caniuse показано что флексы поддерживает большинство старых браузеров.

Answer 1

[Евгений Вольф]

очень часто вижу такое мнение что построение сеток на основе "float" или "inline-block" лучше, потому что флексы поддерживаются не всеми браузерами. Так ли это и почему в таком случае они так популярны?

Это действительно так. Но я Вам больше скажу, даже CSS как таковой (или HTML-5), поддерживается не всеми браузерами (IE-1 насколько я помню, CSS не поддерживал). Но я не думаю, что это повод отказаться от CSS или HTML5. И вообще, само по себе выражение "не всеми браузерами" - довольно размытое, что-то из области "не все продукты одинаково полезны".

и почему в таком случае они так популярны?

По тому, что они дают довольно большую гибкость, сокращают количество "случайностей" (неожиданного поведения элементов), такой код в целом более читаемый, чем "простыни" из float'ов, и так далее...

P.S. А ещё по тому, что FLOAT'ы были придуманы изначально не для того, для чего их в последствии приспособили, впрочем как и некоторые другие параметры/свойства/атрибуты...

Comments

[gleendo]

Евгений Вольф Flexbox не очень то и сокращает количество написанных свойств. Напишите что нибудь на флексах и на флоатах и увидите что строк кода почти одинаково +-
К тому же Flexbox как бы тоже изначально не для построения сеток был придуман.
И что еще за "Случайности", которые сокращаются при использование флексов?
И как код становится более читаемым? Это же просто список свойств, хоть на чем вы сверстайте, в любом случае простыня свойств будет читаться одинаково...
И где вы в CSS нашли параметры и атрибуты?

[Евгений Вольф]

И что еще за "Случайности"

Как пример "случайностей" - при нескольких float'ах подряд - и "float: right" - элементы ведут себя не совсем так как многие ожидают изначально. Оно конечно поддаётся логике, но тут чётко вырисовывается та сама проблема, которая называется "приспособили", танк тоже можно "приспособить" для того, что бы на нем на работу ездить, но гораздо комфортнее это делать на какой-нибудь "удобной" машине (легковой, например).

И как код становится более читаемым?

Например, код выравнивания элемента на флексах - куда более читаемый, чем набор костылей на float'ах с margina'ами, padding'ами и т.д.

Напишите что нибудь на флексах и на флоатах и увидите что строк кода почти одинаково +-

"Что нибудь" - тоже довольно расплывчатая формулировка. С ней априори невозможно поспорить.

К тому же Flexbox как бы тоже изначально не для построения сеток был придуман.

А кто говорил про сетки? Для сеток были придуманы таблицы (в типографике, изначально) которые в последствии успешно с тем же курсом перекочевали в HTML/CSS, а потом для этого (сеток) был придуман Grid system, который сейчас поддерживается, как раз не всеми "современными" браузерами и ещё не доведен "до ума" полностью.

Это же просто список свойств, хоть на чем вы сверстайте, в любом случае простыня свойств будет читаться одинаково...

Под читаемостью - я подразумевал восприятие кода "по назначению". У flex'ов % такого кода гораздо выше, чем у набора "костылей" из float'ов и всяческих отсупов, как пример.

[Максим]

Ostin1, за то на table-cell этот space-between делается

[gleendo]

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

[Максим]

Ostin1, Не совсем так ... борьба старого с новым будет всегда... то что уже зарекомендовало себя всегда будет противить новым технологиям ...а верстальщики мы потому что делаем всё одинакого для всех пользователей , для тех кто пользуется Midori и так же тех кто на IE8-10 итак же для Apple Safari

[Максим]

Ostin1, я уже обеспечил себя... так что ваш высер не в тему

[Максим]

Ostin1, лексус

[Максим]

Ostin1, я не только верстаю ...так что ...

[gleendo]

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

[Максим]

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

[gleendo]

Ostin1, где там таблицы?

[Максим]

Ostin1, я не бросался ! вы первый оскорбили ...

[gleendo]

Ostin1, Что?! Flexbox чтобы разделить контент от стилей? Это как?

[Максим]

Ostin1, вы школьник что ли ? каникулы вроде не начались ещё ... какие то понты корявые .. троли какие то

[gleendo]

Ostin1, один класс .clearfix. Оо да, трагедия. Что еще? Какие еще "прочие штуки" в виде костылей костыльных?

[Монти Пайтон]

iamevg_,

дин класс .clearfix.

да, это трагедия.

[gleendo]

Ostin1, обоснование можно услышать что это трагедия? и что на счет остальных костылей? так и не услышал...

[Максим]

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

[Монти Пайтон]

iamevg_, нет, разговор окончен, то вы говорите что ничего нет разницы, то потом разве это трагедия, и так вас каждый будет учить? Имейте совесть, не отбирайте у людей время, просто пойдите посмотрите видео, там вам объяснят какую революцию делает флексбокс, и почему бутстрап на нём даже делают. Цените время "тостеровчан" и не вынуждайте объяснять вам то что легко гуглится

[gleendo]

Ostin1, Так говорят когда нечего по сути ответить...все ясно с вам. Почти час тут дискуссировали, а теперь вы вдруг занятой стали, время у вас отнимают. Признайтесь уже что вам нечего ответить и все.
PS. Я тогда буду верстать на гридах, а вас как обезьянку найму за 5 долларов чтобы вы мне fallback на флексах сделали.

[Монти Пайтон]

iamevg_, вам всё ответили.

[gleendo]

Ostin1, не ответили...у вас же нет времени отвечать за свои слова

[gleendo]

Ostin1, при чет тут двор или 90е? Я к вам стараюсь уважительно обращаться.

[gleendo]

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

[Евгений Вольф]

iamevg_,

ничего конкретного, по факту отвечающего на мои вопросы не увидел...одна вода, к тому же местами не особо правдоподобная.

Не способность видеть ответы на свои вопросы - не говорит об их отсутствии (ответов). Она говорит лишь о неспособности видеть ответы :)

Откровенно говоря, не понимаю, что именно Вы хотите услышать "конкретного" и в массах комментариев потерял основную мысль Вашего вопроса. Что "лучше" для вёрстки float или flex? - думаю для и так очевидно, по крайней мере для многих (кто хорошо знаком и с тем и с другим) Что нужно знать? - и то и другое, т.к. есть масса мест, где float можно (нужно) использовать по его прямому назначению, по этому, отказаться от float'ов вообще - никто не призывает.

Касательно поддержки браузерами - лично мы браузеры ниже IE-11 не рассматриваем вообще, возможно по тому, что пользователи с "калькуляторами" на которых Windows-98 (т.к. ума установить Linux - не хватает, а более новый Windows на эту "рухлядь" не ставится) и браузер аки IE-5.5, а так же по тому, что по статистике сайта caniuse.comFLEX'ы поддерживаются более чем 96% браузеров. И вообще, говоря про поддержку чего-то браузерами, мы можем очень далеко уйти, вплоть до "консольных браузеров", или браузеров которыми пользуются 0.01% пользователей и так далее... По моему сугубо личному мнению, из-за 3-4% пользователей у которых по какой-то неведомой причине нет поддержки FLEX'а - не заслуживают того, что бы из-за них страдали все остальные, начиная от верстальщика, заканчивая конечными пользователями, у которых FLEX - поддерживается. Так как FLEX'ы позволяют выравнивать контент не только "слева/справа", причем довольно "топорно" (*в случае с FLOAT'ами), они позволяют выравнивать элементы массой разных способов и создавались изначально для того, для чего их чаще всего и используют. Углубляясь в вопросы "3% пользователей, у которых может работать не правильно, или не работать вообще", как я уже говорил, мы можем уйти очень далеко, в т.ч. добраться до пользователей с ограниченными возможностями, у которых плохое зрение, и тогда мы будем делать сайты в режиме выской контрастности, а так же есть 3-5% у которых отключен JavaScript, столько же пользователей которые отключают Cookie и так далее... - всё это - проблемы тех самых пользователей и не повод отказываться от JavaScript, Cookie и так далее.

Более того, возьмём для примера, YouTube, я думаю популярность данного сайта, его посещаемость, авторитет авторов и пр. - обсуждать и доказывать - не придётся. Что мы видим:
1. YouTube использует FLEX'ы
2. YouTube не работает с отключенным JavaScript

Если для Вас такие крупные и авторитетные источники (в данном случае - сайты/проекты и их авторы) всё ещё не повод использовать FLEX'ы (или JavaScript :) там где их можно/нужно использовать, не думаю, что кто либо сможет привести более веские факты.

[gleendo]

Евгений Вольф, лень читать все, начал, но опять вода вода вода...
А на счет YT. Вы думаете google не использует fallback'и при разработке?
Для него ваши "3%" очень большая цифра

[Евгений Вольф]

Вы думаете google не использует fallback'и при разработке?

Судя по тому, что при отключенном JS'e сайт не работает вообще никак - видимо не использует. А у Вас есть доказательства какие-то, что он их использует или теория на тему, что он их использовать должен и

опять вода вода вода...

?

Для него ваши "3%" очень большая цифра

- неработоспособность сайта с отключенным JS - говорит об обратном.

[Монти Пайтон]

Er Code,

вы пользуетесь NPP

а это тут при чём, в чём открыть файл, если вы об IDE разных, то у меня они все стоят которые только возможны, и VSCode, и Sublime, Brackets, WebStorm и тому подобное всех цветов и размеров, к чему вы вообще это сказали, тем что вы пользуетесь чемто одним?

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

P.S. у вас видать проблемы со здоровьем.

Answer 2

[myaca]

Flex!

caniuse.com/#search=flex

96%+ поддержка браузерами... Как мне кажется, float следует использовать только в редких случаев, когда поддержка старых браузеров действительно важна, но вообще это, конечно, нужно исходить из проекта/заказчика/etc