在弹性项目上使用边距

Question

我的印象是可以为弹性项目/子项添加边距，弹性盒应该自动考虑这一点并计算项目之间的正确间距。

但我似乎无法按我的意愿工作。

在这里提琴：https://jsfiddle.net/dba5ehcw/1/

.flex-item{
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
}

因此，此时每个 flex 项都是容器宽度的一半，并且它们彼此相邻流动得很好。

我希望能够为弹性项目添加 1em 的边距，以便给它们一些喘息的空间，但是这样做，它们会变得大于 50%，并且不再堆叠在每个弹性项目旁边其他在同一行，因为它们太宽了。

有没有办法在弹性项目上使用边距并让弹性盒容器考虑到这一点并相应地调整（减小）它们的宽度？

Answer 1

有多种方法可以做到这一点：

• 使用calc:

  .flex-item {
    width: calc(50% - 2em);
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    width: calc(50% - 2em);
    margin: 1em;
  }

  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>

• 使用嵌套框：

  .flex-item {
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    height: 160px;
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }

  <div class="flex-container">
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
  </div>

• 将每一行放在一个 nowrap 容器中，并使用正的 flex-shrink 因子

  .row {
    display: flex;
  }
  .flex-item {
    width: 50%;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    width: 320px;
  }
  .row {
    height: 160px;
    display: flex;
  }
  .flex-item {
    border: 1px solid blue;
    width: 50%;
    margin: 1em;
  }

  <div class="flex-container">
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
  </div>

• 不要使用width。相反，在正确的位置强制换行，并使用flex: 1 使元素增长以填充剩余空间。

  .flex-item {
    flex: 1;
  }
  .line-break {
    width: 100%
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    flex: 1;
    margin: 1em;
  }
  .line-break {
    width: 100%;
  }

  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>

Answer 2

您需要使用填充来执行此操作 - 在 border-box 模式下不会使容器大于其指定宽度 - 而不是边距，以及嵌套的 flex div。这就是所有基于 flexbox 的网格系统的工作方式。代码如下：

.flex-container{
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}

.flex-item{
    padding:1em;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
    display:flex;
}

.flex-item>div {
    border: 1px solid blue;
    flex: 1 1 auto;
}

<div class="flex-container">
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
</div>

Answer 3

试试这个：-

.flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}

.flex-item {
  justify-content: space-around;
  margin: 1%;
  background: red;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 160px;
  width: 48%;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>