CSS外层显示类型定义及flex、grid容器display-outside值咨询

首先明确外层显示类型的定义：

外层显示类型：决定主盒自身如何参与流式布局。

简单来说，外层显示类型就是容器自身在页面流式布局中的表现形式，遵循普通块级、行内元素的布局规则。

针对你的问题：

• 当设置 display: flex; 时，flex容器的外层显示类型为 block——它自身会像普通块级元素一样，独占一行、前后自动换行，宽度默认填满父容器。
• 当设置 display: grid; 时，grid容器的外层显示类型默认也是 block，布局行为和上述flex容器一致。

如果需要让容器以行内元素的方式参与布局，可以使用 inline-flex 或 inline-grid，此时它们的外层显示类型为 inline，容器会和其他行内元素排在同一行，宽度由自身内容决定。

内容的提问来源于stack exchange，提问作者user19481364