负边距不适用于 flexbox答案

【问题标题】：Negative margin not working with flexbox负边距不适用于 flexbox
【发布时间】：2019-08-03 21:40:37
【问题描述】：

我正在尝试在 flexbox 的帮助下创建一个网格布局。

我正在做的是，我在左侧和右侧给父级负边距，然后在左侧和右侧给其子级相同数量的边距空间。

我正在尝试制作 5 列网格，当我使用 flex: 1 1 20% 时，所有列都没有出现在同一行中。最后一个被包裹在下一行。不应出现这种情况，因为 flex-basis 设置为 20%，并且父级应在一行中容纳所有五列。

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

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

谢谢。

【问题讨论】：

当您在.block 上使用box-sizing: border-box; 时？所有元素将位于同一行。
@Huelfe 是的 box-sixing 没有帮助。我已经在使用 box-sizing。
那你的codepen不完整。因为当我将 sn-p 添加到您的 codepen 时，您的元素将位于同一行。
使用您的 codepen，box-sizing 可以工作。如果它在你自己的代码中不起作用，你需要提供一个工作代码 sn-p 来实际复制你遇到的问题
你使用哪个引导版本？

标签： html css flexbox

【解决方案1】：

如果我将 bootstrap 添加到 your codepen，它可以工作，这意味着您还有其他一些我们在您的原始代码中看不到的问题。

请注意，根据您的图片设置，您的元素仍可能会换行

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

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

【讨论】：

这是实现相同布局的一种不错的替代方法。谢谢。但是我仍然很困惑为什么负边距不起作用，因为这个库似乎使用了相同的方法。 github.com/kristoferjoseph/flexboxgrid/blob/master/dist/…
@vikrantnegi007 无法说明为什么您的原件不起作用，因为我看不到它。您的 codepen（带引导程序）可以。您是否尝试将图像设置为display: block？
是的，我做到了。您能否将我的代码的 zip 发送给您，以便您更好地查看完整代码？那将不胜感激。
@vikrantnegi007 最好给我一个链接。解析代码耗时过长
@vikrantnegi007 幸运的是，我的答案中有一个注释......现在很容易接受答案:)

【解决方案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

【讨论】：

我正在使用引导程序，所以 box-sizing 已经存在。这不适用于我在实际代码中的代码。
flex: 2 用flex-basis: 0 覆盖flex-basis: 20%。看developer.mozilla.org/en/docs/Web/CSS/flex

【解决方案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;
  }
}

点击这里查看DEMO

【讨论】：

因为 flex-wrap 属性指定了弹性项目是否应该换行。
我认为您已经找到了解决方案。快乐的编码兄弟:)
不，我刚刚注意到您已经删除了 -ve 边距，这就是它起作用的原因。您的解决方案不适用于保证金。

【解决方案4】：

如果负边距不适用于 display flex，但您可以尝试使用 transform：

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

例子：

transform: translateY(15px);

P.S.：transform 不能移植到所有浏览器。

【讨论】：