CSS Flexbox: align-items Nedir?

Web geliştirmeye yeni başlayanlar için Flexbox, öğeleri düzenlemek ve hizalamak için oldukça kullanışlıdır. align-items özelliği, öğelerin çapraz eksen (cross axis) boyunca nasıl hizalanacağını belirler. Bu yazıda, align-items kullanımı ve seçeneklerini detaylıca ele alacağız.

align-items Nedir?

Flexbox kullanırken içeriklerin çapraz eksende nasıl hizalanacağını belirlemek için align-items özelliğini kullanırız.

justify-content özelliği ana eksen boyunca hizalama yaparken, align-items özelliği çapraz eksen boyunca hizalamayı yönetir.

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

1. flex-start
2. flex-end
3. center
4. baseline
5. stretch (varsayılan)

1. Başlangıca Hizalama: flex-start

.container {
    display: flex;
    align-items: flex-start; /* Öğeleri çapraz eksenin başlangıcına hizalar */
}

Bu durumda, öğeler çapraz eksenin başlangıcına hizalanır. Eğer flex-direction: row ise öğeler üst tarafa, flex-direction: column ise sol tarafa hizalanır.

2. Sona Hizalama: flex-end

.container {
    display: flex;
    align-items: flex-end;
}

Bu durumda, öğeler çapraz eksenin sonuna hizalanır. flex-direction: row olduğunda öğeler en altta toplanırken, flex-direction: column olduğunda sağa yaslanır.

3. Ortaya Hizalama: center

.container {
    display: flex;
    align-items: center;
}

Bu özellik, içeriklerin çapraz eksende tam ortada hizalanmasını sağlar. Eğer justify-content: center da kullanılırsa öğeler tam ortalanır.

4. Metin Satırlarını Hizalama: baseline

.container {
    display: flex;
    align-items: baseline;
}

Bu özellik, öğeleri içerdikleri metnin alt çizgisine (baseline) göre hizalar. Eğer her öğede farklı boyutlarda metin varsa, hepsi aynı metin çizgisine hizalanır.

5. Kapsayıcıya Göre Büyütme: stretch (Varsayılan)

.container {
    display: flex;
    align-items: stretch;
}

Bu özellik, öğeleri kapsayıcının yüksekliğini/sütunun genişliğini tamamen kaplayacak şekilde büyütür. Eğer öğelerin belirli bir yüksekliği yoksa, kapsayıcıya kadar uzar.

Örnek Uygulama

Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları align-items 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;
    align-items: center;
    width: 500px;
    height: 300px;
    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, öğeler kapsayıcının çapraz ekseninde ortalanacaktır. Eğer align-items: flex-end; kullanırsak, öğeler en alt kısma hizalanacaktır.

align-items ve flex-direction İlişkisi

align-items, her zaman çapraz eksene göre hizalama yapar. Ancak çapraz eksen, flex-direction ile değiştirilebilir. Örneğin:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Bu durumda, öğeler dikey olarak sıralanır ve yatay eksenin ortasına hizalanır.

Sonuç

align-items özelliği, öğelerin çapraz eksende nasıl hizalanacağını belirleyen temel bir Flexbox özelliğidir. flex-start, flex-end, center, baseline ve stretch değerleri ile farklı hizalama seçenekleri sunar.

Öğelerin nasıl hizalanacağını belirlemek için, önce flex-direction ile ana eksenin yönünü belirleyip, ardından align-items ile öğelerin nasıl davranacağını düzenleyebiliriz.

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