在弹性项目上使用边距

Posted 2023-03-06

【中文标题】在弹性项目上使用边距

【英文标题】：Using margin on flex items

【发布时间】：2015-12-22 06:35:07

【问题描述】：

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

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

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

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

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

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

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

【参考方案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>

【讨论】：

这个答案应该被接受，提供了大量的替代方案

Ya calc 似乎是最符合语义的解决方案。

【参考方案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>

【讨论】：

知道了，谢谢。我之前尝试过填充 - 但没有嵌套的 div。

好吧，填充！=边距。 calc(50% - margin) 的答案显然更好。

【参考方案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>