将第一个 div 向左对齐，随后的 div 向右对齐

我希望在同一水平线上显示三段文本，如下所示：

|                                                            |
| Chapter one                              Language: English |               
|                                                            |

我在用|代表窗口的最左边或最右边。这就是我现在所拥有的：

<div>
<div>Chapter one</div>
<div>Language:</div>
<div>English</div>
</div>

文本English最终将被组合框取代。我应该如何设计我的 div 样式？

#container {
  display: flex;
}
#container > div:first-child {
  margin-right: auto;
}

<div id="container">
  <div>Chapter one</div>
  <div>Language:&nbsp;</div>
  <div>English</div>
</div>

无论您最终在右侧有一个还是两个 div（取决于您的组合框设置），上述方法都将起作用。它基本上保持第一个 div 向左齐平，其他一切向右冲洗。

更多详细信息请参见此处：

• 使用 Flexbox 水平对齐三个 Div
• 对齐 Flex 项目的方法

浏览器支持： 所有主流浏览器都支持 Flexbox，IE 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用自动前缀器。更多详情请参阅这个答案.