Alignment issue with flexbox in css - html

Question

I want to align menu on the left side and page content which has multiple dashboard panels/cards on the right side. The problem is dashboard panels/cards are dynamic sometimes number of cards might be 1 and sometimes more than 1. I want all the dashboard panels on the right side to be center aligned.
I tried with the following code but its not working as expected:
main {
display: flex;
flex-wrap: wrap;
}
aside {
width: 200px;
height: 200px;
border: 2px solid red;
}
.flex-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.flex-item {
margin-left: 50px;
border: 2px solid red;
flex: 1;
width: 250px;
height: 100px;
}
<main>
<aside>Menu</aside>
<section class="flex-items">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</section>
</main>
Codepen
Finally, I would like to have all the items to be responsive when page is shrunk.

Answer 1

I removed the flex: 1; attribute from .flex-item as it looks like you wanted them to be a specific size. width and flex don't make sense used together as flex: 1; enables flex-grow and that tells the div to use all available space.
I then added flex-grow: 1; to .flex-items so it uses all the available space (before it was just as wide as it needed to be) so the justify-content: center can do it's work.
main {
display:flex;
}
aside {
width:200px;
height:200px;
border:2px solid red;
}
.flex-items {
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 1;
}
.flex-item {
margin-left:10px;
border:2px solid red;
width:80px;
height:100px;
}
<main>
<aside>Menu</aside>
<section class="flex-items">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</section>
</main>
Note: I changed the widths and margins to allow better rendering in small spaces