5 Teknik Dalam Menggunakan Flexbox

fdg

5 TEKNIK FLEXBOX

Flexbox adalah standar CSS dioptimalkan untuk merancang antarmuka pengguna. Menggunakan berbagai properti flexbox kita dapat membangun halaman kami keluar dari blok bangunan kecil, yang kemudian mudah diposisikan dan ukurannya dengan cara apapun yang kita inginkan. Situs web dan aplikasi dibuat dengan cara ini responsif dan beradaptasi dengan baik untuk semua ukuran layar.

Pada artikel ini kita akan melihat pada lima pendekatan flexbox untuk memecahkan masalah tata letak CSS umum. Kami juga termasuk contoh-contoh praktis untuk menampilkan skenario kehidupan nyata di mana teknik ini diterapkan.

1. Membuat Kolom Tinggi Equal

Ini mungkin tidak tampak seperti tugas yang sulit pada awalnya, tetapi membuat kolom yang memiliki ketinggian yang sama dapat benar-benar menjengkelkan. Hanya menetapkan min-height tidak akan bekerja, karena sekali jumlah konten di kolom mulai berbeda, beberapa dari mereka akan tumbuh dan lain-lain akan tetap pendek.

Memperbaiki masalah ini menggunakan flexbox tidak dapat lebih mudah, sebagai kolom dibuat dengan cara ini memiliki tinggi yang sama secara default. Yang harus kita lakukan adalah menginisialisasi model flex, maka pastikan flex-arah dan menyelaraskan-item properti nilai standar.

CSS CODE

.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 */
}
HTML CODE
<div class="container"> <!-- Equal height columns --> <div>...</div> <div>...</div> <div>...</div> </div>

 Untuk Melihat Demo Dari Teknik Ini , Anda Dapat Lihat Disini

2. Meyusun Ulang Elemen

 JIka kita harus mengubah urutan beberapa elemen, kita mungkin akan mencoba beberapa CSS hack, dan melakukannya dengan javaScript, Dengan Flexbox..Ini Disebut Ketertiban..Ini hanya Parameter integer yang menentukan posisi elemen yang angkanya lebih rendah berarti prioritasnya yang lebih besar..

CSS CODE :

.container{
  display: flex;
}

/* Reverse the order of elements */

.blue{
  order: 3;
}

.red{
  order: 2;
}

.green{
  order: 1;
}

 

HTML  CODE

<div class="container">

  <!-- These items will appear in reverse order -->

  <div class="blue">...</div>
  <div class="red">...</div>
  <div class="green">...</div>

</div>

Properti order memiliki banyak kegunaan praktis..

Jika anda ingin mengetahui lebih jelas , silahkan klik disini

3. Horizontal Dan Vertikal Centering

Vertikal Di CSS adalah salah satu masalah yang membuat  kita bertanya kepada diri sendiri.. Maka dari itu Flexbox menawarkan solusi yang lebih mudah untuk masalah ini. Setiap tata letak fleksibael memiliki dua arah ( X axis dan Y Axis) dua Sifat yang terpish. Dengan Berpusat kedua kita bisa memposisikan setiap elemen tepat di tengah wadah induknya..

CSS CODE
.container{
  display: flex;

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

  /* Center according to the secondary axis */
        align-items: center;
}
HTML CODE
<div class="container">

  <!-- Any element placed here will be centered
     both horizonally and vertically -->

  <div>...</div>

</div>

Untuk Melihat Teknik Ini Anda Bisa Melihatnya disini.

4. Membuat Grids Fully Reponsif

Kebanyakan pengembang bergantung pada kerangka CSS saat membuat grid responsif. Bootstrap adalah salah satu yang paling populer tetapi ada ratusan perpustakaan yang dapat membantu Anda dengan tugas ini. Mereka biasanya bekerja dengan baik dan memiliki banyak pilihan, tapi cenderung cukup berat.  Sebuah baris dalam grid flexbox hanyalah sebuah wadah dengan display: fleksibel. Kolom horisontal di dalamnya dapat setiap jumlah elemen, pengaturan ukuran yang dilakukan melalui fleksibel. Model fleksibel menyesuaikan dengan ukuran viewport, sehingga setup ini akan terlihat baik pada semua perangkat. Namun, jika kita memutuskan tidak ada cukup ruang horizontal di layar, kita dapat dengan mudah mengubah tata letak menjadi satu vertikal dengan media-query.

CSS CODE
.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;		
  }
}

 

HTML CODE
<div class="container">

  <!-- This column will be 25% wide -->
  <div class="col-1">...</div>

  <!-- This column will be 50% wide -->
  <div class="col-2">...</div>

  <!-- This column will be 25% wide -->
  <div class="col-1">...</div>

</div>

Anda Dapat Memeriksa Variasi dari teknik ini disini

5. Membuat The Perfect Sticky Footer

Flexbox memiliki solusi mudah untuk masalah itu juga.. ketika membangun halaman yang mencakup footer, dengan melakukan semuanya dalam elemen fleksibel kita dapat yakin bahwa footer akan selalu di bagian bawah halaman.  Menerpkan display : fleksibel dengan tag tubuh memungkinkan kita unutk memebangun seluruh tata letak halaman kami menggunakan sifat modus fleksibel.. Setelah itu selesai, konten utama website dapat menjadi salah satu item yang fleksibel dan footer lain, yang membuatnya sangat mudah unutk memanipulasi posisi mereka dan menempatkan mereka persisi dimana kita inginkan..

CSS CODE
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;
}

 

HTML CODE
<body>
  
  <!-- All the page content goes here  -->

  <div class="main">...</div>


  <!-- Our sticky foooter -->

  <footer>...</footer>

</body>

Anda Dapat menemukan informasi lebih lanjut disini

Kesimpulan

 Semua Browser Utama (Kecuali IE ) Sekarang mendukung modus tata letak fleksibel,  
 Jika Anda belum mengunakannya sekarang kami sangat menyarankan bahwa anda mencobannya..

 

Mungkin Itu Saja Teknik Dari Saya..

Terima Kasih

Comments

comments