Menggunakan Property Order pada CSS

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.

8 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat