flex 最后一行不space-between

最新推荐文章于 2024-01-25 11:32:45 发布

原创最新推荐文章于 2024-01-25 11:32:45 发布 · 7.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flex #web

html编程笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Flex布局解决最后一行元素被撑开的问题的方法。通过添加不可见的填充元素来确保最后一行始终显示预设数量的项目，从而维持布局的一致性。

使用flex:

.searchContents {
	flex-direction: row;
 	flex-wrap: wrap;
	justify-content:space-between;
	align-items: flex-start;
	overflow: hidden;
}

估计出现常见问题：

最后一行被撑开了, 不是我们想要的!!, 那如何让最后一行不缠开? 确保最后一行有四个元素，所以我们用伪造的方式(有点像clear float冗余)

                    <div class="shop-item" style="height: 0px;visibility: hidden;"></div>
                    <div class="shop-item" style="height: 0px;visibility: hidden;"></div>
                    <div class="shop-item" style="height: 0px;visibility: hidden;"></div>
                    <div class="shop-item" style="height: 0px;visibility: hidden;"></div>