Являются ли flex-элементы элементом уровня блока?

Question

Элементы Flex являются элементом уровня flex, но является ли это элементом уровня блока?

---

Согласно Глава 4 CSS-модуля для создания гибких блоков Уровень 1 , flexэлементы считаются находящимися на уровне flex, а не на уровне блоков.

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

---

Однако, если вы прочитаете главу 4 позже, будет написано, что отображаемое значение элемента flex будет «заблокировано».

Указывает ли blockified, что элемент находится на уровне блока?Если это так, то описанный выше «гибкий элемент - это гибкий уровень» является ошибкой.

Отображаемое значение гибкого элемента блокируется : если заданное отображениеДочерний элемент flow элемента, генерирующего flex-контейнер, является значением встроенного уровня, он вычисляется до его эквивалента на уровне блока.(См. CSS2.1§9.7 [CSS21] и CSS Display [CSS3-DISPLAY] для получения подробной информации об этом типе преобразования отображаемых значений.)

---

Что здесь означает «заблокированный»?Кроме того, гибкие элементы находятся на уровне гибкости?Или это уровень блочных блоков?

Если он интерпретируется как спецификация, то будет противоречивый вывод, что «элемент flex - это уровень flex, а не уровень блока, но он становится уровнем блока, если блокируется».

Answer 1

Обе спецификации, конечно, верны, но вы забыли ключевое слово display во втором разделе. Каждый элемент имеет отображаемое значение, а для гибких элементов это значение равно block, что означает, что, например, если вы укажете inline-block, оно будет вычислено до block. Если вы укажете inline-grid, он будет вычислен до grid и т. Д.

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

Таким образом, элементы flex - это блоки уровня flex со значением display: block;, но не блоки уровня.

Похожие: Использование свойства отображения элементов flex box

---

Чтобы было проще, представьте, что у вас есть два мира: внешний мир и внутренний мир. Если мы посмотрим на элемент flex из внешнего мира, это блок уровня Flex, участвующий в контексте форматирования Flex своего контейнера. Из внутреннего мира это блочный элемент, который означает, что элемент внутри гибкого элемента будет видеть этот гибкий элемент как элемент блока.

Если вы установите inline-[flex/table/grid/block] для гибкого элемента, он будет выглядеть как [flex/table/grid/block] контейнер изнутри. inline ушел, потому что он заблокирован .