除了默认行为之外，在 Flexbox 项目上设置'display”是否具有真正的优势？

探索 Flex Box Items 中 Display 属性的意义

问题：

可以调整单个 Flex 的 display 属性盒子物品有什么明显的优势或结果吗？具体来说，将 display 设置为 block 或 inline-block 有何含义？

答案：

CSS 规范阐明了分配给 Flex 项目的内联级显示值将转换为块级对应项。因此，将 display 显式设置为 block 或 inline-block 不会产生明显的变化，因为两者都会解析为 block。

但是，当 display 属性设置为 table、inline-table、inline-grid 时，可能会产生显着的影响，或网格。在这些情况下，弹性项目将采用指定显示类型的特征，改变其呈现和行为。

考虑以下 HTML 和 CSS 示例：

<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div>
<pre class="brush:php;toolbar:false">.box {
  display: flex;
  margin: 5px;
}

.box > div {
  height: 50px;
  width: 100%;
  background: red;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}

中第一个框，嵌套 div 的显示属性未显式设置。因此，将应用默认的块化显示。相反，在第二个框中，显示设置为内联网格，导致内部 div 充当网格元素。从跨度周围的绿色边框可以明显看出这一点，这些边框相应地自行对齐。