CSS中Flexbox的对齐问题

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