フレックスボックスグリッドはセンタリングフレックスアイテム

Question

.containerの左側にイントロセクションがあり、右側にサイドバーがあります。

左側の.introセクションの下に、グリッドのように4つのdivが均等に配置されます。

"グリッドセットアップ"の取得に問題があります。私は、問題の一部は、親が子供に影響を与えるフレックスボックスの属性を持っているということです。

要件：イントロ部.left-sideおよび「グリッド」の中心にすべきであるボックスが間にマージンを持つ行にに合わせて、必要な多くのスペースを取るべきでセンタリングされるべきではありません。 .introは、左側の幅の80％にする必要があります。

私は構造に大きな変更を加えたくないのですが、これは私のプロジェクトの設定方法の小さなサンプルです。

.container{ 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 
.left-side{ 
 
    flex:8; 
 
    display: flex; 
 
    justify-content:center; 
 
    flex-wrap: wrap; 
 
} 
 
.side-bar{ 
 
    flex: 2; 
 
    height: 100vh; 
 
    background: powderblue; 
 

 

 
} 
 
.intro{ 
 
    flex:3; 
 
    width:80%; 
 
    height: 300px; 
 
    background: skyblue; 
 
} 
 

 
.box{ 
 
    background: red; 
 
    width: 45%; 
 
    height: 100px; 
 
    flex:4; 
 
    border:1px solid orange; 
 
}

<div class="container"> 
 
    <div class="left-side"> 
 
    <div class="intro"> 
 
     intro 
 
    </div> 
 
    <div class="recent"> 
 
     <div class="box">1</div> 
 
     <div class="box">2</div> 
 
     <div class="box">3</div> 
 
     <div class="box">4</div> 
 
    </div> 
 
    </div> 
 
    <div class="side-bar"> 
 
    sidebar 
 
    </div>

Answer 1

Flexのアイテムは、フレックスコンテナことができます。これにより、複数のコンテナ（flex-direction: rowまたはcolumn）をより大きなコンテナにネストすることができます。

レイアウトには、2つのフレックスアイテムで構成される列を作成できます。最初の項目（.intro）は80％の幅を持ち、水平にセンタリングすることができます。 2番目の項目（.recent）は、2つのグリッドに4つの項目が配置されたフレックスコンテナです。

.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 
.left-side { 
 
    flex: 4; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.side-bar { 
 
    flex: 1; 
 
    background: powderblue; 
 
} 
 
.intro { 
 
    flex: 3; 
 
    height: 300px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background: skyblue; 
 
} 
 
.recent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-image: url("http://i.imgur.com/60PVLis.png"); 
 
    background-size: contain; 
 
} 
 
.box { 
 
    margin: 5px; 
 
    flex-basis: calc(50% - 10px); 
 
    height: 100px; 
 
    box-sizing: border-box; 
 
    background: red; 
 
} 
 

 
body { margin: 0; }

<div class="container"> 
 
    <div class="left-side"> 
 
     <div class="intro">intro</div> 
 
     <div class="recent"> 
 
      <div class="box">1</div> 
 
      <div class="box">2</div> 
 
      <div class="box">3</div> 
 
      <div class="box">4</div> 
 
     </div> 
 
    </div> 
 
    <div class="side-bar"> 
 
     sidebar 
 
    </div> 
 
</div>