Загадочная природа гибких элементов: блочный или гибкий уровень?

Вопрос о том, являются ли гибкие элементы блочными, был темой дебаты среди разработчиков CSS. Модуль CSS Flexible Box Layout Level 1 утверждает, что гибкие элементы находятся на уровне гибкости, а не на уровне блоков. Однако в следующем разделе предполагается, что отображаемые значения гибких элементов «блокируются». Возникает вопрос: все-таки являются ли гибкие элементы блочными?

Чтобы понять несоответствие, крайне важно понять концепцию отображения в CSS. Каждый элемент имеет свойство display, которое определяет его расположение. Для гибких элементов изначально установлено значение отображения «блок». Это означает, что если свойству inline гибкого элемента присвоено другое значение, например inline-block, оно будет автоматически преобразовано в block. Это называется блокировкой.

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

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