Dokumen tersebut memberikan penjelasan tentang cara membuat layout grid menggunakan Flexbox CSS. Metode Flexbox dianggap lebih efisien dalam mengatur tata letak grid dibandingkan metode sebelumnya yang menggunakan floating. Dokumen tersebut menjelaskan properti-properti penting Flexbox seperti display, direction, wrap, flow, align-items, order, dan flex untuk mengatur arah, posisi, urutan, dan ukuran elemen grid. Kemudian diberikan contoh

1. Flexbox Grid
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Pada materi sebelumnya telah dijelaskan cara pembuatan grid dengan
cara yang umum dilakukan yaitu dengan menggunakan kolom dan
baris dengan floating.
Contoh:
Dibagi 3 kolom
Gabungan

3. Pendahuluan
Sekarang, Kita akan membuat layout tampilan seperti ini yang
membagi halaman menjadi kolom dan situs dengan menggunakan cara
lain yaitu dengan Flexbox.
Hasilnya umumnya akan sama dengan materi sebelumnya, hanya
berbeda metode.

4. Flexbox
Layout Flexbox merupakan metode yang lebih baru untuk membuat
grid layout. Metode ini dianggap lebih efisien dalam menempatkan,
merapikan, dan mengatur spasi antar grid atau kolom.
Keunggulan lainnya adalah pengaturan arah penyusunan layout, misal:
kiri ke kanan atau posisi berdasarkan urutan sehingga mendukung
situs yang responsif.

5. Flexbox - Display & Direction
Untuk menggunakan flexbox, Kita terlebih dahulu menentukan style
dari display yaitu flex (display : flex).
Kemudian Kita perlu menentukan arah dari elemen yang akan
ditempatkan pada layout flex yang akan kita buat: (flex-direction : …)
column column-reverse row row-
reverse

6. Flexbox - Wrap & Flow
Pada default-nya, flex-wrap akan bernilai nowrap yang akan membuat
semua elemen diletakkan pada satu baris. Ketika tampilan diperkecil,
maka elemen dalam flex layout akan berusaha disesuaikan sehingga
tetap ada pada satu line.
Mode flex-wrap ini sendiri ada tiga:
1. nowrap - mengusahakan elemen didalamnya dalam 1 baris
2. wrap - elemen akan diatur dalam beberapa baris (kiri ke kanan)
3. wrap-reverse - elemen akan diatur dalam beberapa
baris tetapi dari kanan ke kiri (terbalik dengan wrap)

7. Style wrap pada flexbox ini dikombinasikan dengan flow (flex-flow). Flex-
flow menentukan posisi dimana elemen ditetapkan dengan cara
penggunaan flex-flow: <posisi> || <wrap>
Flex-flow ini ada beberapa posisi:
1. flex-start - rapat di awal
(default)
2. flex-end - rapat di akhir
3. center - rapat di
tengah
4. space-between - rapat kiri kanan
dan spasi seimbang
5. space-around - rapat tengah dan
Flexbox - Wrap & Flow

8. Selain flex-wrap dan flow yang mengatur posisi kiri kanan elemen
dalam flex, terdapat juga align-items yang mengatur posisi atas bawah
elemen flex. (align-items: …)
Terdapat 5 tipe alignment:
flex-start flex-end center stretch
baseline
Flexbox - Align-items
text text text

9. Pada flex, disediakan juga penyusunan elemen flex berdasarkan
urutan tertentu dengan menggunakan flex-order. Cara memakainya
adalah dengan memberikan style order: … dan nilainya (angka).
Misal terdapat 3 elemen masing-masing order :1, order : -3, order : 9
Maka cara menampilkannya dalam sebuah layout flex adalah
Flexbox - Order
-3 1 9

10. Yang terakhir perlu diperhatikan adalah style flex : … . Style ini
digunakan untuk menentukan ukuran flex.
Format flex ini adalah:
flex: 0 1 auto; // default
● nilai pertama (0) adalah kemampuan melebar (flex-grow)
● nilai kedua (1) adalah kemampuan mengecil (flex-shrink)
● auto adalah jarak antara kiri dan kanan konten dalam elemen (flex-
basis)
Flexbox - Flex

11. Implementasi - Layout Flex
Sebelumnya telah dibahas beberapa style pada flex yang berguna
dalam pembuatan layout flex. Sekarang Kita akan coba membuat
sebuah layout flex.
Misalkan Kita akan membuat sebuah situs yang terdiri dari:
1. Header
2. Kolom Kiri (K1)
3. Konten (KT)
4. Kolom Kanan (K2)
5. Footer
Header
K1 K2
Footer
KT

12. Implementasi - Layout Flex
HTML
<div class="wrapper">
<header class="header">
Header
</header>
<div class="konten">
<p>Akan berisi konten utama</p>
</div>
<div class="kolom kolom-kiri">
Kolom Kiri
</div>
<div class="kolom kolom-kanan">
Kolom Kanan
</div>
<footer class="footer">
Header
</footer>
</div>
Pertama kita buat kerangka
HTML-nya terlebih dahulu yang
terdiri dari:
1. header
2. div - konten
3. div - kolom kiri
4. div - kolom kanan
5. footer

13. Implementasi - Layout Flex
CSS
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* style untuk membuat lebar maksimal */
.wrapper > * {
flex: 1 100%;
padding: 10px;
}
Lalu kita mulai buat layout flex.
Pertama kita buat kelas wrapper memiliki
display flex untuk membungkus semua
elemen.
Kemudian Kita akan membuat flex-flow
yang menampilkan elemen ke samping
dengan banyak baris (flex-flow: row wrap).
Beri style juga supaya setiap elemen
harus memiliki lebar 100% untuk
menempati penuh dan padding untuk
merapikan.

14. CSS
.header {
background: #038041;
}
.footer {
background: #5200CC;
}
.konten {
background: #FF9E59;
}
.kolom-kiri {
background: #FF6666;
}
.kolom-kanan {
background: #4287FF;
}
Implementasi - Layout Flex
Kemudian Kita coba bedakan supaya lebih
jelas terlihat bahwa layout flex yang dibuat
bekerja dengan baik dengan menambah
warna latar belakang untuk tiap
elemennya.

15. CSS
@media all and (min-width: 600px) {
.kolom {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.konten { flex: 3 0; }
.kolom-kiri { order: 1; }
.konten { order: 2; }
.kolom-kanan { order: 3; }
.footer { order: 4; }
}
Implementasi - Layout Flex
Berikutnya Kita buat kelakuan untuk lebar
layar tertentu untuk menangani kasus
responsif.
Dapat dilihat bahwa urutan posisi akan
berada sesuai “order”, dan ukuran konten
akan lebih besar dari kolom dengan style
flex: 3 0; (nilai pertama flex: 3)

16. Finalisasi
Setelah kerangka CSS dan HTML untuk flex layout dibuat, Anda bisa
mengubah dan menyesuaikannya sesuka Anda.
Contoh dapat dilihat pada Codepen KuliahKita