Web geliştirmeye yeni başlayanlar için Flexbox, öğeleri düzenlemek ve hizalamak için oldukça kullanışlıdır. justify-content özelliği, içeriklerin ana eksen (main axis) boyunca nasıl hizalanacağını belirler. Bu yazıda, justify-content kullanımı ve seçeneklerini detaylıca ele alacağız.
justify-content Nedir?
Flexbox kullanırken içerikleri ana eksene göre hizalamak için justify-content özelliğini kullanırız. Ana eksen yönü flex-direction ile belirlenir ve justify-content, içeriklerin bu eksen boyunca nasıl dağıtılacağını yönetir.
justify-content için kullanılabilecek değerler şunlardır:
- flex-start (varsayılan)
- flex-end
- center
- space-between
- space-around
- space-evenly
1. Varsayılan Hizalama: flex-start
.container {
display: flex;
justify-content: flex-start; /* Varsayılan değer, içerikler baştan başlar */
}
Bu durumda, öğeler ana eksenin başlangıcına hizalanır. Eğer flex-direction: row ise bu, sol tarafta toplanmaları anlamına gelir. flex-direction: column olduğunda ise en üstte hizalanırlar.
2. Sona Hizalama: flex-end
.container {
display: flex;
justify-content: flex-end;
}
Bu durumda, öğeler ana eksenin sonuna hizalanır. Eğer yatay eksende hizalanıyorsa sağda, dikey eksende hizalanıyorsa en altta toplanırlar.
3. Ortaya Hizalama: center
.container {
display: flex;
justify-content: center;
}
Bu özellik, içeriklerin ana eksenin tam ortasında hizalanmasını sağlar. Öğeler, yatay eksende ortalanabileceği gibi, dikey eksende de ortalanabilir.
4. Öğeler Arasındaki Boşluğu Dağıtma: space-between
.container {
display: flex;
justify-content: space-between;
}
Bu özellik, öğeler arasındaki boşluğun eşit olarak dağıtılmasını sağlar. Ancak, ilk ve son öğeler kapsayıcının kenarlarına yapışır ve aralarında ekstra boşluk bulunmaz.
5. Etrafında Boşluk Bırakma: space-around
.container {
display: flex;
justify-content: space-around;
}
Bu özellik, her öğenin çevresinde eşit boşluk bırakılmasını sağlar. Ancak, kenarlarda kalan boşluk, öğeler arasındaki boşluğun yarısı kadar olur.
6. Tam Eşit Boşluk Bırakma: space-evenly
.container {
display: flex;
justify-content: space-evenly;
}
Bu özellik, tüm öğeler ve kenarlar arasında eşit boşluk oluşturur. space-between ve space-around ile benzerlik gösterse de, tüm boşlukların eşit olmasıyla ayrılır.
Örnek Uygulama
Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları justify-content ile farklı şekillerde hizalayacağız:
<div class="container">
<div class="box" style="background-color: green;">1</div>
<div class="box" style="background-color: blue;">2</div>
<div class="box" style="background-color: red;">3</div>
<div class="box" style="background-color: yellow;">4</div>
<div class="box" style="background-color: purple;">5</div>
</div>
Şimdi bu öğeleri flexbox ile farklı şekillerde hizalayalım:
.container {
display: flex;
justify-content: space-between;
width: 500px;
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, beş kutu arasında eşit boşluklar oluşacaktır. Eğer justify-content değerini değiştirirsek, öğeler farklı şekillerde hizalanacaktır.
justify-content ve flex-direction İlişkisi
justify-content, her zaman ana eksene göre hizalama yapar. Ancak ana eksen, flex-direction ile değiştirilebilir. Örneğin:
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
Bu durumda, öğeler dikey olarak eşit aralıklarla yerleşecektir.
Sonuç
justify-content özelliği, içeriklerin ana eksen boyunca nasıl hizalanacağını belirleyen temel bir Flexbox özelliğidir. flex-start, flex-end, center, space-between, space-around ve space-evenly 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 justify-content ile içerik hizalamayı düzenleyebiliriz.
Flexbox ile ilgili kafanıza takılan bir şey varsa, yorumlarda paylaşabilirsiniz!