CSS Flexbox: flex-direction Nedir?

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:

1. row (varsayılan)
2. row-reverse (ters sıra)
3. column (dikey hizalama)
4. 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!