Flexbox vs float?

Question

[Vasing]

Познакомился с чудесным методом flexbox, до этого момента работал лишь с float и теперь считаю что от float можно избавиться, или не стоит?
2)Где flexbox лучше чем float и наоборот?
3)Где не нужно использовать flexbox/float?

Answer 1

[zooks]

Flexbox нужно использовать всегда.
В случае старых IE вставляем условные комментарии с css-фиксами на старых float-ах под этот недобраузер.

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->

Float же предназначен для обтекания блока текстом.

Comments

[Evanre]

Не всегда это поможет. На собственной практике имею несколько случаев когда последняя Mozilla или Safari начинает выдавать треш. Полностью с Вами согласен, но с одним уточнением - flex-direction: column использовать как можно реже.

[chelkaz]

До сих пор много родных браузеров мобильных и планшетов не понимают полностью FLEX Пришлось отказаться и работать по старинке, так как практика показала, что костыли писать под разные браузеры дольше и сложнее. До сих пор еще не все поддерживают calc и тот же table-cell. Хотя уже 2017 год)))

[Лучник *range attack +10*]

Flexbox нужно использовать всегда.

zooks аргументируйте

Answer 2

[Ivan Bogachev]

2) Flexbox лучше, чем float, практически везде - это более гибкий и функциональный инструмент, особенно в умелых руках, но...
3) Flexbox не нужно использовать, если вам нужна поддержка разных браузеров (в первую очередь это касается IE): как можно увидеть IE11 и то имеет не полную поддержку, что уж говорить про более ранние версии, а добавлять скрипты ради него - это не комильфо.

Comments

[Vasing]

А если верстка нужна лишь для Chrome?

[Сергей Протько]

Vasing: тогда флексбоксы.

[Ivan Bogachev]

Если только для хрома - вы самый счастливый верстальщик на земле) При таком условии можно экспериментировать с новыми технологиями как угодно

[Vasing]

Сергей Протько: Спасибо

[Vasing]

Ivan Bogachev: Спасибо

[Vasing]

Сергей Протько: Посмотрел адаптивность Toster.ru, Тут левая колонка зафлоачена влево, а центральная и правая колонки с атрибутом flexbox?

Answer 3

[dom1n1k]

По поводу того, что flex лучше всегда - это конечно чушь. Есть много простых ситуаций, когда он не дает никакого профита, тогда как старый добрый float решает проблему целиком. Флекс, конечно, тоже решит - но с побочными эффектами в виде неполной кроссбраузерности.
Предложения при этом делать фоллбеки на флоатах умиляют - если всё равно их делать, так не проще ли ими и ограничиться?!

В итоге, ответ на вопрос очень простой - flex нужно использовать там, где он дает конкретные преимущества. Самое очевидное - нужно автораспределение ширины блоков с подстройкой к ширине контента. Или вам нужно менять порядок блоков (свойство order).
Если ничего этого не планируется - flex не нужен! Сейчас уже наплодили сеток и "фреймворков", где flex используется фактически для имитации float-ов! Ну типа же стильно, модно, молодежно. Я ж крутой разработчег, не хухры-мухры.

При верстке каждого блока нужно задавать себе вопрос: "я использую flexbox, чтобы что?" Если на вопрос есть четкий ответ - да, нужно использовать. Если только бла-бла типа "ну это современно, прогрессивно и пр" - использовать старые железобетонные приёмы.

Comments

[trevoga_su]

> Ну типа же стильно, модно, молодежно.

причем тут это? float он по сути не для каркасной верстки предназначен, у него совершенно другая задача.

[dom1n1k]

Предназначен, не предназначен - это тоже общие слова. Мир html/css вообще очень несовершенен. Важно, что работает на практике. Float - работает.

[zooks]

"Старый добрый" float нужно постоянно clear-ить. Неполная кроссбраузерность - это миф, выгодный разработчикам, которые никак не переучатся на новую верстку. Сейчас поддерживается так же широко как и SVG - 94% браузеров. Фоллбеки же делаются только для основных элементов макета - т.н. "каркаса". Так что с такими взглядами можно и дальше сидеть на "железобетонном" HTML 4 и верстать на дивах с флоатами, а потом в один прекрасный день окажется что весь мир ушел далеко вперед.

[dom1n1k]

zooks: Пользователю глубоко плевать, куда движется мир в сознании веб-разработчика - у него в голове собственный мир, и причем у каждого свой. И в тех пользовательских мирах слова типа flexbox, gulp, webpack, es6, react... стоят примерно на 325-ом месте по значимости. А сайты делаются для пользователей, включая те "незначительные" несколько процентов.

[dom1n1k]

И, кстати, по аналогии можно сказать, что повсеместная поддержка flexbox - это миф, выгодный тем разработчикам, которые не умеют/не хотят решать проблемы в своей работе, а лихо перекладывают их на пользователей. Не тот браузер? Свободен!

* На самом деле я так не думаю, это просто такая же глупая крайность, как заявление выше :)

[zooks]

dom1n1k: Из контекста ясно, что речь идет о мире разработки, а не о пользователях с IE8. Скажите, вы wap-сайты до сих пор поддерживаете? А то тоже найдется процент пользователей с java-телефонами. А еще надежнее сайты на таблицах. Ведь респонсив тоже не нужен? Иначе ведь и представление о железобетонном мире ПК на Windows может разрушиться.

Касательно комментария об ущемленных в правах ретроградах. Тут все честно: не хочешь обновить браузер - получай упрощенную версию с базовым функционалом. Зачем делать красоты для небольшой кучки людей, которым это не нужно. Лучше позаботиться о семантике и разметке для слабовидящих.

[dom1n1k]

Удивительно, но этот ответ продолжает набирать лайки даже в 2021 году.
Он был актуален на момент написания (год эдак ~2016). На текущий день флекс повсеместно вариант по умолчанию. Гриды тоже используются, в режиме progressive enchancement. Верстку на флоатах/таблицах стоит рассматривать только в редчайших случаях, если это обусловлено какими-то особыми причинами.

Answer 4

[Фёдор Ананин]

Давайте рассуждать логически:
1) Flexbox в разы удобнее флоатов, таблиц и display:inline-block в 95% случаев
2) Флексбокс поддерживается всеми современными браузерами, в том числе и мобильными (даже IE на Windows Phone 8.1)
3) Альтернативными браузерами пользуются многие, например, недавно был в компании, где компьютеры... ооочень старые: windows XP, ЭЛТ-мониторы 1024х768... Но даже они пользуются альтернативными браузерами. Пример особенно показателен тем, что люди в этой конторе едва освоили передачу файлов по почте.
4) Майкрософт ведёт активную политику по обновлению Windows 7, 8, 8.1 до Windows 10, а значит, доля IE снижается и растёт доля Edge, который за вычетом пары незначительных косяков рендерит 1в1 как Хром.
5) Если продолжать поддерживать динозавров, то у людей не будет мотивации обновлять браузер/операционку/компьютер. Самая распространённая причина по которой люди из моего окружения не хотят обновляться до 10 очень простая: на 7/8/8.1 всё работает как надо, зачем что-то менять? Вывод: если все разработчики сайтов разом наплюют на поддержку неактуального старья, то всем станет легче жить.

Answer 5

[Михаил Чирский]

Сейчас такие возможности, что юзаете что хотите, выбора много, это раньше были только таблицы, а потом появились float, сейчас же используйте, что вам лучше поддается, flex новая технология и во многом упрощает нам жизнь, а по поводу поддержки старых браузеров не беда, есть кучу инструментов, gulp, sass, autoprefixer, все это очень упрощает жизнь и поддержку старых браузеров

Comments

[Фёдор Ананин]

а разве gulp, sass и autoprefixer могут сами заменить флекс на флоат? Автопрефикс может разве что префиксы расставить, но никак не переписать за вас весь код для совместимости со старьём

Answer 6

[Роман Ивашкевич]

А самое главное - совсем недавно расписали как работать с flexbox без самих flexbox: Хабр

Comments

[Nuts]

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

Answer 7

[Полина Емельянова]

Юзать флекс или не юзать флекс - это вопрос применения инструмента в КОНКРЕТНОМ случае. Согласен, там, где не знаешь ширину и количество контента - флекс как бальзам на рану. НО ОТСУТСТВИЕ ЭЛЕМЕНТАРНЫХ ЗНАНИЙ ПО ВЕРСТКЕ (что такое флоат и как им пользоваться) ФЛЕКС НЕ РЕШИТ! ИМХО!

* прошу прощения, если кого задело.

Answer 8

[GGatsby]

Прохожу курс по front-end, дошел до флексбоксов. Поначалу кажется все запутанным, но в итоге оказалось это очень удобная штука в верстке