React原生2x2、3x3、4x4等......(可缩放网格),外部有间隙且无间距?

dw1jzc5e  于 2022-12-14  发布在  React
关注(0)|答案(1)|浏览(128)

我已经非常接近了:https://snack.expo.dev/@taustinligonier/f42d1f来实现这个功能。我似乎可以很容易地得到我想要的网格大小(2x2,3x 3等...)。然而,当涉及到只在网格的中间部分添加间隙(外部没有填充/边距)时,我已经完全停止了。
我以为在子节点上做margin,在父节点上做-margin会起作用,但是经过一些研究,底部和右侧的负边距与顶部和左侧的效果不一样,所以我得到了一些奇怪的结果(因为 Package 不再对Flex起作用)。
我可以计算项目的宽度并使用justify-content: space-between,但我认为我只能水平或垂直地这样做,而不是同时使用flex。
我可以得到这个“工作”与边距和填充,但然后有间距的孩子,这是我不想要的。
也许有一种方法可以添加另一个容器或其他东西,使它“看起来”像孩子们正在触摸外缘,但真的他们不是?
如果你有任何想法,我将很高兴知道!提前感谢。

zzlelutf

zzlelutf1#

我认为在网格中的所有组件上使用flex和使用justifyContent:'space-between'是不兼容的。Flex根据flex比率分配剩余的宽度/高度,并且间隔在所有非第一个/最后一个样式的组件之间共享轴上的剩余宽度/高度。因为flex已经使用剩余的宽度/高度来增加组件大小,则将没有剩余的宽度/高度用于增加组件之间的间隔。
这就是我意识到的this
我想到的是将margin应用于相反的轴,例如marginVertical应用于行,marginHorizontal应用于列。计算结果为ok-ish
第一个

相关问题