第nth-flex-row第一项的CSS选择器。

问题描述 投票：0回答：1

我想为每个flex行的第一项设置不同的左负边距，以创建这种砖块层效果。

enter image description here

有没有一个css选择器可以选择特定flex行的第一项？

这是我的出发点代码，但会考虑其他的CSS解决方案，让砖块效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-content:flex-start;
  height:100vh;
  width:100vw;
}
.item {
  background:pink;
  display:inline-block;
  width:200px;
  height:30px;
  margin:10px;
}
</style>
  <script>
    document.addEventListener('DOMContentLoaded',_=>{
    for(var c=0; c<100; c++)
      document.querySelector('body').innerHTML+='<span class="item">'+c+'</span>';
    });
  </script>
  </head>
  <body>
  </body>
</html>
css flexbox
1个回答
2
投票

如果你省略了flexbox的用法，你可以尝试一下用 shape-outside 和浮动。

document.addEventListener('DOMContentLoaded', _ => {
  for (var c = 0; c < 100; c++)
    document.querySelector('body').innerHTML += '<span class="item">' + c + '</span>';
});
body {
  height: 100vh;
}
body:before {
  content:"";
  float:left;
  height:100%;
  min-height:600px;
  width:200px;
  shape-outside:linear-gradient(to bottom right,#fff 50%,transparent 0);
  /* to illustrate */
  background:linear-gradient(to bottom right,red 50%,transparent 0);
}

.item {
  background: pink;
  display: inline-block;
  width: 80px;
  height: 30px;
  margin: 10px;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.