Flexbox在网格中的边距

Question

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

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

codepen：https://codepen.io/callumacrae/pen/bRoZdp

因为右上角有两个元素，所以有更多的余量，所以它会略微下推 - 我不希望这种情况发生！

我猜两个可能的修复方法是让边距不要这么做，或者使组件五像素更小而不是像现在这样大五个像素 - 但我不知道怎么做其中任何一件事。

如何添加更多元素而不更改父级的大小？

Answer 1

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

您应该使用flex-basis，因为只要您开始使用内容填充这些空框，并且其内容的大小不同，它们就会更加错位。

以下是您的更新版本，我更改为style="flex-basis: calc(50% - 10px);"（10px是为了弥补您的利润）。

• Codepen with flex-basis

这是你的一个版本，与我在我的用法相同

• Codepen with flex-grow