По умолчанию флекс-элементы располагаются в одну строку. Свойство flex-wrap со значением wrap позволяет переносить их на другую строку, если элементы не помещаются по ширине в контейнере.
div {
display: flex;
flex-wrap: wrap;
}
.photo {
border: 1px solid #d1d5d9;
margin-bottom: 1em;
}
.photo {
margin-right: 1em;
}
.photo:last-child {
margin-right: 0;
}
figure {
margin: 0;
}
figcaption {
text-align: center;
padding: 0.5em;
}