Menggunakan Property Order pada CSS

08/04/2017    Maykhel David    1387     Website

Dalam dunia desain website banyak sekali fungsi – fungsi yang bisa kalian gunakan dalam membuat layout baru atau memanipulasi layout yang ada, dan tentu bagi kalian yang masih dalam tahap belajar dan mungkin membutuhkan waktu untuk agar bisa menguasainya dengan baik sambil mempraktekkannya. Dari banyak sekali property css yang ada, disini saya akan memberikan sebuah trik tentang bagaimana cara menggunakan fungsi order pada css, pada artikel kali ini kita akan fokus mengenai fungsi property css bernama “order” yang memang memiliki fungsi sederhana, yaitu untuk mengatur isi dan urutan dari beberapa elemen html

Pada kasus kali ini kita akan menggunakan 5 buah kotak yang saya buat menggunakan div pada html seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Order CSS</title>
</head>
<body>
<div class="container">
    <div class="box" id="box1"> 1 </div>
    <div class="box" id="box2"> 2 </div>
    <div class="box" id="box3"> 3 </div>
    <div class="box" id="box4"> 4 </div>
    <div class="box" id="box5"> 5 </div>
</div>
</body>
</html>

 

Sekarang kita akan membuat sebuah tampilan dasar menggunakan css seperti berikut

.container    {
    width: 250px;
    margin: auto;
    display: flex;
}
.box{
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px magenta;
}

 

Maka hasilnya akan seperti ini

Menggunakan Property Order pada CSS

 

Sekarang kita akan memberikan property order pada kelima elemen diatas untuk mengubah urutannya seperti berikut.

div#box1 {order:3;}
div#box2 {order:1;}
div#box3 {order:2;}
div#box4 {order:6;}
div#box5 {order:4;}

maka hasilnya akan terlihat seperti ini

Menggunakan Property Order pada CSS

 

saya sudah berikan warna yang berbeda agar mudah terlihat urutan awal dengan urutan yang baru kita ubah dengan cara menggunakan property order pada css.

Sekarang kita akan coba dengan hal urutan lainnya seperti ini

div#box1 {order:5;}
div#box2 {order:4;}
div#box3 {order:3;}
div#box4 {order:2;}
div#box5 {order:1;}

Maka hasilnya akan seperti ini

Menggunakan Property Order pada CSS

Dari demonstrasi diatas kita bisa ambil kesimpulan bahwa urutan elemen html bisa diubah sesuai keinginan kita dengan syarat parent elemen harus memiliki property display: flex agar property order dapat berjalan dengan baik

Baiklah teman – teman, demikian artikel tentang cara menggunakan property order pada css. Semoga bermanfaat.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More