Skip to main content

B.7.1.2. Flex Direction

Di dalam flexbox kita juga bisa menentukan arah utama pada element (child element) dengan menggunakan properti flex-direction yang diatur pada parent container-nya.

Coba teman-teman perhatikan kode berikut ini:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Secara default, flex-direction akan memiliki nilai bawaan row ketika sebuah element memliki display yang di atur ke flex . Maka dari itu yang semulanya seperti menyusun sebuah tumpukan atau block, sekarang anak-anak dari elemen yang memiliki display flex akan membentuk sebuah baris atau row.

Output

Bisa teman-teman lihat hasil dari kode sebelumnya, child element atau flex-item akan membentuk sebuah baris atau row di karenakan parent element atau flex-container nya memiliki display flex. Pertanyaannya adalah, bisakah kita mengubah posisi dari anak-anaknya kembali menjadi sebuah tumpukan atau block? sangat bisa!🙌. kita bisa menggunakan properti flex-direction untuk mengatur arah dari anak-anak ini.

Properti flex-direction memiliki beberapa nilai yang digunakan diantaranya

  • row ini akan membuat child element yang ada di dalam flex-container akan berbaris membentuk sebuah baris atau row.
  • row-reverse sama halnya seperti row , properti ini akan membentuk sebuah baris tetapi urutan dari *child element-*nya akan di balik.
  • column ini mirip seperti block , child element akan membentuk sebuah column dan tersusun kebawah seperti blockdan akan memenuhi lebar penuh dari flex-container .
  • column-reverse sama seperti column , hanya saja urutannya akan di balik.

Oke, langsung saja kita coba bedah satu-per satu.

B.7.1.2.1. row-reverse​

Pada contoh kasus di sebelumnya teman-teman tahu bahwa secara default ketika sebuah elemen memiiliki display flex, maka anak-anaknya (child element) akan di tampilkan membentuk baris atau row dan di susun secara ber-urutan.

Dengan row-reverse, maka teman-teman bisa membalikan urutan dari anak-anak elemen-nya lho!

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  border: 1px solid #000;
  padding: 1.5rem;
}

Jika teman-teman buka di web browser-nya masing-masing, maka hasilnya akan terlihat seperti:

Output

Nah bukan hanya posisi dari anak-anaknya yang di balik, tetapi posisi nya yang semula ada di kiri juga akan berpindah ke kanan. Ini karena lebar dari flex-container akan otomatis di set memenuhi parent container (dalam kasus ini adalah elemen body) nya jika kita tidak definisikan lebar atau width nya.

B.7.1.2.2. column​

Jika teman-teman tetap ingin di tampilkan sebagai kolom, maka teman-teman bisa gunakan nilai column ini. Jika kita terapkan pada kode sebelumnya, maka hasilnya akan terlihat seperti:

Output

B.7.1.2.3. column-reverse​

Atau jika ingin membalik urutannya, teman-teman bisa menggunakan nilai column-reverse.

Output

Dengan memahami konsep penggunaan flexbox secara mendalam, seperti column dan column-reverse, teman-teman telah memperoleh keterampilan penting dalam mengelola tata letak yang responsif dan dinamis.

Pastikan untuk terus berlatih dan eksplorasi lebih dalam agar semakin mahir dalam implementasi ini. Dengan demikian, desain web yang fleksibel dan adaptif bisa tercapai dengan lebih mudah. Selamat belajar dan sampai jumpa di chapter berikutnya!

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.1-flexbox/B.7.1.2-flex-direction