Почему многие ругаются на flex и float? Что в таком случае использовать?

Question

[Alain Kris]

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

Comments

[gleendo]

Встречаю много статей, что в 2017 верстка с помощью flex и float уже не актуальна?

Можно хоть на одну статью взглянуть?

[Alexander]

что в 2017 верстка с помощью flex и float уже не актуальна?

А что актуальна ?

[Сергей Горячев]

Alexander, table xDDD

Answer 1

[Василий Назаров]

Встречаю много

Да, в интернетах много чего встречается.
Если бы эти "статьи" не были полное давно, вы бы не задали здесь этот вопрос.
Знаете, почему?
Потому что в нормальных источниках было бы написано
1. Не юзайте то, потому что ....
2. Юзайте вместо того это.
В хороших статьях ещё и будут описаны плюсы и минусы как того, так и этого.

Answer 2

[Владимир]

Флекс атуален на все 100, он поддерживается даже IE11
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Грид это ближайшее будущее, его нужно пробовать
https://css-tricks.com/snippets/css/complete-guide...

Answer 3

[Airat Galiullin]

Flex - это одно из лучших CSS изобретений. Ускоряет верстку, прост в использовании, решают практически любую потребность, особенно при адаптивной вёрстке.

Comments

[web-quest3]

Ayrat Galiullin хотите интересную задачку по флексу?) Я вот так и не понял как ее решить. именно флексом..

[Airat Galiullin]

web-quest3, Давайте попробуем решить вместе.. =)

[web-quest3]

Ayrat Galiullin,
есть 5 блоков
выглядят так
prntscr.com/gj43pr
2 строки флекс спейсбитвин а отступы маргинами по 15 пкс вот попробуйте)

[Airat Galiullin]

web-quest3, https://jsfiddle.net/agaliullin/gtzcdpcq/

Если конечно правильно понял вашу задачу =)

[web-quest3]

Ayrat Galiullin, https://jsfiddle.net/gtzcdpcq/3/ вот так..

[barkalov]

На флексе невозможно сделать multi-column wrap для контейнера нефикискированной высоты.
А вот multi-row wrap для контейнера нефикискированной ширины - можно.

Очень огорчает этот факт.

Answer 4

[Евгений]

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

Но важно знать о слабых местах флексов и старых браузеров, в том числе ie11. Тогда все будет хорошо. Как пример, ie11 и старый Safari не поддерживают свойство flex-wrap: wrap; Это свойство может применяться для создания сетки 3х3 блока к примеру. В этом случае, для этих версий уместно будет использовать свойство display: inline-block; Которое позволит вам получить искомую сетку в эталоне или близком к нему.

Также не везде работает вертикальное центрирование и еще пару передовых фич.

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

Comments

[alvvi]

ie11 поддерживает свойство flex-wrap: wrap, просто ему нужно дополнительно явно указать width даже для блочных элементов

Answer 5

[Mikhail Derkach]

Использую flex во всех свои проектах.
Просто как-то раз попробовал сверстать шапку сайта и тут понеслось.
Значительно увеличилась производительность, очень помогает при адаптивной верстке.
Например, шапка сайта с 2 или 3 элеметами
На разрешении примерно ниже 768 уже в строку не помещается - достаточно поменять flex-direction на column - шапка будет в столбик, все довольны.
То же самое и с выравниванием по осям.
Намного удобнее менять элементы местами во флексе: достаточно написать order дочерним элементам - все поменялось.

Возможно, так же легко манипулировать float, недолго я им пользовался и не знаю всей специфики, но флексбокс реально облегчает верстку многократно

Answer 6

[sergski]

Сейчас это справедливо для float, когда его используют для верстки лейаутов, очень распространенный прием. А вот flex нет, наоборот. В паре с родственным grid это ближайшее будущее веб. Так получилось, что в css небыло предназначенного инструмента для верстки блоками и чтобы как-то с этим жить разработчики напридумывали наборы приемов/хаков, как это все обойти.
Читайте лучше Рейчел Андрю, Джен Симмонс, Smashingmagazine и тп.
ps. да, это передний край и все такое, вопрос использования — холиварный, но забейте и как учите grid/flex и начинайте аккуратно использовать, уже опубликовано достаточно статей, как начинать делать реальные проекты с ними. Тем более вы «начинающий верстальщик» — так учите лучшее!

Answer 7

[Богдан Духевич]

1. Гриды - будущее, однако только для глобальных лейаутов. ТОЛЬКО.
2. Флексбоксы - настоящее, могут использоваться без проблем как в локальных местах, там и для глобального лейаута. ИЕ11+, с некоторыми нюансами.
3. Флоат - прошлое, но все же это старый-добрый флоат. Всегда спасет и прикроет вашу задницу в случае чего. Как и верстка на inline-block'ах. Но FLEX конечно должен быть сейчас в приоритете, в любом случае.

Answer 8

[FullStack Alex]

LOL, флекс не актуален?! :D
Вы видно что то перепутали или не правильно поняли. Трудно представить профессионала говорящего о том что флексбокс не актуален. Да его только пару лет назад использовать стало можно.

Флексбокс крутейшая штука, правда со своими нюансами. Особенно старые браузеры порой по своему внедрили флексбокс - если в Сафари всё топ, то не обязательно что в IE11 тоже всё работать будет.

Но вот этот мной составленный, полный список всех prefixes думаю сильно облегчит использование:
https://github.com/Tech-Nomad/flex.css/blob/master...

Answer 9

[ZoomLS]

Встречаю много статей, что в 2017 верстка с помощью flex и float уже не актуальна?

Про float - можно так сказать. А вот flex - он же как раз начал активно использоваться только год назад. CSS Grid и FlexBox - сейчас самое актуальное направление в вёрстке. Особенно если ненужно поддерживать всякое старьё(IE) или отсталые браузеры(Safari).

Answer 10

[zooks]

Сейчас актуален Flex.
Ранее был актуален float (сегодня можно использовать через гриды типа Susy).
Через несколько лет будут везде поддерживаться CSS Grids.

Так что верстайте через Flex. Однако, его обязательно тестировать во всех браузерах. Т.к. например в IE и Safari может глючить свойство min-height.