how to display cards on the same line using display flex? - html

Question

I need to display cards on the same line and use flex-wrap: wrap to wrap. But it's not working, what's wrong with my code?
Code
return(
<div className='container-poster'>
<div className='poster'>
<div className='poster-img'>
<img src={poster} />
<i>
{isFavorite ?
<FaHeart className='heart-icon' style={{ color: 'red' }} /> : <FaHeart className='heart-icon' style={{ color: '#BABABA' }} />
}
</i>
</div>
<div className='poster-title-vote'>
<h4 className='title-movie'>
{title}
</h4>
<div className='box-note'>
<span className='rating'>{rating}</span>
<i className='icon-vote-like'>
<img src={IconLike} alt="icon like"></img>
</i>
</div>
</div>
<p className='overview'>
{overview}
</p>
</div>
</div>
)
Reality
I want it to be a maximum of 4 cards in the same row and then break it when there's no space
SandBox
https://codesandbox.io/s/jolly-waterfall-10s5gx?file=/src/Poster.js

Answer 1

You'll want to add display: flex; on your parent .container-poster. This will make all elements nested in each flex-item .poster row item. You can then use display: flex; with flex-direction: column on your .poster to get the title underneath.
See below:
.container-poster {
display: flex;
justify-content: space-between;
}
.poster {
text-align: center;
display: flex;
flex-direction: column;
width: calc(100%/4.1); /* .1 for spacing */
}
img {
max-width: 100%;
}
<div class='container-poster'>
<div class='poster'>
<div class='poster-img'>
<img src="https://dummyimage.com/300/000/fff" />
</div>
<div class='poster-title-vote'>
<h4 class='title-movie'>Title
</h4>
</div>
<div class='box-note'>
<span class='rating'></span>
</div>
</div>
<div class='poster'>
<div class='poster-img'>
<img src="https://dummyimage.com/300/000/fff" />
</div>
<div class='poster-title-vote'>
<h4 class='title-movie'>Title
</h4>
</div>
<div class='box-note'>
<span class='rating'></span>
</div>
</div>
<div class='poster'>
<div class='poster-img'>
<img src="https://dummyimage.com/300/000/fff" />
</div>
<div class='poster-title-vote'>
<h4 class='title-movie'>Title
</h4>
</div>
<div class='box-note'>
<span class='rating'></span>
</div>
</div>
<div class='poster'>
<div class='poster-img'>
<img src="https://dummyimage.com/300/000/fff" />
</div>
<div class='poster-title-vote'>
<h4 class='title-movie'>Title
</h4>
</div>
<div class='box-note'>
<span class='rating'></span>
</div>
</div>
</div>