5 Teknologi Flexbox Yang Perlu Anda Ketahui – Flexbox adalah standar CSS yang dioptimalkan untuk mendesain antarmuka pengguna. Menggunakan berbagai properti flexbox, kita dapat membangun halaman dengan blok penyusun kecil, lalu dengan mudah memposisikan dan mengubah ukurannya. Situs web dan aplikasi yang dibuat dengan cara ini responsif dan dapat beradaptasi dengan baik ke semua ukuran layar.

5 Teknologi Flexbox Yang Perlu Anda Ketahui
Source : sharer.codepolitan

Pada artikel ini, javascriptoo akan memperkenalkan lima metode flexbox untuk menyelesaikan masalah tata letak CSS konvensional. Kami juga memberikan beberapa contoh praktis untuk menunjukkan skenario kehidupan nyata di mana teknologi ini diterapkan.

1. Membuat Kolom Ketinggian Yang Sama

Sekilas, ini mungkin tidak terlihat sulit, tetapi sangat mengganggu untuk membuat kolom dengan ketinggian yang sama. Hanya mengatur tinggi minimum tidak akan berfungsi, karena begitu jumlah konten di kolom mulai berbeda, beberapa di antaranya akan bertambah sementara yang lain akan tetap lebih pendek.

Baca Juga : Hal Penting Tentang Progresif Web Aplikasi

Memperbaiki masalah ini dengan flexbox tidaklah mudah, karena secara default, kolom yang dibuat dengan cara ini memiliki tinggi yang sama. Yang harus kalian lakukan menginisialisasi dengan model flex, dan kemudian memastikan bahwa properti flex-direction dan align-items memiliki nilai defaultnya.

.container {
        /* Initialize the flex model */
    display: flex;

        /* These are the default values but you can set them anyway */
    flex-direction: row;    /* Items inside the container will be positioned horizontally */
        align-items: stretch;   /* Items inside the container will take up it's entire height */
}

Untuk melihat demo tentang teknik ini, buka cara termudah kami untuk membuat artikel sidebar berkontur, di mana kami membuat halaman responsif dengan bagian sidebar dan konten utama.

equal-height-sidebar

2. Susun Ulang Elemen

Beberapa waktu yang lalu, jika kami harus mengubah urutan elemen tertentu secara dinamis, kami mungkin mencoba beberapa peretasan CSS, keluar dengan frustrasi, dan kemudian menggunakan JavaScript untuk melakukannya. Namun, untuk flexbox, tugas ini bermuara pada penerapan satu properti CSS.

Ini disebut order, seperti namanya, segala sesuatunya sesederhana mungkin. Ini memungkinkan kami untuk menukar sejumlah item fleksibel dan mengubah urutan kemunculannya di layar. Parameter satu-satunya adalah bilangan bulat yang menentukan posisi elemen – semakin kecil angkanya, semakin tinggi prioritasnya.

.container{
    display: flex;
}

/* Reverse the order of elements */

.blue{
    order: 3;
}

.red{
    order: 2;
}

.green{
    order: 1;
}

Atribut pesanan memiliki banyak kegunaan praktis. Jika Anda ingin melihat beberapa di antaranya, Anda dapat melihat artikel ini, di mana kami menggunakannya untuk membuat bagian komentar yang responsif.

reorder

3. Pemusatan Horizontal Dan Vertikal

Pemusatan vertikal CSS adalah salah satu pertanyaan yang kita tanyakan pada diri kita sendiri: Bagaimana hal-hal sepele seperti itu bisa tetap begitu rumit? Memang itu. Jika Anda menggunakan Google untuk memusatkan CSS secara vertikal, teknik berbeda yang tak terhitung jumlahnya akan muncul, yang sebagian besar akan melibatkan tabel atau transformasi – ini tidak dirancang untuk membuat tata letak.

Baca Juga : 17 Tips Untuk Menulis CSS Modern

Flexbox memberikan solusi yang lebih sederhana untuk masalah ini. Setiap tata letak peregangan memiliki dua arah (sumbu X dan sumbu Y) dan dua properti perataan terpisah. Dengan memusatkan keduanya, kita dapat memposisikan elemen apa pun di tengah wadah induknya.

.container{
    display: flex;

    /* Center according to the main axis */
    justify-content: center;

    /* Center according to the secondary axis */
        align-items: center;
}

Untuk memahami penerapan praktis dari teknologi dan mempelajarinya lebih lanjut, Anda dapat membaca artikel tip singkat tentang topik yang sama.

4. Buat Grids Yang Sepenuhnya Responsif

Sebagian besar pengembang mengandalkan kerangka kerja CSS saat membuat kisi responsif. Bootstrap adalah yang paling populer, tetapi ada ratusan pustaka untuk membantu Anda menyelesaikan tugas ini. Mereka biasanya bekerja dengan baik dan memiliki banyak pilihan, tetapi seringkali berat. Jika Anda adalah orang yang DIY, atau tidak ingin menerapkan seluruh bingkai hanya untuk kisi, maka flexbox dapat memenuhi kebutuhan Anda!

Baris di grid flexbox adalah sebuah tempat dengan display: flex. Kolom horizontal dapat berupa sejumlah elemen, dan ukurannya dapat disetel dengan fleksibel. Model flex menyesuaikan dengan ukuran viewport, jadi setelan ini terlihat bagus di semua perangkat. Namun, jika kami yakin bahwa tidak ada cukup ruang pada arah horizontal di layar, kami dapat dengan mudah mengonversi tata letak menjadi tata letak vertikal menggunakan kueri media.

.container{
display: flex;
}

/* Classes for each column size. */

.col-1{
flex: 1;
}

.col-2{
flex: 2;
}

@media (max-width: 800px){
.container{
/* Turn the horizontal layout into a vertical one. */
flex-direction: column;
}
}

Anda dapat melihat variasi teknik ini di “Kiat Cepat untuk Cara termudah untuk Membuat Judul yang Responsif”.

5. Buat Sticky Footer Yang Sempurna

Flexbox juga dapat dengan mudah mengatasi masalah ini. Saat membuat halaman dengan sticky footer, dengan menyelesaikan seluruh operasi dalam elemen flex, kita dapat memastikan bahwa footer selalu berada di bagian bawah halaman.

Baca Juga : 7 Aplikasi Game Booster Terbaik

Menerapkan display: flex ke tag body memungkinkan kita membuat seluruh tata letak halaman menggunakan atribut mode fleksibel. Setelah melakukan ini, konten utama situs web dapat menjadi item yang fleksibel, dan footer dapat menjadi item lain, yang membuatnya sangat mudah untuk memanipulasi posisi mereka dan menempatkannya tepat di tempat yang kita inginkan.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section will take up all the available free space
      on the page that is not taken up by the footer. */
   flex: 1 0 auto;
}

footer{
   /* The footer will take up as much vertical space as it needs and not a pixel more. */
   flex: 0 0 auto;
}

Anda dapat menemukan informasi lebih lanjut tentang teknik ini di artikel kami “Cara terbaik membuat footer lengket”.

Sekarang, semua browser utama (kecuali IE 9) mendukung mode tata letak Flex, jadi kecuali basis pengguna Anda lebih memilih browser Microsoft retro, Anda dapat dengan aman mengatakan bahwa flexbox sudah siap. Jika Anda belum pernah menggunakannya, kami sangat menyarankan Anda untuk mencobanya!

Kami berharap kiat CSS kami bermanfaat, dan akan membantu Anda membangun tata letak responsif yang lebih baik dan lebih kuat. Nikmatilah!