order
Pelajaran 13 dari 15 dalam kursus CSS Flexbox: Kursus Lengkap di Coddy.
Property order menentukan prioritas item flex tertentu.
Secara default, item flex diurutkan sesuai urutan dalam kode sumber, tetapi kamu dapat mengubah urutan ini menggunakan property order.
Property order menerima angka sebagai nilai. Semakin tinggi angkanya, semakin tinggi prioritas item flex tersebut (yang muncul di bagian akhir).
Contoh,
.item {
order: 5;
}Nilai default-nya adalah 0.
Item dengan
orderyang sama mengikuti urutan dalam kode sumber.
Tantangan
MudahKamu diberi flexbox dengan enam item flex. Tambahkan properti order pada item flex genap (2, 4, 6) agar urutan item menjadi:
1, 3, 5, 2, 4, 6
Kamu bisa menggunakan id dan class HTML untuk memilih elemen tertentu di CSS.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Semua pelajaran di CSS Flexbox: Kursus Lengkap
Latihan sendiri: Playground Web