居中彈性項目下的flexbox網格

Question

我想在.container的左側有一個簡介部分，在右側的是一個側欄。

在.intro部分的左側，我希望有四個div，它們均勻地像網格一樣間隔。

我在設置“網格”時遇到問題。 我認為部分問題是父級具有一些影響子級的flexbox屬性。

要求：簡介部分應位於。 .left-side中心， .left-side “網格”居中，框應占據必要的空間，以便將2排成一排，中間.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-direction: row或column 。

對於布局，您可以構建一個包含兩個彈性項目的列。 第一項（ .intro ）的寬度為80％，可以水平居中。 第二個項目（ .recent ）可以是一個伸縮容器，其中四個項目以2x2網格排列。

 .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>