3列网格布局，其宽度与动态内容隔开

Question

我正在尝试通过动态内容实现以下布局：

代码：

.container {
  display: flex;
  flex-direction:row;
  justify-content:space-between;
}

<div class="container">
   <span>Published</span>
   <span>Song title</span>
   <span>Edit song</span>
</div>

最好的解决方法是，考虑到有时每个跨度的文本并不总是出现，我希望它们的布局固定，这样即使其中一个文本没有出现永远留在同一个地方。谢谢！

上面我用display:flex尝试过的原始代码不起作用，因为当文本不出现时，网格折叠了。

Answer 1

添加以下CSS

.container {
  display: flex;
  flex-direction:row;
  justify-content:space-between;
}

https://jsfiddle.net/hxazcg71/