css - 为什么 flexbox 会影响其包含列表项的标记？

Question

知道之后a list-item element cannot be display: flex at the same time ，我用容器包裹我的内容，然后将容器放入 <li /> 中.

对于有内容的元素来说一切顺利。 但是，如果容器中的第一个元素没有子节点，<li /> 的标记意外地位于底部。

虽然在我的例子中我可以简单地添加一个 display: none解决方法，我仍然感到困惑: flexbox 中的内容如何影响其祖父节点？

示例:(标记 1. 位于 <li /> 的右下角)

.flex { display: flex; }

<ol style="width: 15em">
    <li>
        <div class="flex">
            <div></div>
          <div>When an element without content is preceding, the ::marker of the list-item is located at the bottom.</div>
        </div>
    </li>
    <li>
        <div class="flex">
            <div>TITLE</div>
            <div>If there's content in the first element, then it goes as expected.</div>
        </div>
    </li>
    <li>
        <div class="flex">
            <div>It's also fine if there's only one child here.</div>
        </div>
    </li>
</ol>

相关问题: CSS伪元素::marker在流行的浏览器中没有实现，只有 Firefox 支持 @counter-style .目前，建议在 <ol /> 中实现用户定义的标记。 ？ (我看到有些人使用 ::before 来做到这一点，目的是让用户不要复制标记的文本。但我不知道它是否好。)

Answer 1

我不确定您要在元素内使用 flexbox 来完成什么，但是 display flex 内的空元素会塌陷，因此它会产生奇怪的影响。您可以通过使用 flex: number 或 flex-basis: 50px

给元素一个“大小”来解决这个问题

我会避免使用 ::marker 属性，因为它有 horrific support并使用 css 计数器简单地创建您自己的计数器。

这是一个例子:

ol {
  display:block;
  width: 30em;
  list-style: none;
  counter-reset: counterName;
}
li {
 padding-left: 2em;
 padding-bottom: 1em;
 border-bottom: 1px solid #ccc;
 margin-bottom: 1em;
 position: relative;
 counter-increment: counterName;
}
li:before {
  content:'#' counter(counterName);
  position: absolute;
  left:0;
  top:0;
}

.flex {
  display:flex;
  justify-content: space-between;
  flex-wrap:no-wrap;
}

.flex > * {
  flex: 1;
}

<ol>
    <li>
        <div class="flex">
            <div></div>
          <div>When an element without content is preceding, the ::marker of the list-item is located at the bottom.</div>
        </div>
    </li>
    <li>
        <div class="flex">
            <div>TITLE</div>
            <div>If there's content in the first element, then it goes as expected.</div>
        </div>
    </li>
    <li>
        <div class="flex">
            <div>It's also fine if there's only one child here.</div>
        </div>
    </li>
</ol>