5 техник работы с flexbox, о которых стоит знать веб-разработчику

5
20830
Добавить в избранное

В этой статье мы рассмотрим как c помощью flexbox решить основные проблемы css, которые возникают при верстке макета без боли.

Flexbox – стандарт css, созданный для оптимизации процесса создания пользовательских интерфейсов. Используя свойства flexbox-ов, можно создавать страницы, будто складывая блоки, которые легко позиционируются и ресайзятся так, как нам нужно. Сайты и приложения, созданные с использованием flexbox, по умолчанию адаптивны и хорошо смотрятся на любом экране.

1. Создание колонок одинаковой высоты

На первый взгляд не кажется сложным, но на деле сверстать колонки таким образом может оказаться не очень приятной задачей. Просто установить min-height нельзя, так как при увеличении объема контента в одной из них, ее высота вырастет, а остальные останутся короткими.

Если использовать flexbox, то решение будет довольно простым. Все что нужно – инициировать flex и убедиться, что в свойствах flex-direction и align-items установлены значения по умолчанию.

CSS

HTML

2.Изменение порядка элементов

Еще недавно, чтобы поменять порядок элементов на странице, необходимо было прибегать к помощи JavaScript. С использование flexbox все что для этого потребуется – изменить одно свойство.

Называется оно order и позволяет менять местами любое количество flex-элементов и изменять последовательность, с которой они располагаются на экране. Единственный параметр целым числом определяет позицию элемента, чем ниже номер – тем выше приоритет.

CSS

HTML

3. Горизонтальное и вертикальное выравнивание

Вертикальное выравнивание в CSS — одна из тех проблем, которые заставляют негодовать: как такая тривиальная вещь может так сложно реализовываться? Если вам когда-либо приходилось гуглить, как выровнять блок по вертикали, вы наверняка видели целую кучу различных техник, но ни одна из них явно не спроектирована для создания красивых макетов.

Flexbox предоставляет простое решение этой проблемы. Flex-разметка имеет две оси – X и Y, и два свойства для выравнивания по каждой из них. Используя их, мы можем выровнять любой элемент строго по центру родительского контейнера.

CSS

HTML

4. Создание полностью отзывчивой сетки

Многие полагаются на различные css фреймворки вроде Twitter Bootstrap, когда необходима динамичная отзывчивая сетка. Подобные бутстрапу фреймворки хорошо работают и обладают множеством опций, но у них общий недостаток – они слишком тяжелые. Особенно, если нужна только сетка. Так что, если вы все любите делать сами или вам просто не нужен лишний вес и функционал, то можно воспользоваться flexbox.

Ряд в сетке на flexbox – это контейнер со свойством display: flex. Внутри может располагаться любое количество вертикальных колонок, размер которых устанавливается через свойство flex. Flex-модель адаптирует размеры колонок под любой экран, а если окажется, что места для колонок на экране недостаточно, то можно переделать модель в полностью вертикальную с помощью media-query.

CSS

HTML

5. Создаем идеально позиционированный футер

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

display: flex, примененный к тегу body, позволяет строить макет всего содержимого страницы с использованием flex-свойств. Так что, будь то футер или топ страницы, их будет легко позиционировать так, как нам нужно.

CSS

HTML

Другие статьи по теме

10 вещей в HTML, о которых вы вряд ли знали

Скрытые возможности CSS: 10 полезных советов

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 5

  1. Мода на обливания в одежде набирают всё бОльший оборот

  2. Как думаете, когда девушка начала преподавать?

    1. Кто?

  3. Hello. And Bye.

  4. Komrados

Добавить комментарий