Properti order bisa kalian gunakan untuk menentukan urutan pada flex dan grid. Jika properti order bernilai 0 atau tidak digunakan, urutan item dalam flex atau grid akan disesuaikan dengan urutan elemen di dalam kode HTML. Order bisa kalian beri nilai dari 1 hingga sebanyak item yang ada. Sama seperti elemen lain, kalian juga bisa memberikan nilai initial dan inherit. Penggunaan order dalam kode HTML bisa kalian lihat dibawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
.kontainer_flex div {
color : red;
background : yellow;
border : solid 2px gold;
width : 25%;
margin : 0%;
}
.kontainer_flex {
height : 10%;
width : 100%;
display : flex;
flex-flow : row wrap;
justify-content : center;
}
.kontainer_grid div {
color : gold;
background : green;
border : solid 2px gold;
}
.kontainer_grid {
height : 20%;
width : 100%;
display : grid;
grid-template-columns: 33.3% auto;
grid-template-rows : 67% auto;
}
</style>
</HEAD>
<BODY>
<H3>Flex (Tanpa order)</H3>
<section class="kontainer_flex">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
<H3>Flex (Dengan order)</H3>
<section class="kontainer_flex">
<div style="order:4">
item1
</div>
<div style="order:2">
item2
</div>
<div style="order:1">
item3
</div>
<div style="order:3">
item4
</div>
</section>
<H3>Grid(Tanpa order)</H3>
<section class="kontainer_grid">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
<H3>Grid(Dengan order)</H3>
<div class="kontainer_grid">
<div style="order:4">
item1
</div>
<div style="order:2">
item2
</div>
<div style="order:1">
item3
</div>
<div style="order:3">
item4
</div>
</section>
</BODY>
</HTML>
Kode HTML di atas menggunakan 4 kontainer berupa tag <section>. Setiap kontainer berisi 4 child. Selain itu, contoh tersebut juga menggunakan beberapa properti grid dan flex.
Kalian seharusnya bisa melihat kalau elemen div mempunyai isi yang menggunakan angka berurutan. Saat tidak ada properti order, susunannya sesuai dengan urutan penulisan dalam kode HTML. Urutan tersebut berubah saat properti order digunakan, walaupun isi setiap kontainer tidak berubah.