Flexbox membantu Anda mendesain halaman web Anda sehingga terlihat bagus pada ukuran layar apa pun.
Dalam kursus ini, Anda akan menggunakan Flexbox untuk membuat halaman web galeri foto yang responsif.
Dalam kursus ini, Anda akan menggunakan Flexbox untuk membuat halaman web galeri foto yang responsif.
Langkah 1
Mulailah dengan boilerplate HTML standar Anda. Tambahkan deklarasi DOCTYPE, elemen html, elemen kepala, dan elemen tubuh.
Tambahkan atribut lang ke tag <html> pembuka dengan en sebagai nilainya.
Langkah 2
Di dalam elemen kepala Anda, tambahkan tag meta dengan nama disetel ke area pandang dan konten disetel ke width=device-width, initial-scale=1.
Tambahkan juga tag meta dengan set karakter ke UTF-8.
Langkah 3
Di dalam elemen kepala Anda, tambahkan elemen judul dengan set teks ke Galeri Foto, dan elemen tautan untuk menambahkan file styles.css Anda ke halaman.
Langkah 4
Tambahkan elemen header di dalam elemen body dan tetapkan kelas header untuknya.
Di dalam header, buat h1 dengan galeri foto css flexbox sebagai teks.
Langkah 5
Di bawah elemen .header Anda, buat elemen div baru dan tetapkan kelas galeri. Div ini akan bertindak sebagai wadah untuk gambar galeri.
Di dalam elemen .gallery itu, buat sembilan elemen img.
Langkah 6
Selanjutnya, beri setiap img sebuah atribut src sesuai dengan urutannya dalam dokumen. Ig pertama harus memiliki src https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg. Sisanya harus sama, kecuali ganti 1 dengan angka img di dokumen.
Langkah 7
Normalisasikan model kotak Anda dengan membuat pemilih * dan
menyetel properti ukuran kotak ke kotak batas sebagai nilainya.
Gambar Anda terlalu besar. Buat pemilih .gallery img untuk menargetkan mereka. Beri mereka semua lebar 100% dan lebar maksimal 350px agar menyusut sesuai kebutuhan tetapi jangan terlalu besar.
Juga atur properti tinggi ke 300px untuk menjaga ukuran gambar Anda tetap seragam.
Hapus margin dari elemen tubuh Anda, atur font-family ke sans-serif, dan beri warna latar belakang #f5f6f7 sebagai nilainya.
Sejajarkan teks .header Anda di tengah. Buat teks menjadi huruf besar menggunakan properti text-transform dengan huruf besar sebagai nilainya.
Berikan padding 32px di semua sisi. Atur latar belakang ke #0a0a23 dan teks ke #fff sebagai nilai warna.
Tambahkan border-bottom dengan 4px solid #fdb347 sebagai nilainya.
Flexbox adalah tata letak CSS satu dimensi yang dapat mengontrol cara item ditempatkan dan disejajarkan di dalam wadah.
Untuk menggunakannya, beri sebuah elemen properti display dari flex. Ini akan menjadikan elemen wadah fleksibel. Setiap turunan langsung dari wadah fleksibel disebut item fleksibel.
Buat pemilih .gallery dan jadikan wadah fleksibel.
Langkah 12
Flexbox memiliki sumbu utama dan sumbu silang.
Flexbox memiliki sumbu utama dan sumbu silang.
Sumbu utama ditentukan oleh properti flex-direction,
yang memiliki empat kemungkinan nilai:
1.baris (default): sumbu horizontal dengan item fleksibel dari
kiri ke kanan.
2.baris-mundur: sumbu horizontal dengan item fleksibel dari kanan
2.baris-mundur: sumbu horizontal dengan item fleksibel dari kanan
ke kiri.
3.kolom: sumbu vertikal dengan item fleksibel dari atas ke bawah.
3.kolom: sumbu vertikal dengan item fleksibel dari atas ke bawah.
4.column-reverse: sumbu vertikal dengan item fleksibel dari
bawah ke atas.
Catatan: Sumbu dan arah akan berbeda bergantung pada arah teks.
Catatan: Sumbu dan arah akan berbeda bergantung pada arah teks.
Nilai yang ditampilkan adalah untuk arah teks kiri ke kanan.
Coba nilai yang berbeda untuk melihat pengaruhnya terhadap tata
Coba nilai yang berbeda untuk melihat pengaruhnya terhadap tata
letak.
Ketika Anda selesai, atur garis arah fleksibel yang eksplisit
Ketika Anda selesai, atur garis arah fleksibel yang eksplisit
pada elemen .gallery.
Properti flex-wrap menentukan bagaimana perilaku item fleksibel Anda
saat wadah fleksibel terlalu kecil. Menyetelnya ke wrap akan
memungkinkan item dibungkus ke baris atau kolom berikutnya.
nowrap (default) akan mencegah barang Anda terbungkus dan menyusut
jika diperlukan.
Buat agar item fleksibel Anda terbungkus ke baris berikutnya saat
Buat agar item fleksibel Anda terbungkus ke baris berikutnya saat
kehabisan ruang.
Contoh wrap dibawah ini:
Langkah 14
Properti justify-content menentukan bagaimana item di dalam wadah
Properti justify-content menentukan bagaimana item di dalam wadah
fleksibel diposisikan di sepanjang sumbu utama, memengaruhi
posisinya dan ruang di sekitarnya.
Berikan pemilih .gallery Anda properti justify-content dengan
Berikan pemilih .gallery Anda properti justify-content dengan
center sebagai nilainya.
Properti align-items memposisikan konten fleksibel di sepanjang
sumbu silang. Dalam hal ini, dengan arah fleksibel Anda disetel
ke baris, sumbu silang Anda akan menjadi vertikal.
Untuk memusatkan gambar Anda secara vertikal, berikan pemilih
Untuk memusatkan gambar Anda secara vertikal, berikan pemilih
.gallery Anda properti align-items dengan center sebagai nilainya.
Langkah 16
Berikan pemilih .gallery Anda properti padding yang disetel ke 20px 10px untuk membuat ruang di sekitar wadah.
Kemudian, berikan lebar maksimal 1400px dan tambahkan margin 0 otomatis untuk memusatkannya.
Langkah 17
Perhatikan bagaimana beberapa gambar Anda menjadi terdistorsi. Ini karena gambar memiliki rasio aspek yang berbeda. Daripada menyetel setiap rasio aspek satu per satu, Anda dapat menggunakan properti object-fit untuk menentukan bagaimana seharusnya perilaku gambar.
Berikan pemilih .gallery img Anda properti object-fit dan setel ke cover. Ini akan memberi tahu gambar untuk mengisi wadah img sambil mempertahankan rasio aspek, sehingga pemotongannya pas.
Langkah 18
Gambar Anda membutuhkan ruang di antara mereka.
Properti singkatan CSS gap menetapkan celah, juga dikenal sebagai talang, antara baris dan kolom. Properti gap dan sub-properti celah-baris dan celah-kolomnya menyediakan fungsionalitas ini untuk tata letak fleksibel, kisi, dan multikolom. Anda menerapkan properti ke elemen wadah.
Berikan .gallery flex container properti gap dengan 16px sebagai nilainya.
Langkah 19
Perhalus gambar Anda sedikit dengan memberi pemilih .gallery img properti border-radius dengan 10px ditetapkan sebagai nilainya.
Langkah 20
The ::after pseudo-element membuat elemen yang merupakan anak terakhir dari elemen yang dipilih. Anda dapat menggunakannya untuk menambahkan elemen kosong setelah gambar terakhir. Jika Anda memberikan lebar yang sama dengan gambar, itu akan mendorong gambar terakhir ke kiri saat galeri berada dalam tata letak dua kolom. Saat ini, itu ada di tengah karena Anda menyetel justify-content: center pada wadah fleksibel.
Contoh:
Contoh:
.container::after {
content: " ";
width: 860px;
}
Buat selector baru menggunakan elemen pseudo ::after pada elemen .gallery. Tambahkan set properti konten ke string kosong "" dan set 350px untuk properti lebar.
Langkah 21
Atribut gambar alt harus menjelaskan konten gambar. Pembaca layar membacakan teks alternatif sebagai pengganti gambar. Jika gambar tidak dapat dimuat, teks ini akan ditampilkan sebagai pengganti gambar.
Untuk menyelesaikan proyek, tambahkan atribut alt ke kesembilan gambar kucing Anda untuk mendeskripsikannya. Gunakan nilai setidaknya lima karakter untuk masing-masing.
Atribut gambar alt harus menjelaskan konten gambar. Pembaca layar membacakan teks alternatif sebagai pengganti gambar. Jika gambar tidak dapat dimuat, teks ini akan ditampilkan sebagai pengganti gambar.
Untuk menyelesaikan proyek, tambahkan atribut alt ke kesembilan gambar kucing Anda untuk mendeskripsikannya. Gunakan nilai setidaknya lima karakter untuk masing-masing.
Untuk Full Script silahkan DOWNLOAD DISINI
Postingan
