Center a Row Of Images

I’m trying to align all of the images that are displayed, as a row and center them using flex but I can’t seem to figure it out.

I have gotten all the images centred using flex and justify-content center but doing
flex-direction row on the container does not do anything, The images remain as vertically stacked columns

I am also using Material UI so if there is a better way to do that with it please let me know.

Thanks

Home.js

<div className=”post”>
<img className=”postimage” src={post.link} />
</div>
</div>

App.css

.postimage{
width: 100px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.post{
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}