FLEX-DIRECTION

Properti flex-direction dalam CSS Flexbox digunakan untuk menentukan arah arus flex item di dalam kontainer flex. Artikel ini akan membantu kamu memahami bagaimana cara kerja dan penggunaan properti flex-direction.

Nilai Properti Flex-direction

Flex-direction memiliki empat nilai utama:

1. row (default): Item flex diletakkan sepanjang garis horisontal dari kiri ke kanan.

2. row-reverse: Item flex tertata sepanjang garis horisontal namun dari kanan ke kiri.

3. column: Item flex tertata sepanjang garis vertikal dari atas ke bawah.

4. column-reverse: Item flex tertata sepanjang garis vertikal, namun dari bawah ke atas.

Contoh Penggunaan Flex-direction

Berikut adalah contoh penggunaan properti flex-direction:

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

Di atas, kita mendefinisikan kontainer dengan display: flex dan mengatur arahnya dengan flex-direction: row. Ini berarti item flex akan diatur dari kiri ke kanan.

Penggunaan row-reverse dan column-reverse

Mari kita lihat contoh penggunaan row-reverse dan column-reverse.

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

Di sini, item flex akan diatur dari kanan ke kiri, bukan dari kiri ke kanan.

Aplikasi dalam Responsive Design

Properti flex-direction sangat berguna dalam desain responsif. Kamu bisa mengubah arah tata letak dengan mengubah nilai flex-direction berdasarkan ukuran layar.

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

@media (min-width: 600px) {
    .container {
        flex-direction: row;
    }
}

Di atas, pada layar yang lebih kecil (di bawah 600px), item flex akan ditampilkan secara vertikal. Tapi, pada layar yang lebih besar (di atas 600px), item flex akan ditampilkan secara horizontal.

Sekarang kamu telah memahami properti flex-direction dalam CSS Flexbox. Selamat berlatih dan mencoba nilai yang berbeda untuk melihat bagaimana mereka mempengaruhi tata letak elemen di halaman webmu!