Justify Content

Coddy'nin HTML Journey'sinin CSS ile Stil Verme 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: Ana eksen boyunca esnek öğeler için istenen hizalama; 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 hizalarken, .container-center öğesi flex öğelerini ana eksen boyunca ortalayacaktır.

Görev

Kolay

Size, üç alt bölüm (<div>) içeren iki bölümden (<div>) oluşan bir HTML belgesi 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:

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

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>