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

2022-04-02 00:00:00 css flexbox css-grid

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

相关文章