本文介绍了使用flexbox连续控制项目数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想按原样在第一行中显示4个项目,但在第二行中仅显示3个项目,然后在第三行中显示4个项目,然后在第四行中显示3个项目,依此类推...
I want to show 4 items in 1st row as it is, but only 3 in second line, and then 4 in 3rd line and 3 in 4th line and so on...
我已经通过nth-child
实现了这一目标,但是代码太多了,并且不灵活且不可扩展.
I have achieved this by nth-child
but code was too much and not flexible and expandable.
flex可以吗?还是网格?
Is it possible by flex? or grid?
* {
box-sizing: border-box;
}
.grid-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-wrapper .grid-item {
width: 25%;
text-align: center;
padding: 5px;
}
p {
background: #ddd;
padding: 15px;
}
<div class="grid-wrapper">
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
</div>
推荐答案
您只需要考虑以下一条规则:
You only need to consider one rule like below:
/*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
width: calc(100%/3);
flex-grow:0;
}
诀窍是使一个元素更大以触发换行,然后依靠flex-grow
来填充空间.
The trick is to make one element bigger to trigger the wrap then rely on flex-grow
to fill the space.
完整代码
* {
box-sizing: border-box;
}
.grid-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-wrapper .grid-item {
width: 25%;
text-align: center;
padding: 5px;
flex-grow: 1;
}
.grid-wrapper .grid-item:nth-child(7n + 5) {
width: calc(100%/3);
flex-grow:0;
}
p {
background: #ddd;
padding: 15px;
}
<div class="grid-wrapper">
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div><div class="grid-item">
<p>Grid Item</p>
</div>
</div>
这篇关于使用flexbox连续控制项目数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!