align-self

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

Property align-self memungkinkan kamu mengesampingkan property flexbox align-items untuk setiap item flex.

Property ini memiliki nilai yang sama dengan align-items:

flex-start
flex-end
center
stretch
baseline

Contoh:

.item {
  align-self: center;
}

Tantangan

Mudah

Kamu diberi flexbox dengan tiga item, tambahkan align-self ke setiap item flex.

Gunakan nilai flex-start, flex-end, dan center untuk setiap item, dalam urutan apa pun.

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-content align-items align-content gap Tepat di Tengah

3Item Flex

Elemen Anak order flex-growalign-self

Latihan sendiri: Playground Web