在 CSS 中,Flex 布局提供了一种方便的方式来创建灵活的布局。然而,在某些情况下,我们希望在一行中显示固定个数的元素,并在超过该数量后进行换行,并且将超出的元素“靠左”对齐。本文将介绍使用 Flex 布局实现这个需求的完美解决方案。
步骤一:设置容器属性
首先,在 HTML 中创建一个父容器,并为其添加一个类名,以便于我们在 CSS 中进行样式定义。例如:
<div class="container">
<!-- 子元素 -->
</div>
然后,在 CSS 中,我们需要为父容器设置 display: flex
属性,以启用 Flex 布局:
.container {
display: flex;
}
步骤二:设置子元素属性
接下来,我们需要为子元素设置属性来实现我们的需求。首先,我们需要设置子元素的宽度为固定百分比,以便平均分布在一行中。同时,我们设置子元素的 flex-grow: 1
属性,以确保所有子元素占据相同的剩余空间。
.container {
display: flex;
}
.container > * {
flex: 1;
}
步骤三:设置换行和对齐方式
接下来,我们需要设置子元素在超出一行时进行换行,并将超过的元素“靠左”对齐。我们可以通过添加 flex-wrap: wrap
和 justify-content: flex-start
属性来实现。
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.container > * {
flex: 1;
}
完整代码及效果演示
下面是完整的 CSS 代码,可以复制粘贴到 HTML 的 <style>
标签中,或者保存为一个独立的 CSS 文件并链接到 HTML 中使用:
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.container > * {
flex: 1;
}
效果演示:
[元素1] [元素2] [元素3] [元素4]
[元素5] [元素6] [元素7]
[元素8]
结论
使用上述 CSS 代码,我们可以轻松地实现在 Flex 布局下一行显示固定个数的元素,并在超出数量后进行换行,并将超出的元素“靠左”对齐的效果。
这种技术在很多应用场景中都非常有用,比如制作图片展示、商品列表等。希望本篇博客对你有所帮助!
本文来自极简博客,作者:夏日冰淇淋,转载请注明原文链接:CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其 内容丰富一些