如何在奇数行和偶数行之间交替使用子数？ [英] How can I alternate the number of children between odd and even rows?

问题描述

我搜索了一下，但使用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

这篇关于如何在奇数行和偶数行之间交替使用子数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！