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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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