Cara membuat horizontal scroll grid dengan css flex, bagaimana ?

Pada tutorial sebelumnya saya pernah membuat horizontal scroll dengan menggunakan display: inline-block


Berikut ini tips menggunakan rule css flex.

/* HORIZONTAL SCROLL */

.scroll-container{
   display: flex;
   overflow-x: auto;
   flex-wrap: nowrap;
}

.grid{
   width:120px;
   height:120px;
   background-color:#09aadf;
   border-radius:7px;
   margin-right:10px; 
   flex-shrink: 0;
   flex-basis: auto;
}

Penjelasana di class .grid terdapat flex-shrink, flex-basis. Teman-teman bisa menggunakan satu rule saja yaitu flex: 0 0 auto; Rule tersebut mewakili flex-basis, flex-grow, flex-shrink.
Download Resource