@alainkris
веб-разработчик

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

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

Да, в интернетах много чего встречается.
Если бы эти "статьи" не были полное давно, вы бы не задали здесь этот вопрос.
Знаете, почему?
Потому что в нормальных источниках было бы написано
1. Не юзайте то, потому что ....
2. Юзайте вместо того это.
В хороших статьях ещё и будут описаны плюсы и минусы как того, так и этого.
Ответ написан
Флекс атуален на все 100, он поддерживается даже IE11
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Грид это ближайшее будущее, его нужно пробовать
https://css-tricks.com/snippets/css/complete-guide...
Ответ написан
@agaliullin
CEO & Founder of Futureinapps, LLC
Flex - это одно из лучших CSS изобретений. Ускоряет верстку, прост в использовании, решают практически любую потребность, особенно при адаптивной вёрстке.
Ответ написан
@dragonesis
Добрый день.
Вы можете спокойно использовать флексы и учить на тестовых примерах гриды. И правильно сказали авторы выше. Мы, в нашей компании, поддерживаем до ie11, так что и с чистой совестью используем данные инструменты.

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

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

Но в целом. Если на практике вычислить то, что встречается чаще всего в багах, записываемых на флекс, то можно аккуратно обходить их теми или иными средствами. В конце концов не один из методов построения сеток не идеален.
Ответ написан
sergski
@sergski
web-developer
Сейчас это справедливо для float, когда его используют для верстки лейаутов, очень распространенный прием. А вот flex нет, наоборот. В паре с родственным grid это ближайшее будущее веб. Так получилось, что в css небыло предназначенного инструмента для верстки блоками и чтобы как-то с этим жить разработчики напридумывали наборы приемов/хаков, как это все обойти.
Читайте лучше Рейчел Андрю, Джен Симмонс, Smashingmagazine и тп.
ps. да, это передний край и все такое, вопрос использования — холиварный, но забейте и как учите grid/flex и начинайте аккуратно использовать, уже опубликовано достаточно статей, как начинать делать реальные проекты с ними. Тем более вы «начинающий верстальщик» — так учите лучшее!
Ответ написан
@skeevy
Junior Forntend (?)
Использую flex во всех свои проектах.
Просто как-то раз попробовал сверстать шапку сайта и тут понеслось.
Значительно увеличилась производительность, очень помогает при адаптивной верстке.
Например, шапка сайта с 2 или 3 элеметами
На разрешении примерно ниже 768 уже в строку не помещается - достаточно поменять flex-direction на column - шапка будет в столбик, все довольны.
То же самое и с выравниванием по осям.
Намного удобнее менять элементы местами во флексе: достаточно написать order дочерним элементам - все поменялось.

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

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

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

Про float - можно так сказать. А вот flex - он же как раз начал активно использоваться только год назад. CSS Grid и FlexBox - сейчас самое актуальное направление в вёрстке. Особенно если ненужно поддерживать всякое старьё(IE) или отсталые браузеры(Safari).
Ответ написан
zooks
@zooks
Frontend и Django
Сейчас актуален Flex.
Ранее был актуален float (сегодня можно использовать через гриды типа Susy).
Через несколько лет будут везде поддерживаться CSS Grids.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы