Positionnement images

Bonjour,

Je suis en train de créer un portfolio et je souhaiterais positionner mes images de la manière suivante :

(Avec une largeur fixe, mais une hauteur différente selon les images, et que celles-ci soit toutes 'collées' sans espaces sur les côtés et le tout centré sur la page.)

Est-ce possible ? avec "display: flex;" ?

Mon code HTML ressemble à ça :

<div id=conteneur2">
<div class=hover01">
<div>
<figure><img src=url.png" height=auto width="250"/></figure>
</div>
<div>
<figure><img src=url.png" height=auto width="250"/></figure>
</div> 
</div>

J'ai un hover sur les images qui, lorsqu'on passe la souris sur les images zoom.

Et donc mon code CSS pour cette partie :

#conteneur2
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}
.hover01 figure img 
{
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover01 figure:hover img 
{
 -webkit-transform: scale(1.4);
 transform: scale(1.4);
}

Je suis débutante et j'ai tenté différents bidouillages sans succès. Du coup si quelqu'un pouvait m'aider ça serait gentil.
Merci d'avance.

EDIT:
j'ai un peu avancé je crois, mais les images ne sont toujours pas collées les unes sous les autres..

Code CSS:

#conteneur2 img
{
    position: relative;
    float: left;
    width:  250px;
    height: auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}