float, flexbox или grid — что использовать сегодня?
Приветствую всех читателей блога Вебсовет! Давно хотел написать статью или даже цикл статей о современных способах выравнивания элементов в верстке сайтов. Когда-то для этого использовали обычные таблицы и не парились шибко.
Но потом таблицы сменили блоками div и появилось весьма удобное свойство float, которое и по сегодняшний день широко используется в верстке.
Однако время не стоит на месте. Несколько лет назад появился Flexbox — крутая штука, способная сильно облегчить жизнь верстальщика сайтов, когда надо выровнять несколько блоков, чтобы все это красиво отображалось на разных экранах.
Сегодня все активнее набирает обороты Grid. Кто-то даже ошибочно полагает, что он пришел на смену Flexbox, хотя это и не правильно. Вот об этом я и хотел рассказать. Но…
Оказывается, все уже давно есть в сети, разжевано и разложено по полочкам, справочникам и урокам. Бери — не хочу! Так что я решил не плодить повторы, а просто дать несколько полезных ссылок для тех, кому интересно изучить и применять это на практике.
Итак, статья намба ван — Решающая CSS битва: Grid против Flexbox. Из статьи вы узнаете, чем они отличаются и когда их нужно использовать вместе. А также усвоите, что первое отнюдь не замена второму и наоборот.
Когда нужно использовать Flexbox. Еще одна статья на ту же тему где и когда нужно использовать flexbox, а когда grid. Все с примерами и подробными объяснениями.
И еще парочка исчерпывающих руководств:
Верстка на Flexbox в CSS. Полный справочник.
Верстка на Grid в CSS. Полное руководство и справочник.
Читайте, изучайте, применяйте! За качественные переводы статей спасибо @stasonmars.
ПС: Так что же использовать сегодня — float, flexbox или grid? Правильный ответ — все! Только каждому свое место, наиболее подходящее.
Спасибо за полезные ссылки! Хочу взяться за изучение этого Flexbox-а да все как-то лень было.
Пожалуйста, Николай! Кстати, насчет лени — вопрос далеко не праздный. Лень — великая сила! :) Она оберегает нас от лишнего напряжения. И если что-то не нужно для практического применения, то не стоит этим и заморачиваться. Я сам не так давно стал применять Flexbox, просто потому что раньше не было такой необходимости, а теперь есть.