Align Items

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 47 dari 76.

Dalam CSS, property align-items mengatur perataan item flex di sepanjang sumbu silang, yaitu sumbu yang berlawanan dengan sumbu utama. Property ini membantu memosisikan item secara vertikal dalam baris atau secara horizontal dalam kolom. Property ini berguna untuk membuat tata letak lebih fleksibel dan responsif.

Berikut sintaks dasar untuk menggunakan property align-items:

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

value: Perataan yang diinginkan untuk item flex di sepanjang sumbu silang, yang dapat berupa salah satu dari berikut:

stretch: Ini adalah nilai default. Item flex direntangkan untuk mengisi container di sepanjang sumbu silang sambil tetap mengikuti min-width/max-width dan min-height/max-height.

flex-start: Item flex ditempatkan di awal sumbu silang.

flex-end: Item flex ditempatkan di ujung sumbu silang.

center: Item flex berada di tengah sepanjang sumbu silang.

baseline: Item flex disejajarkan sehingga garis dasarnya sejajar.

Contoh:

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

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

Dalam contoh ini, elemen .container-start akan meratakan item flex-nya ke awal sumbu silang, sedangkan elemen .container-center akan memusatkan item flex-nya sepanjang sumbu silang.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua elemen <div>, masing-masing berisi tiga elemen anak.

Ikuti langkah-langkah berikut:

Atur gaya elemen .seas:
- Tulis aturan CSS yang menargetkan elemen <div> dengan class .seas.
- Atur display menjadi flex untuk memungkinkan penempatan elemen anak secara fleksibel.
- Atur property align-items menjadi center untuk meratakan item flex di tengah sumbu silang.
Atur gaya elemen .oceans:
- Tulis aturan CSS yang menargetkan elemen <div> dengan class .oceans.
- Atur display menjadi flex untuk memungkinkan penempatan elemen anak secara fleksibel.
- Atur property align-items menjadi flex-end untuk meratakan item flex di ujung sumbu silang.

Coba sendiri

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