SOURCE

flex 是flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局。

Webkit内核的浏览器，必须加上-webkit前缀。
.box{
  display:-webkit-flex; /*Safari*/
  display: flex;
}
注：设为flex布局后，子元素的float、clear、和vertical-aligin属性将失效

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<div style="width:150px;border: 1px solid #6cf;white-space:nowrap;">这是一段文字这是一段文字</div>

.container{
  display: flex;
  //flex-direction: row； // 默认值，从左往右排列
  flex-direction: row-reverse; //
}
.box{
  width: 100px;
  height: 100px;
  background: #6cf;
  margin-top: 20px;
  margin-left: 20px;
  color: #fff;
  text-align: center;
}