CSS Flexbox: align-content ve align-self Nedir?

Web geliştirmeye yeni başlayanlar için Flexbox, öğeleri düzenlemek ve hizalamak için oldukça kullanışlıdır. align-content ve align-self özellikleri, öğelerin çapraz eksen (cross axis) boyunca nasıl hizalanacağını belirler. Bu yazıda, bu iki özelliğin nasıl çalıştığını ve hangi durumlarda kullanıldığını detaylıca ele alacağız.

align-content Nedir?

align-content, birden fazla satır veya sütun içeren sarılmış (wrapped) öğeleri hizalamak için kullanılır. Yani, align-content yalnızca flex-wrap: wrap; kullanıldığında etkili olur.

align-content için kullanılabilecek değerler şunlardır:

1. flex-start – Satırlar çapraz eksenin başında toplanır.
2. flex-end – Satırlar çapraz eksenin sonunda toplanır.
3. center – Satırlar çapraz eksende ortalanır.
4. space-between – Satırlar arasındaki boşluklar eşit şekilde dağıtılır.
5. space-around – Satırların çevresine eşit boşluk bırakılır.
6. stretch (varsayılan) – Satırlar, kapsayıcının tüm boşluğunu kaplayacak şekilde genişletilir.

Örnek kullanım:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Bu durumda, birden fazla satır varsa, bunlar çapraz eksenin ortasına hizalanacaktır.

align-self Nedir?

align-self, align-items özelliğinin bireysel öğeler için kullanılan versiyonudur. align-items tüm öğeleri hizalarken, align-self yalnızca belirli bir öğe için hizalama yapar.

Kullanılabilecek değerler şunlardır:

1. flex-start – Sadece belirlenen öğe çapraz eksenin başına hizalanır.
2. flex-end – Sadece belirlenen öğe çapraz eksenin sonuna hizalanır.
3. center – Sadece belirlenen öğe çapraz eksenin ortasına hizalanır.
4. baseline – Sadece belirlenen öğe metin çizgisine hizalanır.
5. stretch (varsayılan) – Sadece belirlenen öğe, çapraz eksenin tüm boşluğunu kaplayacak şekilde genişletilir.

Örnek kullanım:

.container div:nth-of-type(3) {
    align-self: center;
}

Bu durumda, yalnızca üçüncü öğe çapraz eksenin ortasına hizalanacaktır.

Örnek Uygulama

Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları align-content ve align-self ile farklı şekillerde hizalayacağız:

<div class="container">
    <div class="box" style="background-color: green;">A</div>
    <div class="box" style="background-color: blue;">B</div>
    <div class="box" style="background-color: red;">C</div>
    <div class="box" style="background-color: yellow;">D</div>
    <div class="box" style="background-color: purple;">E</div>
</div>

Şimdi bu öğeleri flexbox ile farklı şekillerde hizalayalım:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 500px;
    height: 300px;
    margin: auto;
    border: 2px solid black;
}

.box {
    width: 100px;
    height: 100px;
    text-align: center;
    font-size: 20px;
    color: white;
}

.container div:nth-of-type(3) {
    align-self: flex-end;
}

Bu kodları çalıştırdığımızda:

• align-content: space-between; sayesinde satırlar arasındaki boşluklar eşit dağılacak.
• align-self: flex-end; sayesinde üçüncü öğe çapraz eksenin en altına hizalanacak.

align-content ve align-self Arasındaki Farklar

Sonuç

align-content ve align-self özellikleri, öğelerin çapraz eksende nasıl hizalanacağını belirleyen temel Flexbox özellikleridir. align-content sadece sarılmış öğeleri yönetirken, align-self tek bir öğeyi hizalar.

Öğelerin nasıl hizalanacağını belirlemek için:

• flex-direction ile ana eksenin yönünü belirleyin.
• align-content ile birden fazla satır/sütun olduğunda aralarındaki boşluğu kontrol edin.
• align-self ile sadece belirli öğelerin hizasını değiştirin.

Flexbox ile ilgili kafanıza takılan bir şey varsa, yorumlarda paylaşabilirsiniz!