网格中的 Flexbox 边距 [重复]答案

【问题标题】：Flexbox margins in a grid [duplicate]网格中的 Flexbox 边距 [重复]
【发布时间】：2017-06-29 18:57:06
【问题描述】：

我在 flexbox 中有一个网格，如下所示：

它们都使用 flexbox 定位，然后面板本身（彩色位）具有margin: 5px。

因为右上部分有两个元素，那里的边距比较大，所以稍微往下推——我不希望这种情况发生！

我想这两种可能的修复方法是要么让边距不这样做，要么让组件变小五个像素，而不是像现在这样大五个像素 - 但我不知道如何做这两件事。

如何在不改变父元素大小的情况下添加更多元素？

【问题讨论】：

您需要使用水平布局而不是垂直布局，因为它会使行的高度相等。如果要保持垂直，则需要给每个块一个高度
这仅适用于我发布的简单情况 - 在更复杂的情况下（例如水平布局中的垂直布局，而不是垂直布局），仍然是一个问题。
@callumacrae 为什么不使用网格布局呢？我认为在当前情况下更合适。
@VadimOvchinnikov 在生产网站上使用只有 69.3% 浏览器支持的任何功能是完全不合适的。 caniuse.com/#feat=css-grid

【解决方案1】：

主要问题是您使用flex-grow 调整元素大小。 flex-grow 不是正确的属性，因为它与flex-shrink 一起用于分配剩余空间（或者如果很少）。

你应该使用flex-basis，因为一旦你开始用内容填充这些空框，它们的内容会在大小上有所不同，它们会更加错位。

这是你的更新版本，我改成style="flex-basis: calc(50% - 10px);"（10px是为了弥补你的边距）。

这是你的一个版本，与我在我的文本中使用的文本相同

【讨论】：