Mengenal Lebih dalam Property Order pada CSS3

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Mengenal Lebih dalam Property Order pada CSS3.  Property order pada CSS3 ini merupakan sebuah property dimana fungsinya untuk menentukan sebuah urutan element secara flexible.

Untuk lebih jelasnya mari kita langsung praktek saja ya teman-teman, pertama-tama jalankan/run text-editor yang teman-teman gunakan, kemudian ketiklah/copy script HTML dibawah ini :

<div class="container">
      <div class="green">1</div>
      <div class="yellow">2</div>
      <div class="red">3</div>
</div>

Jika sudah, langkah selanjutnya teman-teman masukan style CSS nya seperti dibawah ini :

<style>
      .container {
        height: 200px;
        font: bold 35px/200px sans-serif;
        text-align: center;
        color: white;
        display: flex;
      }	
      .container div {
        width: 300px;
        flex: auto;
      }
      .green {
        background: green;
        order: 3;
      }
      .yellow {
        background: yellow;
        order: 2;
      }
      .red {
        background: red;
        order: 1;
      }
</style>

Oke lanjut, Jika sudah dengan HTML dan CSSnya maka hasil dari kedua script/code diatas akan menjadi seperti pada dibawah ini :

<!DOCTYPE html>
<html>
  <head>
    <title>Property Order</title>
    <style>
      .container {
        height: 200px;
        font: bold 35px/200px sans-serif;
        text-align: center;
        color: white;
        display: flex;
      }	
      .container div {
        width: 300px;
        flex: auto;
      }
      .green {
        background: green;
        order: 3;
      }
      .yellow {
        background: yellow;
        order: 2;
      }
      .red {
        background: red;
        order: 1;
      }
    </style>
  </head>
  <body>      
    <div class="container">
      <div class="green">1</div>
      <div class="yellow">2</div>
      <div class="red">3</div>
    </div>
  </body> 
</html>

Setelah memasukan script HTML dan CSS sesuai pada step-step diatas maka langkah selanjutnya teman-teman hanya tinggal menjalankan/run dibrowser yang teman-teman gunakan, jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :

Perhatikan pada gambar hasil diatas ya teman-teman, digambar tersebut ada before yang merupakan hasil dari code diatas sebelum menggunakan property order (default). Sedangkan yang after merukapan hasil dari code diatas yang sudah menggunakan property order. Jadi kurang lebihnya seperti itulah fungsi dari property order pada CSS3. Silahkan teman-teman mengambil kesimpulannya sendiri dari contoh diatas.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Mengenal Lebih dalam Property Order pada CSS3 semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih