Flexbox Patterns
by CJ Cenizal

Gallery

1
2
3
4
5
6
7
8
9
10

This would be pretty easy to do without flexbox, right? You would just set each Photo to havedisplay: inline-block, and you would get the same basic layout.

But inline-block elements can be tricky! They interpret white-space in the markup in a way that introduces extra unwanted space between each item. You can get rid of this extra space, but you’ll have to implement one of several workarounds.

Fortunately, one of those workarounds is to just use flexbox! We need to use one new flexbox property called flex-wrap to do this. Normally, a flexbox container will try to fit all of its children onto one row.flex-wrap tells the container to wrap children onto subsequent rows instead.

CSS
.gallery {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Allow the children to wrap to the next "row",
   * instead of trying to squeeze them all into
   * a single row.
   */
  flex-wrap: wrap;

  width: 478px;
  padding: 5px;
  border: 1px solid #D7DBDD;
}

.photo2 {
  background-image: url('../images/dog_2.jpg');
}

.photo3 {
  background-image: url('../images/dog_3.jpg');
}

.photo4 {
  background-image: url('../images/dog_4.jpg');
}

.photo5 {
  background-image: url('../images/dog_5.jpg');
}

.photo6 {
  background-image: url('../images/dog_1.jpg');
}

.photo7 {
  background-image: url('../images/dog_2.jpg');
}

.photo8 {
  background-image: url('../images/dog_3.jpg');
}

.photo9 {
  background-image: url('../images/dog_4.jpg');
}

.photo10 {
  background-image: url('../images/dog_5.jpg');
}
HTML
<div class="gallery">
  <div class="photo photo1 photo--large">1</div>
  <div class="photo photo2 photo--large">2</div>
  <div class="photo photo3 photo--large">3</div>
  <div class="photo photo4 photo--large">4</div>
  <div class="photo photo5 photo--large">5</div>
  <div class="photo photo6 photo--large">6</div>
  <div class="photo photo7 photo--large">7</div>
  <div class="photo photo8 photo--large">8</div>
  <div class="photo photo9 photo--large">9</div>
  <div class="photo photo10 photo--large">10</div>
</div>
More stuff
If you like my writing you can find more at my blog, cenizal.com. Right now I'm mostly writing about people management, software engineering, and interaction design.