float, flexbox или grid — что использовать сегодня?

float, flexbox или grid — что использовать сегодня?

Приветствую всех читателей блога Вебсовет! Давно хотел написать статью или даже цикл статей о современных способах выравнивания элементов в верстке сайтов. Когда-то для этого использовали обычные таблицы и не парились шибко.

Но потом таблицы сменили блоками div и появилось весьма удобное свойство float, которое и по сегодняшний день широко используется в верстке.

Однако время не стоит на месте. Несколько лет назад появился Flexbox — крутая штука, способная сильно облегчить жизнь верстальщика сайтов, когда надо выровнять несколько блоков, чтобы все это красиво отображалось на разных экранах.

Сегодня все активнее набирает обороты Grid. Кто-то даже ошибочно полагает, что он пришел на смену Flexbox, хотя это и не правильно. Вот об этом я и хотел рассказать. Но…

Оказывается, все уже давно есть в сети, разжевано и разложено по полочкам, справочникам и урокам. Бери — не хочу! Так что я решил не плодить повторы, а просто дать несколько полезных ссылок для тех, кому интересно изучить и применять это на практике.

Итак, статья намба ван — Решающая CSS битва: Grid против Flexbox. Из статьи вы узнаете, чем они отличаются и когда их нужно использовать вместе. А также усвоите, что первое отнюдь не замена второму и наоборот.

Когда нужно использовать Flexbox. Еще одна статья на ту же тему где и когда нужно использовать flexbox, а когда grid. Все с примерами и подробными объяснениями.

И еще парочка исчерпывающих руководств:

Верстка на Flexbox в CSS. Полный справочник.
Верстка на Grid в CSS. Полное руководство и справочник.

Читайте, изучайте, применяйте! За качественные переводы статей спасибо @stasonmars.

ПС: Так что же использовать сегодня — float, flexbox или grid? Правильный ответ — все! Только каждому свое место, наиболее подходящее.

Пожалуйста, оцените статью и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

2 комментария

  1. Николай | 26.10.2018

    Спасибо за полезные ссылки! Хочу взяться за изучение этого Flexbox-а да все как-то лень было.

  2. Игорь Квентор | 26.10.2018

    Пожалуйста, Николай! Кстати, насчет лени — вопрос далеко не праздный. Лень — великая сила! :) Она оберегает нас от лишнего напряжения. И если что-то не нужно для практического применения, то не стоит этим и заморачиваться. Я сам не так давно стал применять Flexbox, просто потому что раньше не было такой необходимости, а теперь есть.

Оставить комментарий: