CSS Flexbox: justify-content Nedir?

eminbasbayan

3 dk okuma

🔍 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. 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

TEXT?

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!