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是为了弥补你的边距）。

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