Önceki yazı için bkz: CSS Flexbox flex Özelliği Nedir ve Nasıl Kullanılır?
CSS'te Flexbox kullanımının ne kadar kolaylıklar sağladığını ve öğrenmesinin de kolay olduğunu dünden beridir yazdığım yazılar ile göstermeye çalışıyorum ve bu yazıda da flexbox elemanlarının kendi aralarında sıralanmasının ne kadar kolaylıkla yapılabileceğini göstereceğim. Flexbox'ta sıralama işlemleri için order özelliği kullanılır ve eğer order özelliği ilgili css kodlarında yazılmadı ise default (varsayılan) değeri 0'dır (sıfır). order özelliği için negatif değerler de kullanılabilir ve elemanlar order özellikleri kıyaslanarak sıralanırlar.
Bir flex container içinde 5 adet div'i kendi içinde 3 2 5 1 4 olarak sıralamak için tek yapmamız gereken aşağıdaki gibi css kodlarında order özelliklerini güncellemektir:
.alt:nth-child(1) {order: 4;}
.alt:nth-child(2) {order: 2;}
.alt:nth-child(3) {order: 1;}
.alt:nth-child(4) {order: 5;}
.alt:nth-child(5) {order: 3;}
Tüm sayfanın html kodları şu şekilde:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flexbox Direction Reitix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta http-equiv="refresh" content="2" >
<style>
.ust{background-color: indigo; display: flex; flex-direction: row; flex-wrap: nowrap;
justify-content: center; align-items: flex-start; }
.alt{background-color: hotpink; margin: 10px; color: white; width: 100px; flex-grow: 1; }
.alt:nth-child(1) {order: 4;}
.alt:nth-child(2) {order: 2;}
.alt:nth-child(3) {order: 1;}
.alt:nth-child(4) {order: 5;}
.alt:nth-child(5) {order: 3;}
</style>
</head>
<body>
<div class="ust">
<div class="alt">1</div>
<div class="alt">2</div>
<div class="alt">3</div>
<div class="alt">4</div>
<div class="alt">5</div>
</div>
</body>
</html>