css 行或列之间的柔性缠绕空间

b4wnujal  于 2023-02-06  发布在  其他
关注(0)|答案(1)|浏览(180)

假设您有一个包含以下CSS的<div>

display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 300px;

注意,height是固定的,但是假设任何子<div>height仅为50px
当这些子代换行时,行将垂直均匀分布,以填充父代的固定高度。这可以从here中看到。在该示例中,换行产生的两行各自在其下方获得相等的空间,因此每行及其空间占父代高度的一半。但如果有更多的行,则高度将重新均匀分布。这样他们每个人都占了(1/n_rows)%。当然,一张图片值103个字...

**目标:**能够固定行之间的空间量。(当我动态添加项目时,我希望行能够一点一点地填充,而不是每个新行导致其他行向上移动。)

我还没有找到这样做的方法。它与项目高度、边距、填充或伸缩间隙无关。伸缩 Package 上的参考似乎没有提到这个空间,我在谷歌上也没有运气。当然,我可以删除父项的固定高度,但我宁愿不这样做,因为这样父项下的项目会随着它的增长而移动。

mtb9vblg

mtb9vblg1#

如果我没理解错的话,您要查找的是align-content: flex-start

相关问题