在flexbox中禁用相等的高度

Question

我想要一个图像列表并且它们没有按照它们应该对齐，因为flex使行与父级的高度匹配

.photos {
  border: 1px solid #000;
  height: 400px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.photos .photo {
  border: 1px solid #f00;
  box-sizing: border-box;
  padding: 5px;
  flex: 0 0 20%;
  align-items: flex-start;
}
.photos .photo img {
  max-width: 100%;
}

<div class="photos">
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  
</div>

codepen http://codepen.io/capraruioan/pen/LkrROa

我没有在stackoverflow上找到一个好的答案