html – 网格中的Flexbox边距

发布时间：2020-12-14 23:29:15 所属栏目：资源来源：网络整理

导读：参见英文答案 flex-grow not sizing flex items as expected5个我在flexbox中有一个网格,如下所示：他们都使用flexbox定位,然后面板本身(彩色位)有边距：5px. codepen：https://codepen.io/callumacrae/pen/bRoZdp 因为右上角有两个元素,那里有更多的余量,

参见英文答案 > flex-grow not sizing flex items as expected5个
我在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!