Simplest horizontal Gallery ever

A basic gallery using flexbox

by Simon Harte

HTML

<div class="m-gallery">
  <div class="m-gallery__item"><img src="//placehold.it/200x250" alt="Image"></div>
  <div class="m-gallery__item"><img src="//placehold.it/200x250" alt="Image"></div>
  <div class="m-gallery__item"><img src="//placehold.it/200x250" alt="Image"></div>
  <div class="m-gallery__item"><img src="//placehold.it/200x250" alt="Image"></div>
  <div class="m-gallery__item"><img src="//placehold.it/200x250" alt="Image"></div>
</div>

SCSS

.m-gallery {
  overflow-x: auto;
  display: flex;
  
  &__item {
    flex: none;
  }
  
  &__item + &__item {
    margin-left: 10px;
  }
}