在弹性项目上使用保证金

Question

我的印象是可以为flex项目/子项添加边距,flexbox应该自动将其考虑在内并计算项目之间的正确间距.

我似乎无法按照自己的意愿行事.

小提琴:https://jsfiddle.net/dba5ehcw/1/

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

因此,此刻每个弹性项目都是容器宽度的一半,并且它们彼此相邻.

我希望能够为flex-items添加一个说法1em的余量,以便为他们提供一些喘息的空间,但是这样做,他们会变得比50%更大,并且不再相互堆叠在一起同一条线,因为它们太宽了.

有没有办法在flex-items上使用margin并让flexbox容器考虑到这一点并相应地调整(减小)它们的宽度？

Answer 1

您需要使用填充 - 当处于border-box模式时不会使容器大于指定的宽度 - 不是边距,而是嵌套flexdiv.这就是所有基于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 2

尝试在弹性容器上添加间隙，而不是使用边距

.flex-container {
    display: flex;
    gap: 1em 
}
flex-item {
    width 50%
}

Answer 3

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

• 用途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>