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

eminbasbayan

3 dk okuma

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

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

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:

flex-start – Satırlar çapraz eksenin başında toplanır.
flex-end – Satırlar çapraz eksenin sonunda toplanır.
center – Satırlar çapraz eksende ortalanır.
space-between – Satırlar arasındaki boşluklar eşit şekilde dağıtılır.
space-around – Satırların çevresine eşit boşluk bırakılır.
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.

TEXT?

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:

flex-start – Sadece belirlenen öğe çapraz eksenin başına hizalanır.
flex-end – Sadece belirlenen öğe çapraz eksenin sonuna hizalanır.
center – Sadece belirlenen öğe çapraz eksenin ortasına hizalanır.
baseline – Sadece belirlenen öğe metin çizgisine hizalanır.
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.

TEXT?

Ö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

Özellik	Açıklama
align-content	Sarılmış (wrapped) öğeler arasında boşluk dağıtır.
align-self	Sadece belirli bir öğeyi hizalar.

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!