Justify Content

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 46 / 76.

CSS'de justify-content özelliği, esnek öğelerin bir esnek kapsayıcının ana ekseni boyunca nasıl boşluklandırılacağını kontrol eder. Boş yer kaldığında öğeleri hizalamaya ve fazladan alanı dağıtmaya yardımcı olur. Bu özellik, öğeleri yatay (bir satırda) veya dikey (bir sütunda) olarak konumlandırmak için kullanışlıdır ve düzenleri daha esnek ve duyarlı hale getirir.

justify-content özelliğini kullanmak için temel sözdizimi şöyledir:

.container {
    display: flex;
    justify-content: value;
}

value: Flex öğelerinin ana eksen boyunca istenen hizalamasıdır ve aşağıdakilerden biri olabilir:

flex-start: Bu varsayılan değerdir. Öğeler satırın başına doğru yerleştirilir.

flex-end: Öğeler satırın sonuna doğru yerleştirilir.

center: Öğeler satır boyunca ortalanır.

space-between: Öğeler, ilk öğe başta ve son öğe sonda olacak şekilde satır boyunca eşit olarak dağıtılır.

space-around: Öğeler satır boyunca eşit olarak dağıtılır ve çevrelerinde eşit boşluk bırakılır.

space-evenly: Öğeler, herhangi iki öğe arasındaki boşluk (ve kenarlara olan boşluk) eşit olacak şekilde dağıtılır.

Örneğin:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Bu örnekte, .container-start öğesi flex öğelerini ana eksenin başlangıcına hizalayacaktır, .container-center öğesi ise flex öğelerini ana eksen boyunca ortalayacaktır.

Görev

Kolay

İki adet bölüm (<div>) ve bu bölümlerin içinde üçer adet alt bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Üst bölümler display: flex; kullanılarak zaten bir flex kapsayıcısı olarak ayarlanmıştır. Göreviniz, flex öğelerini ana eksen boyunca hizalamak için justify-content özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

fruits sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
Flex öğelerini ana eksen boyunca ortalamak için .fruits öğesinin justify-content özelliğini center olarak ayarlayın.
vegetables sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
Flex öğelerini ana eksen boyunca dağıtmak için .vegetables öğesinin justify-content özelliğini space-between olarak ayarlayın.

Kopya kağıdı

justify-content özelliği, esnek öğelerin bir esnek kapsayıcının ana ekseni boyunca nasıl boşluklandırılacağını kontrol eder:

.container {
    display: flex;
    justify-content: value;
}

Mevcut değerler:

flex-start: Öğeler başlangıca doğru paketlenir (varsayılan)
flex-end: Öğeler sona doğru paketlenir
center: Öğeler çizgi boyunca ortalanır
space-between: Öğeler eşit olarak dağıtılır; ilki başlangıçta, sonuncusu sondadır
space-around: Öğeler, etraflarında eşit boşluk olacak şekilde eşit olarak dağıtılır
space-evenly: Öğeler, herhangi iki öğe arasında eşit boşluk olacak şekilde dağıtılır

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Kendin dene

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>