Arah Flex

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

Dalam CSS, property flex-direction mengatur arah penataan item di dalam flex container. Property ini menentukan apakah item ditempatkan dalam baris atau kolom.

Ini juga memengaruhi cara kerja property seperti justify-content dan align-items. Menggunakan flex-direction dengan benar membantu kamu membuat tata letak yang fleksibel dan responsif.

Berikut sintaks dasar untuk menggunakan property flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: Arah yang diinginkan untuk item flex, yang dapat berupa salah satu dari berikut:

row: Ini adalah nilai default. Item flex ditempatkan dalam satu baris, dari kiri ke kanan. Sumbu utama bersifat horizontal, dan sumbu silang bersifat vertikal.

row-reverse: Item flex ditempatkan dalam satu baris, dari kanan ke kiri. Sumbu utama bersifat horizontal, dan sumbu silang bersifat vertikal.

column: Item flex ditempatkan dalam kolom, dari atas ke bawah. Sumbu utama bersifat vertikal, dan sumbu silang bersifat horizontal.

column-reverse: Item flex ditempatkan dalam kolom, dari bawah ke atas. Sumbu utama bersifat vertikal, dan sumbu silang bersifat horizontal.

Contohnya:

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

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

Dalam contoh ini, elemen .container-row akan menampilkan item flex-nya dalam satu baris dari kiri ke kanan, sedangkan elemen .container-row-reverse akan menampilkannya dari kanan ke kiri.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua elemen induk <div>, masing-masing berisi tiga elemen anak <div>. Elemen induk <div> sudah diatur sebagai kontainer flex menggunakan display: flex;. Tugasmu adalah menggunakan property flex-direction untuk mengubah susunan item flex.

Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container1.
- Atur property flex-direction-nya ke column untuk menyusun item flex dalam kolom vertikal.
Tulis aturan CSS yang menargetkan elemen <div> dengan class container2.
- Atur property flex-direction-nya ke column-reverse untuk menyusun item flex dalam kolom terbalik.

Coba sendiri

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>