负边距在flexbox布局中无效

Question

我正在尝试使用flexbox创建网格布局。

我的做法是在父元素上设置负边距，并在其子元素上设置同样数量的内边距来实现间距。

我尝试创建一个五列网格，在使用flex: 1 1 20%时，所有列都不会在同一行中。最后一列被包裹在下一行中。这不应该发生，因为flex-basis设置为20%，父元素应该能够容纳所有五列在同一行中。

但是当我尝试这样做时，第四个网格项被包裹到了下一行。

这是解决此问题的工作代码。 更新了CodePen： https://codepen.io/vikrantnegi007/pen/BZwGJQ

谢谢。

- vikrantnegi

---

当你只在 .block 上使用 box-sizing: border-box; 时呢？所有的元素都将在同一行中。 - Huelfe

@Huelfe 是的，box-sizing并没有起到帮助作用。我已经在使用box-sizing了。 - vikrantnegi

那么你的 CodePen 不完整。因为当我将代码片段添加到你的 CodePen 中时，你的元素将在同一行中。 - Huelfe

通过你的 CodePen，box-sizing 是有效的。如果在你自己的代码中无效，你需要提供一个能够复制你遇到问题的工作代码片段。 - Asons

你使用哪个Bootstrap版本？ - Asons

@LGSon Bootstrap 3.3.7 - vikrantnegi

Answer 1

如果我在你的 codepen 中添加 bootstrap，它可以正常工作，这意味着你的原始代码中可能存在我们看不到的其他问题。

请注意，基于您图像的设置，您的元素仍然可能会换行

相反，不要使用负边距技巧，而是创建一个 间隔，使用 justify-content: space-around 和 flex-basis。

更新后的 codepen

//testing css
.buisness-blocks {min-height: 250px;}

//main css
.buisness-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .block {
    flex-basis: calc(20% - 10px);
    outline: 1px solid;
  }
}

- Asons

---

这是一种不错的替代方法，可以实现相同的布局。谢谢。但我仍然困惑为什么负边距没有起作用，因为这个库似乎使用了相同的方法。https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css - vikrantnegi

@vikrantnegi007 最好给我一个链接。解析代码需要太长时间。 - Asons

@vikrantnegi007 那我很幸运，因为我在我的答案中已经注明了这一点...现在接受一个答案将会很容易 :) - Asons

让我们在聊天中继续这个讨论。 - vikrantnegi

这是原问题的一个好解决方案。我想补充一点，在使用这种技术的网格CSS中，你可能有许多不同的配置（如Bootstrap），使用负边距可能更简单，因为你只需要在一个地方指定它。当你使用纯弹性盒子解决方案时，你需要将间隙计算添加到每个块大小中。（即50％-10px，25％-10px等）在使用像Sass这样的CSS工具时很容易更新，但在原始CSS中可能更难维护。 - Neil Monroe

Answer 2

box-sizing是您正在寻找的CSS属性吗？

将block的box-sizing设置为border-box，它们都会挨在一起：

.block {
  flex: 0 1 20%;
  padding-right: 10px;
  padding-left: 10px;
  outline: 1px solid;
  box-sizing: border-box;
}

https://codepen.io/anon/pen/vZeQjO

- Patrick

---

我正在使用Bootstrap，所以box-sizing已经存在。但是在实际代码中，这与我的代码不兼容。 - vikrantnegi

flex: 2 通过 flex-basis: 0 覆盖了 flex-basis: 20%。请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex。 - Patrick

Answer 3

试一下，希望它能工作

.buisness-blocks {min-height: 250px;}


.buisness-blocks {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  margin-right: 0px;
  margin-left: 0px;

  .block {
    flex: 0 1 20%;
      -webkit-flex: 10;  /* Safari 6.1+ */
    -ms-flex: 10;  /* IE 10 */    
    flex: 2;
    padding-right: 10px;
    padding-left: 10px;
    outline: 1px solid;
  }
}

点击这里查看演示

- Jaykumar Gondaliya

---

由于flex-wrap属性指定了弹性项目是否应该换行。 - Jaykumar Gondaliya

我认为你已经得到了解决方案。 祝编码愉快，兄弟 :) - Jaykumar Gondaliya

不，我只是注意到你删除了负边距，这就是为什么它能工作的原因。你的解决方案在使用边距时将无法工作。 - vikrantnegi

Answer 4

如果负边距与display flex不起作用，你可以尝试使用transform：

在内部元素的CSS样式属性中添加你想要的transform translate。

示例：

transform: translateY(15px);

- Derzu