在弹性项目上使用边距

Question

我的印象是 flex 可以添加边距 items/children，flexbox 应该会自动考虑到这一点并计算项目之间的正确间距。

不过，我似乎无法按照我的意愿进行这项工作。

Fiddle 这里：https://jsfiddle.net/dba5ehcw/1/

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

所以现在每个 flex 项目都是容器宽度的一半，并且它们彼此相邻流动。

我希望能够为 flex-items 添加 1em 的边距，以便给它们一些喘息的空间，但在这样做时，它们变得大于 50%，并且不再堆叠因为他们太宽了。

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

Answer 1

您需要使用填充来完成它 - 在 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 2

试试这个：-

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

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 容器中，并使用正的收缩系数

.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 使元素增长以填充剩余的 space.

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

在弹性项目上使用边距

Using margin on flex items

css

flexbox