如何在flexbox中设置项目的边距？

Question

我想将flexbox中项目的margin设置为2%。 但是，如果我将每个margin设置为2%，则它们在视觉上不具有相同的长度。

我想设置每个项目之间的距离为2％。 另外，我想设置2％距离flexbox的边界。

#wrap { 
 
    width: 800px; 
 
} 
 

 
#left { 
 
    width: 550px; 
 
    height: inherit; 
 
    float: left; 
 
} 
 

 
#flexbox { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    margin-left: 2%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 500px; 
 
} 
 

 
.item { 
 
    width: 47%; 
 
    height: 200px; 
 
    margin-right: 2%; 
 
}

<div id="wrap"> 
 
    <div id="left"> 
 
    <div id="flexbox"> 
 
     <div class="item">div1</div> 
 
     <div class="item">div2</div> 
 
     <div class="item">div3</div> 
 
     <div class="item">div4</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我这样做是使用嵌套div并应用这些div内保证金的方式，这种方式，你可以有超过保证金更多的控制。由于您使用的是flexbox，因此您可以使用flex-basis和flex-grow来分配div，而不是使用宽度和高度。

你可以试试这个：

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
#wrap { 
 
    width: 800px; 
 
    background:#ece8e8; 
 
    overflow:hidden; 
 
} 
 

 
#left { 
 
    width: 550px; 
 
    height: inherit; 
 
    float: left; 
 
    background:#b8b8b8; 
 
} 
 

 
#flexbox { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    /*margin-left: 2%;*/ 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 500px; 
 
} 
 

 
.item { 
 
    /*width: 47%;*/ 
 
    /*height: 200px;*/ 
 
    /*margin-right: 2%;*/ 
 
    background: grey; 
 
    flex-basis: 50%; 
 
    flex-grow: 1; 
 
} 
 

 
.item>div { 
 
    background: #454444; 
 
    margin: 2%; 
 
    height: 100%; 
 
} 
 

 
.item:nth-child(1)>div, 
 
.item:nth-child(2)>div{ 
 
    margin-right: 0%; 
 
}

<div id="wrap"> 
 
    <div id="left"> 
 
    <div id="flexbox"> 
 
     <div class="item"><div>div1</div></div> 
 
     <div class="item"><div>div2</div></div> 
 
     <div class="item"><div>div3</div></div> 
 
     <div class="item"><div>div4</div></div> 
 
    </div> 
 
    </div> 
 
</div>