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.
Comments