<h2>order:value</h2>
<p>value(값) Items을 모두 0인상태 입니다.</p>
<div class="container flex1">
  <div class="flexbox items1">1-1</div>
	<div class="flexbox items2">1-2</div>
	<div class="flexbox items3">1-3</div>
  <div class="flexbox items4">1-4</div>
  <div class="flexbox items5">1-5</div>
</div>
<p>value(값) Items전부 지정하여 순서를 변경한 상태 입니다.</p>
<div class="container flex2">
	<div class="flexbox items1">2-1</div>
	<div class="flexbox items2">2-2</div>
	<div class="flexbox items3">2-3</div>
  <div class="flexbox items4">2-4</div>
  <div class="flexbox items5">2-5</div>
</div>
* {
  box-sizing:border-box;
}
h2 {
  margin:20px 0 5px 0;
}
p {
  margin:5px 0;
  padding:5px 10px;
  border-left:#dfdfdf solid 3px;
}
.container {
  border:#ffcc00 solid 1px;
  padding:10px;
  margin-bottom:5px;
  display:flex;
}
.flexbox {
  color:#fff;
  padding:10px;
  margin-right:5px;
  text-aling:center;
  background-color:#ffcc00;
}
.flex1>.items1 {order:0}
.flex1>.items2 {order:0}
.flex1>.items3 {order:0}
.flex1>.items4 {order:0}
.flex1>.items5 {order:0}

.flex2>.items1 {order:2}
.flex2>.items2 {order:0}
.flex2>.items3 {order:5}
.flex2>.items4 {order:4}
.flex2>.items5 {order:3}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.