flex order

by Henery Yang

HTML

<div class="flex-container flex-start">
  <div class="flex-item order-0">
    <p>item 1</p>
    <p>order:0</p>
  </div>
  <div class="flex-item order-2">
    <p>item 2</p>
    <p>order:1</p>
  </div>
  <div class="flex-item order--1">
    <p>item 3</p>
    <p>order:-1</p>
  </div>
  <div class="flex-item order-0">
    <p>item 4</p>
    <p>order:0</p>
  </div>
  <div class="flex-item order-2">
    <p>item 5</p>
    <p>order:2</p>
  </div>
</div>

CSS

.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: #FFD54F;
  margin-right: 5px;
  text-align: center;
}

.flex-item {
  background-color: #ffffff;
  width: 80px;
  margin: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.order--1 {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}