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, flex öğelerinin çapraz eksen boyunca (ana eksenin karşıtı) nasıl hizalanacağını kontrol eder. Öğeleri bir satırda dikey olarak veya bir sütunda yatay olarak konumlandırmaya yardımcı olur. Bu özellik, düzenleri daha esnek ve duyarlı hâle getirmek için kullanışlıdır.

align-items özelliğini kullanmanın temel sözdizimi şöyledir:

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

value: Esnek öğelerin çapraz eksen boyunca istenen hizalaması; aşağıdakilerden biri olabilir:

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

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

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

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

baseline: Esnek öğeler, 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şlangıcına hizalar, .container-center öğesi ise esnek öğelerini çapraz eksen boyunca ortalar.

Görev

Kolay

Size, her biri üç alt bölüm içeren iki bölümlü (<div>) bir HTML belgesi veriliyor.

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

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