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.
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.
Ö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!