如何在奇数行和偶数行之间交替使用子数？

本文介绍了如何在奇数行和偶数行之间交替使用子数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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>