Понимание режимов отображения CSS

Каждое решение о компоновке, которое вы принимаете в CSS, восходит к одному свойству: display. Однако большинство объяснений представляют его как плоский список значений для запоминания. Такой подход упускает суть. Свойство display на самом деле контролирует две различные вещи — как элемент участвует в компоновке своего родителя и как он размещает собственные дочерние элементы. Понимание этой двойственной природы трансформирует ваше представление о фундаментальных основах современной CSS-компоновки.

Современная ментальная модель: внешние и внутренние типы отображения

CSS-свойство display определяет два отдельных поведения:

Внешний тип отображения определяет, как блок элемента ведёт себя по отношению к соседним элементам. Занимает ли он полную ширину и начинается с новой строки? Или он располагается в строке с окружающим содержимым?

Внутренний тип отображения контролирует, как размещаются дочерние элементы. Следуют ли они нормальному потоку документа? Или они участвуют в flex- или grid-контексте?

Когда вы пишете display: flex, вы фактически говорите: «Этот элемент ведёт себя как блок снаружи, а его дочерние элементы используют flex-компоновку внутри». Спецификация CSS Display Level 3 сделала это явным с помощью синтаксиса с несколькими ключевыми словами — display: block flex — хотя одиночные ключевые слова остаются валидными и широко используемыми.

Эта модель внешнего и внутреннего типов проясняет, почему существуют определённые комбинации, и помогает предсказывать поведение без запоминания.

Block vs Inline: основа

Block и inline представляют два фундаментальных внешних типа отображения в нормальном потоке.

Блочные элементы генерируют блок, который:

• Начинается с новой строки
• Расширяется, чтобы заполнить доступную ширину
• Учитывает width, height, margin и padding со всех сторон

Строчные элементы генерируют блоки, которые:

• Текут вместе с текстовым содержимым
• Занимают только пространство, необходимое для их содержимого
• Игнорируют свойства width и height (за исключением замещаемых элементов, таких как изображения)
• Реагируют только на горизонтальные margin и padding (вертикальные margin игнорируются, а вертикальный padding не влияет на окружающую компоновку)

/* Block: заполняет ширину контейнера, располагается вертикально */
.card { display: block }

/* Inline: течёт с текстом, размер определяется содержимым */
.label { display: inline }

Понимание block vs inline vs flex vs grid начинается здесь. Block и inline описывают участие в нормальном потоке — алгоритме компоновки по умолчанию, который браузеры используют до того, как вы применяете что-либо ещё.

Flex и Grid: современные внутренние типы отображения

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

Когда использовать Flex

Flexbox превосходен для одномерных компоновок — распределения элементов вдоль одной оси:

.nav-list {
  display: flex;
  gap: 1rem
}

Используйте flex, когда размер содержимого должен влиять на компоновку, когда вам нужно, чтобы элементы переносились естественным образом, или когда выравнивание вдоль одной оси является вашей основной задачей.

Когда использовать Grid

Grid обрабатывает двумерные компоновки — одновременно контролируя и строки, и столбцы:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

Выбирайте grid, когда вам нужно точное размещение, перекрывающиеся элементы или компоновки, где структура важнее размера содержимого.

И flex, и grid создают новые контексты форматирования для своих дочерних элементов, что влияет на поведение margin, float и других свойств внутри них.

Display None: полное удаление элементов

Установка display: none полностью удаляет элемент из компоновки. Документ отображается так, как если бы элемента не существовало. Это отличается от visibility: hidden, которое скрывает элемент, сохраняя его пространство.

Обратите внимание, что display: none также удаляет элементы из дерева доступности — программы чтения с экрана не будут их озвучивать.

Заметка о Display Contents

Значение display: contents заставляет блок элемента исчезнуть, сохраняя его дочерние элементы в компоновке. Хотя это звучит полезно для сглаживания элементов-обёрток в flex- или grid-контекстах, оно несёт значительные риски для доступности. Исторически реализации браузеров удаляли элемент из дерева доступности, нарушая семантику для таблиц, списков и интерактивных элементов. Хотя поддержка браузеров улучшилась, подходите с осторожностью и тщательно тестируйте.

Выбор правильного режима отображения CSS

Начните с этого вопроса: какую проблему вы решаете?

• Нормальный поток документа? Используйте block или inline
• Одномерное распределение? Используйте flex
• Двумерное размещение? Используйте grid
• Удалить из компоновки? Используйте none

Заключение

CSS-свойство display — это не о запоминании значений, а о понимании того, что каждый элемент имеет внешнюю роль и внутреннюю стратегию компоновки. Внешний тип определяет, как элемент располагается среди соседних элементов, в то время как внутренний тип диктует, как размещаются его дочерние элементы. Как только эта двойственная природа становится понятной, выбор правильного режима отображения становится простым, а решения о компоновке естественным образом следуют из проблемы, которую вы пытаетесь решить.

Часто задаваемые вопросы

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.