align-items

Pelajaran 8 dari 15 dalam kursus CSS Flexbox: Kursus Lengkap di Coddy.

Property align-items menentukan perataan pada sumbu silang.

Sumbu silang horizontal untuk arah kolom dan vertikal untuk arah baris.

Property ini menerima lima nilai:

flex-start - meratakan item ke awal sumbu silang.
flex-end - meratakan item ke akhir sumbu silang.
center - meratakan item ke tengah sumbu silang.
stretch - item merenggang untuk mengisi container pada sumbu silang.
baseline - item diratakan sehingga baseline-nya sejajar.

Nilai default container flex adalah stretch.

Contoh,

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

Tantangan

Mudah

Tentukan perataan pada sumbu silang flexbox yang diberikan menjadi center.

Kamu harus mencoba semua nilainya!

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Semua pelajaran di CSS Flexbox: Kursus Lengkap

1Pengenalan

Pengenalan Wadah dan Item

2Kontainer Flex

Flexbox flex-direction flex-wrap flex-flow justify-contentalign-itemsalign-content gap Tepat di Tengah

3Item Flex

Elemen Anak order flex-grow align-self

Latihan sendiri: Playground Web