Mengenal dan Belajar Membuat Flexbox di HTML & CSS

APA ITU FLEXBOX?

Flexbox (Flexible Box Layout) adalah salah satu teknik layout CSS yang digunakan untuk merancang elemen pada halaman web secara fleksibel dan efisien. Flexbox sangat membantu untuk mengatur tata letak elemen dalam satu dimensi (baik secara horizontal maupun vertikal), terutama untuk elemen yang ukurannya dapat berubah-ubah sesuai ruang yang tersedia.

Manfaat Flexbox

  1. Fleksibilitas ukuran elemen: elemen dapat dengan mudah diperbesar, diperkecil, atau diratakan untuk mengisi ruang yang tersedia di dalam container.
  2. Perataan (Alignment): Flexbox memungkinkan kontrol perataan elemen baik secara horizontal maupun vertikal dengan mudah.
  3. Responsivitas: Flexbox mempermudah pembuatan tata letak yang responsif karena elemen dapat secara otomatis menyesuaikan ukuran dan posisinya sesuai dengan ruang yang tersedia.

Latihan Membuat Flexbox

1. Flex-wrap

Buatlah satu file dengan nama flex-wrap.html (atau sesuai keinginan), lalu masukkan kode berikut:

Setelah itu buatlah file flex-wrap.css (atau sesuai keinginan). File css ini bisa di taruh di dalam folder yang sama atau di dalam folder yang berbeda. Atau kamu dapat memasukkan kode css di dalam file html dengan menggunakan tag <link>. Lalu masukkan kode css berikut:

Berikut Hasilnya:

Dari hasil contoh di atas, saat menggunakan flex-wrap: wrap; elemen dalam container akan secara otomatis pindah ke baris baru saat ruang tidak mencukupi. Selain wrap, kita juga dapat menggunakan value nowrap dan wrap-reverse.

Berikut adalah contoh jika menggunakan flex-wrap: nowrap;  dimana nanti elemen tidak akan membentuk baris baru meskipun ruang container tidak mencukupi.

Lalu berikut adalah contoh jika menggunakan flex-wrap: wrap-reverse; dimana elemen dalam container akkan pindah ke baris baru namun dalam kondisi terbalik seperti berikut:

2. Flex-direction

Buatlah satu file dengan nama flex-direction.html (atau sesuai keinginan), lalu masukkan kode berikut:

Setelah itu buatlah file flex-direction.css (atau sesuai keinginan). File css ini bisa di taruh di dalam folder yang sama atau di dalam folder yang berbeda. Atau kamu dapat memasukkan kode css di dalam file html dengan menggunakan tag <link>. Setelah itu masukkan kode css berikut:

Dari kode CSS di atas bisa di lihat jika saya menggunakan flex-direction: row; namun selain itu kita juga dapat merubah value-nya dengan row-reverse, column, dan column-reverse. Mari kita lihat perbedaannya.

Saat menggunakan flex-direction: row;

Saat menggunakan flex-direction: row-reverse; 

Saat menggunakan flex-direction: column; 

Saat menggunakan flex-direction: column-reverse; 

3. Justify-content

Buatlah satu file dengan nama justify-content.html (atau sesuai keinginan), lalu masukkan kode berikut:

Setelah itu buatlah file justify-content.css (atau sesuai keinginan). File css ini bisa di taruh di dalam folder yang sama atau di dalam folder yang berbeda. Atau kamu dapat memasukkan kode css di dalam file html dengan menggunakan tag <link>. Setelah itu masukkan kode css berikut:

Dari kode CSS di atas bisa di lihat jika saya menggunakan justify-content: space-evenly; namun selain itu kita juga dapat merubah value-nya dengan space-between, space-around, flex-start, flex-end,  dan center. Mari kita lihat perbedaannya.

Saat menggunakan justify-content: space-evenly;

Saat menggunakan justify-content: space between;

Saat menggunakan justify-content: space between;

Saat menggunakan justify-content: flex-start;

Saat menggunakan justify-content: flex-end;

Saat menggunakan justify-content: center;

4. Align-items

Buatlah satu file dengan nama align-items.html (atau sesuai keinginan), lalu masukkan kode berikut:

Setelah itu buatlah file align-items.css (atau sesuai keinginan). File css ini bisa di taruh di dalam folder yang sama atau di dalam folder yang berbeda. Atau kamu dapat memasukkan kode css di dalam file html dengan menggunakan tag <link>. Setelah itu masukkan kode css berikut:

Dari kode CSS di atas bisa di lihat jika saya menggunakan align-items: center; namun selain itu kita juga dapat merubah value-nya dengan flex-start, flex-end, dan stretch. Mari kita lihat perbedaannya.

Saat menggunakan align-items: center;

Saat menggunakan align-items: flex-start;

Saat menggunakan align-items: flex-end;

Saat menggunakan align-items: stretch; 

Kurang lebih seperti itulah beberapa dasar-dasar CSS mengenai flexbox yang bisa saya bagikan di blog kali ini. Untuk mengetahui berbagai hal seputar CSS, bisa kunjungi website w3schools.com atau bisa akun github saya elvanazlita untuk mendapatkan kode dari dasar-dasar HTML dan CSS yang sudah saya bagikan di blog ini.

Komentar

Posting Komentar

Postingan populer dari blog ini

Bootstrap Flex

Gambar
Bootstrap Flex Bootstrap Flex adalah sebuah fitur yang sangat berguna dalam kerangka kerja Bootstrap untuk mengatur tata letak elemen-elemen dalam sebuah halaman web secara fleksibel dan responsif. Fitur ini menggunakan konsep CSS Flexbox yang memungkinkan kita untuk mengatur tata letak elemen-elemen dengan lebih mudah dan efisien, terutama untuk desain yang responsif (mampu menyesuaikan tampilan di berbagai ukuran layar). Keunggulan Bootstrap Flex Responsivitas: Dengan Bootstrap Flex, kita bisa membuat layout yang secara otomatis menyesuaikan diri dengan ukuran layar perangkat yang berbeda, baik itu desktop, tablet, atau smartphone. Fleksibilitas: Kita bisa mengatur arah, ukuran, jarak, dan penjajaran elemen-elemen dengan sangat fleksibel, sesuai dengan kebutuhan desain kita. Kemudahan Penggunaan: Bootstrap menyediakan kelas-kelas CSS yang siap pakai untuk mengatur berbagai aspek tata letak, sehingga kita tidak perlu menuliskan banyak kode CSS secara manual. Contoh Penggunaan Boo...
Baca selengkapnya

Berkenalan Dengan Bootstrap

Gambar
Apa Itu Bootstrap? Bootstrap adalah kerangka kerja (framework) HTML, CSS, dan JavaScript yang sangat populer digunakan untuk membangun website dan aplikasi web yang responsif dan modern.  Dengan Bootstrap, kamu tidak perlu membangun semua bagian dari awal, melainkan bisa langsung menggunakan komponen-komponen yang sudah disediakan.   Website yang dibangun dengan Bootstrap akan otomatis menyesuaikan tampilannya sesuai dengan ukuran layar perangkat yang digunakan, baik itu komputer desktop, laptop, tablet, atau smartphone.  Bootstrap memberikan tampilan yang modern dan konsisten, sehingga website yang kamu buat akan terlihat profesional dan menarik.  Keuntungan Menggunakan Bootstrap Menghemat waktu:  Dengan menggunakan Bootstrap, kamu bisa membangun website lebigh cepat karena tidak perlu menuliskan semua kode dari awal. Tampilan yang konsisten:  Bootstrap memberikan tampilan yang konsisten di seluruh website, sehingga website kamu akan terlihat lebih profesi...
Baca selengkapnya

Mengenal Display Grid Di HTML & CSS

Gambar
GRID CSS GRID adalah sebuah fitur CSS yang sangat kuat dan fleksibel untuk mengatur tata letak elemen-elemen dalam sebuah halaman website. Dengan CSS Grid, kita dapat dengan mudah membuat layout yang kompleks dan responsif. Konsep Dasar Grid Container: Elemen HTML yang dijadikan sebagai wadah utama untuk grid. Item:  Elemen-elemen anakan dari container yang akan ditempatkan di dalam grid. Track: Garis-garis horizontal (row) atau vertikal (column) yang membagi grid menjadi area-area. Area:  Ruang yang dibatasi oleh dua track, tempat item ditempatkan. Membuat Contoh Sederhana GRID Di sini saya akan memberikan beberapa contoh sederhana dalam pembuatan grid di HTML & CSS. Di latihan ini saya menggunakan eksternal CSS atau membuat file CSS secara terpisah dengan file HTML. Namun teman-teman bisa menuliskan kode CSS secara internal, atau di gabungkan di dalam file HTML secara langsung dengan menggunakan tag <link>. 1. Grid Layout 1 Buatlah file dengan nama grid1.html (ata...
Baca selengkapnya