#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

justify-content属性有五个值：

• flex-start（默认值）
• flex-end
• center
• space-between
• space-around

在所有情况下，三个div在同一行上。有关每个值的描述，请参见：https://stackoverflow.com/a/33856609/3597276

flexbox的好处：

1. 代码量少，非常高效
2. 垂直和水平居中非常简单
3. 等高列非常简单
4. 多种选项用于对齐flex元素
5. 响应式
6. 与浮动和表格不同，浮动和表格的布局能力有限，因为它们从未用于构建布局， flexbox是一种具有广泛选项的现代（CSS3）技术。

了解更多关于flexbox的信息：

• 对齐Flex项的方法
• 使用CSS弹性盒 ~ MDN
• Flexbox完全指南 ~ CSS-Tricks
• Flexbox是什么？！ ~ YouTube视频教程

浏览器支持： Flexbox受到所有主要浏览器的支持，除了IE < 10。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。更多详细信息请参见这个答案。