Align Items

Coddy'nin HTML Journey'sinin Styling with CSS 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: Flex öğelerinin çapraz eksen boyunca istenen hizalamasıdır ve aşağıdakilerden biri olabilir:

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

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: 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

Size, her biri üç alt bölme içeren iki bölmeli (<div>) bir HTML belgesi verilmiştir.

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

<strong>.seas</strong> öğesini stillendirin:
- .seas sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
- Alt öğelerin esnek konumlandırılmasını sağlamak için display özelliğini flex olarak ayarlayın.
- Esnek öğeleri (flex items) çapraz eksenin ortasında hizalamak için align-items özelliğini center olarak ayarlayın.
<strong>.oceans</strong> öğesini stillendirin:
- .oceans sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
- Alt öğelerin esnek konumlandırılmasını sağlamak için display özelliğini flex olarak ayarlayın.
- Esnek öğeleri çapraz eksenin sonunda hizalamak için align-items özelliğini flex-end olarak ayarlayın.

Kopya kağıdı

align-items özelliği, esnek öğelerin çapraz eksen (ana eksenin tersi) boyunca nasıl hizalanacağını kontrol eder:

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

Kullanılabilir değerler:

stretch: Varsayılan. Öğeler kapsayıcıyı dolduracak şekilde esner
flex-start: Öğeler çapraz eksenin başına yerleştirilir
flex-end: Öğeler çapraz eksenin sonuna yerleştirilir
center: Öğeler çapraz eksen boyunca ortalanır
baseline: Öğeler taban çizgilerine göre hizalanır

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

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

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>