Belajar css Flexbox, Membuat Card

SMKTI.COM – Belajar css Flexbox, Membuat Card. Flexbox adalah salah satu mode layout yang bisa kita pakai di CSS3. Jika sebelumnya kita sering menggunakan float ketika akan membuat block seperti card dimana yang paling sering kita temui adalah kendala di responsive yang harus kita atur sendiri. Dengan flex box ini bisa kita atur secara otomatis child akan mengitkuti lebar screen sehingga bisa responsive di semua jenis screen.

Pada kasus kali ini kita akan belajar bagaimana cara membuat block card yang responsive yang sering digunakan pada website – website modern seperti berikut :

Belajar css Flexbox, Membuat Card

Langsung saja kita akan buat code nya:

Pertama kita buat dahulu layout html nya seperti berikut :

<div class="wrap">
   <div class="flex">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
  </div>
</div>

Lalu kita tambahkan CSS (disini saya menggunaka SCSS)

.wrap{
  // max-width: 500px;
  border: 1px solid silver;
  .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    
    &:after{
      content: "";
      flex: 0 1 24%;
      height: 100px;
      // background-color: blue;
       margin: 0 20px;
      margin-bottom: 30px;
    }
    
    .box{
      width: 24%;
      height: 100px;
      margin: 0 20px;
      margin-bottom: 30px;
      background-color: red;
    }
  }
}

Penjelasan :

display flex disini berarti kita mendefiniskan elemen dengan class flex yang berarti semua child dibawahnya dengan class box akan terpengaruh. Kita bisa adjust lagi untuk berbagai screen menggunakan media query jika dirasa di screen tertentu lebarnya kurang atau lebih. Jadi disini kita hanya memainkan width dari class .box dan afternya untuk memanipulasi responsive.

flex : wrap //ini agar box yang lebih otomatis turun kebawah

Kalau justify content : //ini agar box terpisah sesuai dengan jarak dari masing masing box

maksud dari psuedo code after:

//ini adalah cara agar box terakhir tidak menempel di akhir block, jika tidak pakai ini maka box terakhir akan ke samping dan membentuk space besar jika kita memiliki 5 card misalnya dengan lebar 30%

Berikut ini codepennya:

See the Pen Flexbox CSS Card Wrap (fix Space between latest flex box) by Egi Samsul Mu’arif (@egi-samsul-muarif) on CodePen.

Itulah tips belajar css dengan flexbox semoga bermanfaat!

Baca juga :

Leave a Reply

Your email address will not be published. Required fields are marked *