CSSのフレックスボックスのアライメントに関する問題

Question

左側のメニューと右側のダッシュボードパネル/カードが複数あるページコンテンツを合わせたいと思います。問題はダッシュボードパネル/カードが動的であることがあります。時にはカードの数が1、時には1以上になることがあります。右側のすべてのダッシュボードパネルを中央揃えにします。私はときに、ページ応答するように、すべてのアイテムを持っていると思い、

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

を最後に：

私は次のコードで試してみましたが、そのは期待通りに動作しません収縮している。

Answer 1

の属性を特定サイズにしたかったように見せかけたため、flex: 1;属性が削除されました。 widthとflexは一緒に使用されません。flex: 1;はflex-growを有効にします。これは、使用可能なすべてのスペースを使用するようにdivに指示します。
次に、justify-content: centerがその作業を実行できるように、使用可能なすべての領域を使用するように（前と同じ大きさにする前に）flex-grow: 1;〜.flex-itemsを追加しました。

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>

注：私は