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:
- flex-start
- flex-end
- center
- baseline
- 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!