I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn't seem to have any effect; the images still stack vertically.
I'm also using Material UI, so if there's a more efficient way to achieve this with it, please share your insights.
Full code - https://pastebin.com/t4wiCexe [Cannot provide CodeSandbox link as the images are fetched from Firebase database, my apologies]
Thanks!
Home.js
<div className="post">
<img className="postimage" src={post.link} />
</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;
}