css - flex 盒子元素的显示属性的使用

Question

更改 flex 盒元素的显示属性是否有任何好处或理由？

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

Answer 1

来自 the specifciation :

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

所以基本上，设置 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