CSS Flex: что должен знать каждый разработчик

CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и создавать отзывчивые веб-страницы без использования множества свойств позиционирования и float. По умолчанию в flex-контейнере есть только одна flex-линия. Flex-элементы могут быть уложены только в вертикальные колонки или горизонтальные ряды.

Основы и терминология

Прежде всего, давайте ознакомимся с ключевыми терминами, часто используемыми в flexbox:

• Гибкая линия: Гибкие элементы выравниваются по гибкой линии внутри гибкого контейнера. По умолчанию в флекс-контейнере есть только одна флекс-линия.
• Главная ось: Основная ось, вдоль которой расположены гибкие компоненты. В зависимости от свойства flex-direction она может быть вертикальной или горизонтальной.
• главный начальный край и главный конечный край: Гибкие элементы располагаются в гибком контейнере от главного начального края к главному конечному краю.
• Поперечная ось: Ось, перпендикулярная главной оси.
• поперечный начальный край и поперечный конечный край: В контейнере гибкие линии начинаются у начального края и заканчиваются у конечного края.

Начало работы

Чтобы начать использовать модуль компоновки flexbox, сначала нужно определить контейнер как flex-контейнер. Посмотрите на следующий пример.

<div class="flex-container">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
   <div class="flex-item">4</div>
   <div class="flex-item">5</div>
</div>

Все, что вам нужно сделать, это установить свойство display контейнера на flex. Затем он автоматически преобразует прямые дочерние элементы flex-контейнера в flex-элементы.

Свойства Flex-контейнера

Свойства гибкого контейнера определяют, как браузеры должны располагать элементы внутри гибкого блока. Существует шесть свойств гибкого контейнера. Давайте рассмотрим их:

• flex-direction: Определяет направление, в котором flex-элементы должны быть расположены внутри гибкого контейнера. Flexbox - это концепция однонаправленного расположения. Поэтому гибкие элементы могут располагаться только в вертикальных колонках или горизонтальных рядах. Свойство flex-direction принимает четыре значения:
• row (по умолчанию): Укладывает гибкие элементы горизонтально, слева направо.
• колонка: Укладывает гибкие элементы вертикально, сверху вниз.
• row-reverse: Укладывает гибкие элементы горизонтально, справа налево.
• колонка-реверс: Укладывает гибкие элементы вертикально, снизу вверх.

• flex-wrap: По умолчанию гибкие элементы пытаются уместиться в одну строку. Таким образом, лишние элементы будут переполнять контейнер, если суммарная высота (или ширина) всех гибких элементов будет больше высоты (или ширины) flexbox. flex-wrap указывает, должны ли переполненные гибкие элементы быть обернуты в несколько строк или нет. Свойство flex-wrap принимает следующие три значения:
• nowrap (по умолчанию): Запрещает обертывание гибких элементов и заставляет все элементы располагаться на одной линии. Это может привести к переполнению гибких элементов за пределами контейнера.
• wrap (обернуть): При необходимости обернуть гибкие элементы в несколько строк.
• wrap-reverse: Функционирует аналогично wrap, но в обратном порядке.

• flex-flow: Это сокращенное свойство для одновременной установки свойств flex-direction и flex-wrap. Обратитесь к следующему примеру кода.
• .flex-container { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

• В качестве альтернативы можно использовать следующее.
• .flex-container { display: flex; flex-flow: row-reverse wrap; }
• justify-content: Используется для указания того, как браузер должен выравнивать гибкие элементы вдоль главной оси флексбокса. Оно определяет, как распределяется пространство между гибкими элементами и вокруг них вдоль главной оси контейнера. Для этого свойства принимаются следующие значения:
• flex-start (по умолчанию): Выравнивает гибкие элементы по началу (main-start edge) главной оси flexbox.
• flex-end: Выравнивает элементы flex по концу (краю main-end) главной оси flexbox.
• center: Гибкие элементы центрируются вдоль главной оси флексбокса.
• пространство вокруг: Гибкие элементы равномерно распределяются вдоль главной оси путем выделения равного пространства с обеих сторон элемента. Здесь пространство между главным начальным (или главным конечным) краем контейнера и первым (или последним) гибким элементом составляет половину ширины области по сравнению с расстоянием между двумя элементами.
• промежуток между: Выравнивает первый элемент по основному начальному краю и последний элемент по основному конечному краю главной оси и создает равномерное расстояние между каждым соседним гибким элементом.
• пространство равномерно: Внутри контейнера гибкие элементы распределены равномерно вдоль главной оси. Пространство между каждой парой последующих элементов равно расстоянию между первым (или последним) гибким элементом и главным начальным (или главным конечным) краем контейнера.

• align-items: Используется для указания того, как браузер должен расположить элементы flex вдоль поперечной оси flexbox. Его поведение аналогично justify-content, но перпендикулярно главной оси. Для этого свойства принимаются следующие значения:
• stretch (по умолчанию): Растягивает гибкие элементы, чтобы заполнить вертикальное пространство контейнера, соблюдая ограничения по высоте и ширине.
• center: Выравнивает гибкие элементы по центру контейнера, или, другими словами, по центру поперечной оси контейнера.
• flex-start: Выравнивает гибкие элементы по начальному краю. Это означает, что гибкие элементы выравниваются по вертикали в верхней части контейнера.
• flex-end: Выравнивает гибкие элементы по поперечному краю. Это означает, что гибкие элементы выравниваются по вертикали в нижней части контейнера.
• baseline (базовая линия): Выравнивает гибкие элементы по базовой линии поперечной оси.

• align-content: Его поведение похоже на то, как justify-content выравнивает элементы flex вдоль главной оси, когда на главной оси есть дополнительное пространство. Но вместо элементов, align-content выравнивает flex-линии и указывает браузеру, как расположить линии flex-контейнера вдоль поперечной оси. Для этого свойства принимаются следующие значения:
• растягивать (по умолчанию): Заполняет вертикальное пространство, равномерно распределяя оставшееся пространство между гибкими линиями.
• space-between: Первая и последняя гибкие линии выравниваются по начальному и конечному краям контейнера соответственно, при этом создается равное расстояние между каждой парой линий между первой и последней линиями.
• равномерное пространство: Флексовые элементы распределяются равномерно путем выделения ровного пространства над первой строкой, между двумя флексовыми строками и под последней строкой.
• space-around: Аналогично space-evenly, но здесь добавляется равный интервал вокруг каждой строки. Поэтому пространство перед (или после) первой (или последней) строкой равно половине ширины расстояния между двумя соседними строками.
• флекс-старт: Каждая гибкая линия будет заполнять только необходимое ей пространство и двигаться к поперечному начальному краю контейнера.
• flex-end: Каждая линия будет заполнять только необходимое пространство и перемещаться к поперечному краю контейнера.
• center: Аналогично flex-start и flex-end, но гибкие линии выравниваются по центру поперечной оси контейнера.

Примечание: align-content не работает на однострочных flex-контейнерах. Чтобы выравнивание контента имело эффект, флексбокс должен быть многострочным контейнером со свойством flex-wrap, установленным на wrap или wrap-reverse.

Свойства элементов Flex

Свойства гибкого элемента определяют, как браузеры должны размещать конкретный элемент в гибком контейнере. Существует шесть типов свойств гибкого контейнера. Давайте рассмотрим их:

• порядок: По умолчанию элементы flex позиционируются в соответствии с порядком, определенным в HTML-коде. Свойство order определяет порядок, в котором гибкие элементы должны появляться в гибком контейнере. Значение должно быть числом, по умолчанию оно равно 0.

Взгляните на предыдущий пример. Я установил значение свойства order для первого и последнего элементов на order: 5 и order: 1 соответственно, чтобы поменять местами эти два элемента.

Примечание: Старайтесь переставлять HTML-код и использовать свойство order только в том случае, если это действительно необходимо, так как оно может запутать читателей HTML-документа.

• flex-grow: Определяет, насколько должен вырасти гибкий элемент относительно других гибких элементов внутри того же контейнера, чтобы заполнить избыточное пространство контейнера. Значение должно быть без единиц, по умолчанию - 0. Если свойство flex-grow установлено в одинаковое значение для всех flex-элементов, оставшееся пространство flexbox будет равномерно распределено между всеми элементами.

• flex-shrink: Определяет, насколько гибкий элемент должен уменьшаться относительно других гибких элементов, если в контейнере недостаточно места. Значение по умолчанию равно 1.

• flex-basis: Определяет начальную длину элемента flex.
• flex: сокращенное свойство для одновременной установки значений flex-grow, flex-shrink и flex-basis. По умолчанию flex: 0 1 auto.

Примечание: flex: initial (по умолчанию) эквивалентен flex: 0 1 auto; flex: auto эквивалентен flex: 1 1 auto; flex: none равен flex: 0 0 auto; flex: inherit наследует значения свойств flex своего родительского элемента, как следует из названия.

• выровнять по себе: Работает аналогично свойству align-items. Однако align-self влияет не на каждый гибкий элемент в контейнере, а только на выбранный элемент. Кроме того, оно переопределяет свойство align-items и определяет выравнивание выбранного элемента внутри флексбокса.

Заключение

В этой статье было рассмотрено все, что нужно знать о модуле компоновки flexbox для создания отзывчивого макета сайта. Однако крайне важно отметить его недостатки. Хотя макет flexbox хорошо работает для страниц, в больших и сложных приложениях ему требуется большая гибкость, особенно при изменении размера, сжатии, растягивании или смене ориентации.