问题描述
我搜索了一下,但使用css Flexbox时,当我想要显示奇数行的3项和偶数行的2项时,出现了问题。
我的想法是这样的:我尝试使用某种nth-child
选择器,但这不是完整的解决方案。
推荐答案
重复模式需要从第n个子元素(5N)开始,加上负值可以使其在前五个元素之前开始,这样您就可以将其调整为连续前三个元素。
可能的示例:
弹性 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">body {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
div {
flex-grow: 1;
min-width: 30%;
/*extra whatever */
background: #05709C;
height: 15vh;
border-radius: 0.5em;
}
/* make it start earlier */
div:nth-child(5n - 11),
div:nth-child(5n - 10) {
min-width: 40%;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
网格(需要将其拆分为6列)
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
body {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1em;
}
div {
grid-column: auto / span 2;
/*extra whatever */
background: #05709C;
height: 15vh;
border-radius: 0.5em;
}
/* make it start earlier */
div:nth-child(5n - 11),
div:nth-child(5n - 10) {
grid-column: auto / span 3;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
另一个重复模式的网格和第n个子模式的示例:CSS Grid - repeatable grid-template-areas