html– 网格中的Flexbox边距

概述参见英文答案 > flex-grow not sizing flex items as expected                                    5个我在flexbox中有一个网格,如下所示：他们都使用flexbox定位,然后面板本身(彩色位)有边距：5px.codepen：https://codepen.io/callu

参见英文答案 > flex-grow not sizing flex items as expected                                    5个
我在flexBox中有一个网格,如下所示：

他们都使用flexBox定位,然后面板本身(彩色位)有边距：5px.

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

因为右上角有两个元素,那里有更多的余量,所以它稍微向下推 – 我不希望这种情况发生！

我想两个可能的修复方法是让边距不要这样做,或者使组件小五个像素而不是像现在这样大五个像素 – 但我不知道如何做其中任何一个.

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

最佳答案主要问题是您使用flex-grow来调整元素大小. flex-grow不是正确的属性,因为它与flex-shrink一起用于分配剩余的空间(或者如果很少).

你应该使用flex-basis,因为一旦你开始用内容填充这些空盒子,并且它们的内容大小不同,它们就会更加错位.

这是你的更新版本,我改为style =“flex-basis：calc(50％ – 10px);” (10px是为了弥补你的利润).

> Codepen with flex-basis

这是你的版本,我用的是同样的文字

> Codepen with flex-grow 总结

以上是内存溢出为你收集整理的html – 网格中的Flexbox边距全部内容，希望文章能够帮你解决html – 网格中的Flexbox边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。