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

Question

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

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

#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，而不是使用宽度和高度。

你可以试试这个：

＆＃13;

＆＃13;

*{
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;