如何在奇数行和偶数行之间交替孩子的数量？

Question

我搜索了它，但是使用 CSS flexbox，当我想显示奇数行的 3 个项目和偶数行的 2 个项目时出现问题。

我的想法是这样的：

我尝试使用某种nth-child选择器，但这不是完整的解决方案。

Answer 1

nth-child(5n) 将是您需要从重复模式开始的内容，添加的 n\xc3\xa9gative 值可以使其在前五个元素之前开始，因此您可以将其调整为连续三个元素。

\n

可能的例子：

\n

\n
• 柔性
\n

\n

\r\n

\r\n

body {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1em;\n}\n\ndiv {\n  flex-grow: 1;\n  min-width: 30%;\n  /*extra  whatever */\n  background: #05709C;\n  height: 15vh;\n  border-radius: 0.5em;\n}\n/* make it start earlier */\ndiv:nth-child(5n - 11),\ndiv:nth-child(5n - 10) {\n  min-width: 40%;\n}

\r\n

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

\r\n

\r\n

\r\n

\n

\n
• 网格（需要将其分成 6 列）
\n

\n

\r\n

\r\n

body {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 1em;\n}\n\ndiv {\n  grid-column: auto / span 2;\n  /*extra  whatever */\n  background: #05709C;\n  height: 15vh;\n  border-radius: 0.5em;\n}\n\n\n/* make it start earlier */\n\ndiv:nth-child(5n - 11),\ndiv:nth-child(5n - 10) {\n  grid-column: auto / span 3;\n}

\r\n

<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>

\r\n

\r\n

\r\n

\n

另一个使用 grid 和 nth-child 的示例用于另一个重复模式：CSS Grid - 可重复的 grid-template-areas

\n