Question

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

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

.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模式时，不会使容器大于指定的宽度 - 不是边距，而是嵌套的flex div。这就是所有基于flexbox的网格系统的工作方式。代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

使用calc：

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用嵌套框：

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

＆＃13;

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

＆＃13;

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

＆＃13;

将每一行放在一个nowrap容器中，并使用正屈伸系数

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

https://jsfiddle.net/dba5ehcw/4/

在弹性项目上使用保证金

3 个答案: