CSS Eksperimen - 02-2 Flexbox Grid
Download as PPTX, PDF0 likes970 views
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
CSS Eksperimen - 02-2 Flexbox Grid
- 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