Flexbox

CSS Flexbox (Flexible Box Layout) — это одномерная система компоновки CSS3, которая распределяет пространство и выравнивает элементы вдоль одной оси — строки или столбца, — что делает её основным инструментом для компоновки на уровне компонентов во frontend-разработке. Для активации Flexbox необходимо задать display: flex на контейнере, после чего свойства flex-direction, justify-content, align-items, flex-wrap и gap дают точный контроль над тем, как дочерние элементы размещаются и занимают пространство. Отдельные flex-элементы могут растягиваться или сжиматься с помощью сокращения flex-grow, flex-shrink и flex-basis (flex: 1), обеспечивая адаптивные дизайны без жёстко заданных пиксельных значений. CSS Flexbox полностью поддерживается во всех современных браузерах и широко используется в библиотеках компонентов React (Material UI, Chakra UI), а также в утилитарных фреймворках, таких как Tailwind CSS, где классы flex, justify-between и items-center напрямую соответствуют свойствам CSS Flexbox.

Как это работает

Flexbox стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".

Когда применять

Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.

Типичные ошибки

Ловушки Flexbox: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.

Связанные понятия

• CSS
• Селекторы и специфичность
• Box model
• CSS Grid