Web geliştirmeye yeni başlayanlar için Flexbox, öğeleri düzenlemek ve hizalamak için oldukça kullanışlıdır. flex-direction özelliği, öğelerin hangi yönde hizalanacağını belirleyen en önemli özelliklerden biridir. Bu yazıda, flex-direction kullanımı ve seçeneklerini detaylıca ele alacağız.
Flexbox ve Ana Eksen
Flexbox sistemi, içerideki öğeleri hizalamak için bir ana eksen (main axis) kullanır. Varsayılan olarak, bu eksen soldan sağa doğru ilerler. Ancak, flex-direction kullanarak bu eksenin yönünü değiştirebiliriz.
Flexbox yönünü belirlerken kullanabileceğimiz dört farklı değer vardır:
- row (varsayılan)
- row-reverse (ters sıra)
- column (dikey hizalama)
- column-reverse (ters dikey hizalama)
1. Varsayılan Yön: flex-direction: row
.container {
display: flex;
flex-direction: row; /* Soldan sağa hizalar (varsayılan) */
}
Bu durumda, öğeler soldan sağa dizilir. Web sayfalarında en sık kullanılan yönlerden biridir.
2. Ters Sıralama: flex-direction: row-reverse
.container {
display: flex;
flex-direction: row-reverse;
}
Bu özellik ile öğeler sağdan sola sıralanır. Normalde ilk sırada olan öğe en sona, son sırada olan öğe en başa geçer.
3. Dikey Hizalama: flex-direction: column
.container {
display: flex;
flex-direction: column;
}
Bu özellik ile öğeler üstten aşağıya doğru sıralanır. Yani, öğeler bir sütun halinde yerleşir.
4. Ters Dikey Hizalama: flex-direction: column-reverse
.container {
display: flex;
flex-direction: column-reverse;
}
Bu sefer öğeler aşağıdan yukarıya doğru sıralanır. Son öğe en üste, ilk öğe en alta geçer.
Örnek Uygulama
Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları flex-direction ile farklı şekillerde hizalayacağız:
<div class="container">
<div class="box" style="background-color: green;">1</div>
<div class="box" style="background-color: blue;">2</div>
<div class="box" style="background-color: red;">3</div>
<div class="box" style="background-color: yellow;">4</div>
<div class="box" style="background-color: purple;">5</div>
</div>
Şimdi bu öğeleri flexbox ile farklı yönlerde hizalayalım:
.container {
display: flex;
flex-direction: row;
width: 500px;
margin: auto;
border: 2px solid black;
}
.box {
width: 100px;
height: 100px;
text-align: center;
font-size: 20px;
color: white;
}
Bu kodları çalıştırdığımızda, beş kutu yan yana sıralanacaktır. Eğer flex-direction değerini column yaparsak, bu kutular dikey hizalanacaktır.
Sonuç
flex-direction özelliği, Flexbox kullanarak öğeleri hizalamak için temel bir özelliktir. Öğelerin hizalanma yönünü değiştirmek için row, row-reverse, column ve column-reverse değerlerinden birini kullanabiliriz.
Flexbox ile ilgili kafanıza takılan bir şey varsa, yorumlarda paylaşabilirsiniz!