<span>元素在flexbox中无法变成行内元素

Question

我有一个位于弹性盒子 a 内部的 div，其中包含一个 span（.time-pretext），就像这样：

<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，当我给它该属性时，span元素只能采用块级别的显示选项（block或者-webkit-box），而不能使用行内级别的选项（inline-block）。为什么呢？

顺便提一下，在原始的弹性盒子实现中（display: -webkit-box），这个问题没有出现。只有在最新的实现中（display: flex）才会出现。

- futuraprime

---

你能给我们提供一个 Fiddle 吗？ - 2507rkt3

Answer 1

我假设你的 .option-text 具有 display:flex（否则在其上设置 flex-direction 将毫无意义）。鉴于此，您所描述的行为实际上是 flexbox 规范所要求的-- flex 容器的子项被强制具有块状显示类型。 具体来说，规范说：

flex 容器的每个子级都成为一个 flex 项[...] flex 项的计算“显示”是通过应用 CSS 2.1 第9.7章 中的表格来确定的。

来源：http://www.w3.org/TR/css3-flexbox/#flex-items 它所指的来自 CSS 2.1 的那个表格基本上将非块转换为块。

如果您不想要这种行为，只需将您的 <span> 包装在一个 <div> 中，那么 <div> 将扮演 flex 项的角色，从而使 <span> 保持其显示类型。

- dholbert

---

请注意，实际上是 display: flex 触发了子元素的显示转换为块级元素，而不是像原问题中暗示的那样是 flex-direction: column。我猜测 flex-direction: column 只是以其他方式改变了呈现方式，以使 span 元素强制成为块级元素更加明显。 - dholbert

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>

- Guybrush

---

使用 display: contents 是一种优雅的方法，这个答案值得更多的认可。想要了解更多关于 display: contents 的内容，请阅读 Rachel Andrew 在 Vanishing boxes with display contents 和 Why display: contents is not CSS Grid Layout subgrid 上的文章。 - Rounin

这是一个更好的解决方案！！！+1 - Bjarke