Начиная с Chrome 115, свойство CSS display имеет несколько значений. display: flex становится display: block flex и display: block становится display: block flow. Известные вам отдельные значения теперь считаются устаревшими, но сохраняются в браузерах для обратной совместимости.

Почему это давно назрело?

Короче: это меняет то, как мы можем объяснить такие вещи, как блочная модель. Спецификация по-прежнему представляет собой снимок CR, а это означает, что W3C собирает опыт разработчиков для завершения разработки стандарта. Поэтому кое-что еще может измениться.

В результате переработки тип отображения разделен на две части: внешний тип отображения и внутренний тип отображения.

Тип внешнего отображения определяет, как сам основной блок участвует в макете потока.

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

Поэтому display: flex становится display:block flex, что означает, что внешний тип отображения — блочный (он ведет себя как блочный элемент снаружи), но его дочерние элементы отображаются в соответствии с гибким макетом.

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

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

Каковы допустимые значения свойства display?

Как уже упоминалось, некоторые старые объекты теперь являются устаревшими. Вот все допустимые свойства:

Для отображения синтаксиса с несколькими значениями: external-type Internal-type Допустимыми внешними типами являются block, inline и run-in. Допустимые типы внутреннего отображения: flow, flow-root, table, flex, grid и Рубин.

Также допустимы одиночные значения: list-item, contents и none.

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

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

Множественные значения поддерживаются в последних версиях современных браузеров: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Можно использовать для значений свойства display, состоящих из нескольких ключевых слов.

Вот и все, ребята!

Большое спасибо за прочтение!