flex布局中display属性的使用

Question

改变 flex box 项的显示属性有什么好处或原因吗？

特别是，我对使用 display:block 和 display:inline-block 感兴趣。

- Roman Roman

---

请分享您已经尝试过的代码。 - Naga Sai A

有什么好处呢？为什么要使用 flex 或 block 或 inline-block？ - IvanS95

我们无法回答这个问题，这取决于你需要做什么... - Arkellys

那么问题本质上是“display: flex容器内的flex项目的display模式是否会改变它们的行为？” - Alexander Nied

@AlexanderNied 差不多是的。我的问题有点广泛，但你关于这一点是正确的。 - Roman Roman

这个问题可能过于宽泛、基于观点或需要讨论，因此不适合在 Stack Overflow 上进行。如果您有一个具体的、可回答的编程问题，请提供完整的细节。 - Paulie_D

Answer 1

根据 规范:

flex项的显示值被块化: 如果flex容器的内联流子元素的指定显示值是内联级别的值，则该值将计算为其块级等效值。(有关此类型的显示值转换的详细信息，请参见CSS2.1§9.7 [CSS21]和CSS Display [CSS3-DISPLAY])。

因此，基本上设置inline-block或block将不起作用，因为两者都将计算为block，但您可以设置table或inline-table，使您的 flex 项类似于表格。如果设置inline-grid或grid也是同样的情况。

.box {
  display: flex;
  margin:5px;
}

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

span {
  border: 2px solid green;
}

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

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

<div class="box">
  <div style="display:inline-grid;">
    <span></span>

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

针对第二种情况，你可以看到它计算为grid。

- Temani Afif

---

一个普通的 inline 是否会被转换或视为块？ - tonitone120

@tonitone120 是的，内联元素会变成块级元素。内联或内联块都将表现为块级元素。 - Temani Afif