В первой части мы освоили мощь flex-контейнера, научившись управлять целой группой элементов с помощью свойств вроде justify-content и align-items. Но что, если нужно точечно контролировать поведение одного конкретного элемента внутри этого упорядоченного пространства? На этот случай Модуль CSS FlexBox предлагает набор свойств, которые применяются не к контейнеру, а непосредственно к его дочерним блокам — flex-элементам. Эти свойства дают вам точный инструментарий для тонкой настройки макета, позволяя отдельным элементам нарушать общие правила, установленные контейнером.
Когда вы активируете режим display: flex для родителя, его прямые потомки немедленно становятся flex-элементами и получают доступ к уникальным возможностям, о которых мы подробно поговорим ниже. Это следующий шаг в освоении гибкой верстки с помощью flex css.
Свойства flex-элементов в CSS Flex Box
Эти свойства позволяют переопределить выравнивание, изменить размеры и даже поменять визуальный порядок элементов, не затрагивая структуру HTML-кода.
- order — управление порядком. Одно из самых мощных свойств flex-элементов — это order. Оно позволяет управлять порядком отображения элементов независимо от их последовательности в HTML-коде. По умолчанию все элементы имеют order: 0. Задавая положительное или отрицательное целое число, вы можете перемещать элементы вдоль главной оси. Элемент с меньшим значением order будет отображаться раньше, с большим — позже. Это открывает огромные возможности для адаптивного дизайна, когда на мобильных устройствах можно, например, переместить важный блок вверх.
- align-self — индивидуальное выравнивание. Это свойство — самый яркий пример гибкости технологии. В то время как align-items в контейнере задает выравнивание по поперечной оси для всех элементов сразу, align-self позволяет переопределить это правило для одного конкретного элемента. Вы можете принудительно выровнять его по началу (flex-start), по концу (flex-end), по центру (center), растянуть (stretch) или выровнять по базовой линии (baseline), не влияя на его соседей. Это идеальное решение для выравнивания отдельных элементов в сложных интерфейсах.
- flex-grow — коэффициент растяжения. Свойство flex-grow определяет, какую долю свободного пространства внутри контейнера может занять элемент, если таковое имеется. Значение по умолчанию равно 0, что запрещает элементу расти. Если задать положительное целое число (например, 1, 2), то свободное пространство будет распределено между всеми элементами пропорционально их коэффициенту flex-grow. Элемент с flex-grow: 2 займет в два раза больше свободного места, чем элемент с flex-grow: 1. Это основа адаптивных сеток.
- flex-shrink — коэффициент сжатия. Это свойство является противоположностью flex-grow и контролирует, насколько элемент будет сжиматься относительно других, если пространства в контейнере не хватает. Значение по умолчанию 1 означает, что все элементы будут сжиматься одинаково. Если одному из элементов задать flex-shrink: 0, он запретит себе сжиматься и будет сохранять свой базовый размер, в то время как остальные элементы уменьшатся, чтобы уместиться в контейнер.
- flex-basis — базовый размер. flex-basis определяет исходный размер элемента до того, как к нему будет применено оставшееся пространство согласно flex-grow и flex-shrink. Это своего рода "идеальный" размер. В качестве значения можно указать длину (например, 200px, 50%) или ключевые слова вроде auto (по умолчанию, размер определяется содержимым) и content (размер определяется исключительно содержимым). Это свойство задает отправную точку для гибких преобразований.
- flex —универсальное свойство. Cокращенная запись. Для удобства существует сокращенное свойство flex, которое объединяет в себе flex-grow, flex-shrink и flex-basis. Наиболее часто используется запись flex: 1 (эквивалентно flex: 1 1 0px), которая заставляет элемент растягиваться и сжиматься, занимая доступное пространство. Формат flex: 0 0 250px создает элемент с фиксированной шириной, который не будет ни расти, ни сжиматься. Использование сокращенной записи делает flex css код более чистым и читаемым.
CSS Свойства flex-элементов — это финальный и решающий шаг к полному mastery в работе с CSS FlexBox. Они дают вам тотальный контроль над макетом, позволяя создавать по-настоящему динамичные и сложные интерфейсы. Комбинируя глобальные настройки контейнера с точечными настройками отдельных элементов, вы получаете неограниченную свободу в верстке. Понимание логики свойств flex-grow, flex-shrink и flex-basis является ключевым для построения профессиональных, отзывчивых макетов, которые безупречно работают на любых экранах.