Question

我在flexbox span内的.time-pretext内有一个div（a），如下所示：

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="time-pretext">I have</span>60 minutes</div>
</a>

.option-text此处获取flex-direction: column，当我为其提供该属性时，该范围将仅采用块显示选项（block或-webkit-box）而不是内联显示（ inline-block）。为什么呢？

顺便说一下，它在原始的flexbox实现（display: -webkit-box）中工作正常。只有在最新的实现（display: flex）中才会出现这种情况。

Answer 1

我假设你的.option-text有display:flex（否则设置flex-direction就没有意义了）。鉴于此，您描述的行为实际上是flexbox规范所要求的 - flex容器的子项被强制使用块状显示类型。

具体来说，规范说：

Flex容器的每个子项都变为flex项[...] Flex项的计算“显示”是通过应用CSS 2.1 Chapter 9.7
中的表来确定的。

来源：http://www.w3.org/TR/css3-flexbox/#flex-items

它引用的表，从CSS 2.1，基本上将非块转换为块。

如果您不想要此行为，只需将<span>包裹在<div>中，然后<div>将扮演弹性项目的角色，以便{{1可以保持其显示类型。

Answer 2

@dholbert给出的答案自然是正确的。但是，对于Chrome，Edge和Firefox浏览器，还有另一种对我有用的解决方案。您必须将display CSS属性设置为contents。

您的情况是：

span.time-pretext {
    display: contents;
}

或更一般的解决方案：

CSS：

span.flex-inline {
    display: contents;
}

HTML：

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="flex-inline time-pretext">I have</span>60 minutes</div>
</a>

<span>元素拒绝在flexbox中内联</span>

2 个答案: