html – 网格中的Flexbox边距

前端之家收集整理的这篇文章主要介绍了html – 网格中的Flexbox边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

flexbox grid

他们都使用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相关文章