Align Items

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 47 / 76.

CSS'de align-items özelliği, esnek öğelerin çapraz eksen (ana eksenin tersi) boyunca nasıl hizalanacağını kontrol eder. Öğelerin bir satırda dikey olarak veya bir sütunda yatay olarak konumlandırılmasına yardımcı olur. Bu özellik, düzenleri daha esnek ve duyarlı hale getirmek için kullanışlıdır.

İşte align-items özelliğini kullanmak için temel sözdizimi:

.container {
    display: flex;
    align-items: value;
}

value: Esnek öğelerin çapraz eksen boyunca hizalanması için istenen değer; aşağıdakilerden biri olabilir:

stretch: Bu, varsayılan değerdir. Esnek öğeler, min-width/max-width ve min-height/max-height değerlerine uyarak kapsayıcıyı çapraz eksen boyunca dolduracak şekilde esnetilir.

flex-start: Flex öğeleri çapraz eksenin başlangıcına yerleştirilir.

flex-end: Flex öğeleri çapraz eksenin sonunda yerleştirilir.

center: Flex öğeleri çapraz eksen boyunca ortalanır.

baseline: Flex öğeleri, taban çizgileri hizalanacak şekilde hizalanır.

Örneğin:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Bu örnekte, .container-start öğesi esnek öğelerini çapraz eksenin başına hizalayacak, .container-center öğesi ise esnek öğelerini çapraz eksen boyunca ortalayacaktır.

Görev

Kolay

Her biri üç alt bölüm içeren iki bölümden (<div>) oluşan bir HTML belgeniz var.

Aşağıdaki adımları izleyin:

<strong>.seas</strong> öğesini biçimlendirin:
- <div> sınıfına sahip .seas öğesini hedefleyen bir CSS kuralı yazın.
- Alt öğelerin esnek şekilde konumlandırılmasını etkinleştirmek için display değerini flex olarak ayarlayın.
- Esnek öğeleri çapraz eksenin ortasına hizalamak için align-items özelliğini center olarak ayarlayın.
<strong>.oceans</strong> öğesini biçimlendirin:
- <div> sınıfına sahip .oceans öğesini hedefleyen bir CSS kuralı yazın.
- Alt öğelerin esnek şekilde konumlandırılmasını etkinleştirmek için display değerini flex olarak ayarlayın.
- Esnek öğeleri çapraz eksenin sonuna hizalamak için align-items özelliğini flex-end olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>