flex_order_getComputedStyle

Getting orderof flexbox items using window.getComputedStyle()

HTML

<div class="container">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
</div>

CSS

.container{
  display: flex;
  padding: 10px;
}
.container>div{
  margin: 10px;
  padding: 10px;
  border: 2px solid #000;
}
.box1 { order: 1 }
.box2 { order: 2 }
.box3 { order: 3 }
.box4 { order: 4 }

JavaScript

document.querySelector(".box1").addEventListener("click",(event)=>{
	console.log("ORDER OF A : "+window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order"));
});

document.querySelector(".box2").addEventListener("click",(event)=>{
	console.log("ORDER OF B : "+window.getComputedStyle(document.querySelector(".box2")).getPropertyValue("order"));
});

document.querySelector(".box3").addEventListener("click",(event)=>{
	console.log("ORDER OF C : "+window.getComputedStyle(document.querySelector(".box3")).getPropertyValue("order"));
});


document.querySelector(".box4").addEventListener("click",(event)=>{
	console.log("ORDER OF D : "+window.getComputedStyle(document.querySelector(".box4")).getPropertyValue("order"));
});