Galeri dengan Flexbox: Panduan untuk membuat tata letak responsif

Pada tutorial ini, Anda akan belajar cara membuat tata letak galeri yang menarik dengan menggunakan Flexbox di CSS dan HTML. Model Flexbox memberikan Anda fleksibilitas dalam menyusun elemen-elemen di situs web Anda, terutama untuk tata letak seperti galeri yang memerlukan tampilan yang elegan dan responsif. Kami akan membahas struktur kode HTML serta gaya CSS yang sesuai, dan membangunnya langkah demi langkah.

Poin Penting

• Pada tutorial ini, Anda akan mempelajari cara menggunakan Flexbox untuk membuat tata letak berbasis gambar, termasuk penggunaan elemen-elemen kontainer dan penerapan properti CSS seperti display: flex, position: absolute, dan justify-content: space-between.

Panduan Langkah demi Langkah

Langkah 1: Membuat Struktur Dasar Kode HTML

Mulailah dengan struktur dasar dokumen HTML Anda. Buat sebuah Div kontainer yang bernama main dan tambahkan Div lain dengan kelas gambar, yang berisi semua elemen Tag Gambar (IMG). Anda dapat menggunakan gambar-gambar ini dari situs web dengan gambar domain publik. Perhatikan bahwa tata letak ini berfokus pada tiga gambar, sehingga gambar keempat tidak akan ditampilkan.

Langkah 2: Menentukan CSS untuk kontainer utama

Untuk styling kontainer utama, aturlah lebarnya menjadi 100% agar menyesuaikan lebar jendela. Tetapkan tinggi menjadi 140 piksel dan pastikan bahwa positioning adalah relative untuk memastikan bahwa posisi absolut yang akan kita gunakan untuk gambar dan panah berorientasi dengan benar.

Langkah 3: Menyusun gaya untuk kontainer gambar

Atur kontainer gambar (.images) menjadi position: absolute, sehingga kontainer ini melayang di atas kontainer panah. Tetapkan lebar dan tinggi menjadi 100%, sehingga kontainer ini ditempatkan sepenuhnya di dalam kontainer utama. Gunakan properti Flexbox juga.

Langkah 4: Mengaplikasikan properti Flexbox untuk tata letak gambar

Untuk kelas .images, tetapkan display: flex dan susun konten dalam satu baris dengan flex-direction: row. Menambahkan gap sebesar 4 piksel antara gambar akan memberi lebih banyak ruang di antara mereka, sehingga tata letak menjadi lebih longgar.

Langkah 5: Mendefinisikan gaya gambar

Gambar-gambar (img) dalam galeri harus didefinisikan dengan properti Flexbox flex-basis menjadi lebar 240 piksel dan tinggi 140 piksel. Selain itu, Anda dapat mengatur flex-grow dan flex-shrink menjadi 0, sehingga gambar tidak akan mengubah ukurannya dan tetap mempertahankan ukuran yang dipilih.

Langkah 6: Membuat Kontainer panah

Sekarang mari buat kontainer untuk panah navigasi. Kontainer ini juga harus diatur menjadi position: absolute dan mempertahankan tinggi dan lebar 100%, sehingga selalu berada di atas gambar. Gunakan display: flex untuk menyusun panah secara horizontal.

Langkah 7: Menyusun gaya untuk panah

Atur properti justify-content menjadi space-between, sehingga satu panah di kiri dan yang lain di kanan. Gunakan karakter Unicode untuk menampilkan panah. Tetapkan warna teks menjadi putih dan pastikan bahwa latar belakang panah adalah transparan.

Langkah 8: Menambahkan Efek Hover

Untuk menambahkan efek Hover, Anda dapat mengubah warna latar belakang panah ketika Anda mengarahkan kursor di atasnya. Tetapkan warna ini menjadi putih transparan agar latar belakang bersinar dan memberikan nuansa interaktif.

Langkah 9: Menguji dan Menyesuaikan Tata Letak

Sekarang penting untuk menguji seluruh tata letak dan melakukan penyesuaian jika diperlukan. Jarak antara gambar, ukuran kontainer, atau skema warna secara umum dapat diubah dengan mudah sesuai dengan kebutuhan dari situs web Anda.

Ringkasan

Dalam tutorial ini, Anda telah belajar cara membuat galeri gambar responsif dengan Flexbox. Anda telah mengikuti langkah-langkah dari struktur dasar hingga efek visual. Flexbox memungkinkan Anda untuk memiliki susunan elemen yang fleksibel, membuat desain Anda terlihat menarik.