Skip to main content

B.7.1.4. Flex Flow

Pada 2 chapter sebelumnya, kita sudah belajar mengenai flex-direction dan flex-wrap. Nah kita bisa melakukan dua hal tadi sekaligus dengan menggunakan properti yang akan kita bahas pada chapter ini yaitu flex-flow!

flex-flow adalah shorthand untuk menggabungkan flex-direction dan flex-wrap dalam satu deklarasi. Dengan menggunakan flex-flow, teman-teman dapat menentukan bagaimana elemen flex diatur dalam suatu container dan apakah mereka dapat membungkus ke baris baru atau tidak.

flex-flow: <flex-direction> <flex-wrap>;

flex-flow memiliki nilai default row nowrap, yang berarti elemen flex akan berdiri dalam satu baris tanpa membungkus.

Cara menggunakannya pun cukup mudah, berikut adalah contoh penggunaan flex-flow dalam CSS:

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap;
}

Dengan menuliskan kode di atas, sama saja teman-teman menulis kode seperti berikut:

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

Dengan memahami penggunaan flex-flow, teman-teman dapat menulis kode yang lebih ringkas dan terstruktur saat mengatur layout dengan flexbox.

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.4-flex-flow