Photo

Sup, dog

What’s a photo without a caption? Without flexbox, you would have to absolutely position this caption inside of the photo. But this is a little inefficient because it means you can’t use the padding property on the photo to control the label’s distance from the edge, and you have to manually set thewidth on the label to make the text wrap. With flexbox, you get all of this out of the box! (Get it? Out of the box.)

By this point, you’re already familiar with all of the properties we need for this. The only difference is now you’re going to use different values to achieve the intended result:

justify-content: flex-end aligns all of the children to the end of the main axis. In this case, we’re using the default main axis, which is horizontal. So the label gets aligned to the right side of the container.
align-items: flex-end does the same thing, but perpendicular to the main axis. This direction is also known as the secondary axis. So all of the children get aligned to the bottom of the container.

CSS

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

  /**
   * Align all the children to the end of the main
   * axis. This is the right side, by default.
   */
  justify-content: flex-end;

  /**
   * Align all the children to the end of the
   * secondary axis. This is the bottom, by default.
   */
  align-items: flex-end;

  width: 145px;
  margin: 5px;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.photo--large {
  height: 130px;
}

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

HTML

<div class="photo photo1 photo--large">
  Sup, dog
</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.