Привет! В этой части моего блога я хочу продемонстрировать наглядный пример использования flexbox в вашем проекте и ответить на вопрос - важен ли он вообще?
Начиная с важности, можно сказать о том, что практически на каждом веб-сайте используется этот инструмент. Он удобен тем, что мы можем управлять расположением блоков кода. Давайте сразу погрузимся в код и на наглядном примере проверим, как инструмент flexbox может нам помочь.
Создадим простую форму блоков в документе html:
Добавим простую стилизацию в css:
В итоге получится такая картина:
При последовательном добавлении элементов в документе html блоки будут выстраиваться сверху-вниз. Допустим, что нам нужно расположить эти блоки горизонтально. Именно в этом нам и поможет инструмент flexbox. Добавим специальное свойство для достижения цели таким образом:
В результате на экране будут такие изменения:
На этот раз блоки расположились горизонтально. Это случилось потому, что командой display:flex мы сменили направление выстраивания блоков. Ее можно настроить и другим образом, например, добавлением следующей команды:
Элементы вернутся в изначальное положение, но теперь эти блоки будут элементами flexbox.
Не менее важной является команда justify-content. Она поможет нам расположить нам элементы относительно страницы. К примеру, мы хотим расположить данные блоки в равной отдаленности друг от друга по всей странице. Для этого не потребуется определять отступы каждому элементу, а достаточно будет указать свойство space-between:
Как можете увидеть, я добавил ограничение блока по ширине. Это не обязательный атрибут, но если вам необходимо равноудаленно расположить элементы на определенной ширине блока, лучше указать это свойство. Давайте посмотрим результат:
Как видим, блоки расположились равноудаленно друг от друга.
Для примера могу сказать, что flexbox может использоваться с различной целью: создать красивую шапку страницы, расположить блоки с текстом или картинками без расчета пикселей, а также для выставления элементов страницы по определенному порядку. Вот пример использования flexbox:
Для закрепления изученного рекомендую проделать все шаги самостоятельно, а также изучить и прочие свойства инструмента flexbox. Спасибо за внимание!