css3 弹性盒子对象元素order的顺序

order 属性 设置或检索弹性盒模型对象的子元素出现的順序：数值越小越靠前 排列,数值越大越靠后排列，默认值为0，可以为负值。

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

css：

.container {
  display: flex;
  flex-flow: column;
  display: -webkit-flex;
  outline: 1px dashed red;
  width: 600px;
  margin: 200px auto;
}

.item {
  width: 150px;
  height: 150px;
  background-color: #b4b4b4;
  margin: 10px;
}

代码演示：

在此基础上添加order属性以此调整排放顺序：

/* 设弹性元素的（在主轴上的）排列顺序 数值越小越靠前 排列,数值越大越靠后 排列。 */
.item1 {
  order: 3;
}

.item2 {
  order: 1;
}

.item3 {
  order: 2;
}

/* .item4这个元素，是排列最靠前的元素 */
.item4 {
  order: -1;
}

代码演示：