如何在Flexbox内部使内联元素嵌入内联

Question

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container span {
  border-bottom: 1px solid red;
}

<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>

我希望标题出现在屏幕中间，作为旧的内联元素。但是在flex容器中，它像块级元素一样被扩展。

我在这里缺少什么？

演示：https://jsfiddle.net/rk5h5ph7/

Answer 1

我不完全明白你想要什么，但尝试一下我的建议。

尝试将其添加到if (window.location.href == "xxxxxxx.com") { location = "mmmmmmmmmm111.com" } ：

.container span

或将其添加到text-align: center; ：

.container

Answer 2

用align-itmes替换justify-content

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container span {
  border-bottom: 1px solid red;
}

<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>