flex-direction

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

Properti flex-direction menentukan arah item flex.

Properti ini menerima empat nilai:

row - item flex dari kiri ke kanan.
row-reverse - item flex dari kanan ke kiri.
column - item flex dari atas ke bawah.
column-reverse - item flex dari bawah ke atas.

Nilai default untuk container flex adalah row.

Contoh,

.container {
  display: flex;
  flex-direction: row-reverse;
}

Tantangan

Mudah

Tentukan arah flexbox yang diberikan menjadi column-reverse.

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>4</div>
        </div>
    </body>
</html>

Semua pelajaran di CSS Flexbox: Kursus Lengkap

1Pengenalan

Pengenalan Wadah dan Item

2Kontainer Flex

Flexboxflex-directionflex-wrap flex-flow justify-content align-items align-content gap Tepat di Tengah

3Item Flex

Elemen Anak order flex-grow align-self

Latihan sendiri: Playground Web