怎么判断一个flex元素里面子元素是否换行了？

Question

怎么判断一个flex元素里面子元素是否换行了？第一行的元素margin-top:0，非第一行的元素需要加margin-top:10px;

Answer 1

没法实现判断，但是要实现你的需求，是可以的。

如果你一行的数量是固定的，那么可以用用 nth-child 比如一行展示4个，第一行 margin-top:0; 就写作 .container .item:nth-child(-n+4) { margin-top:0; } 这样，就可以把前 4 个选中进行设置。

除了这样，你还可以利用 负 margin。

.container{
  margin-top: -10px;
}

.container .item{
  margin-top: 10px;
}

这样 视觉上，第一行就没有 margin-top 的效果了。

Answer 2

.item {
    row-gap: 10px;
}

现代浏览器基本上都支持
https://www.caniuse.com/?sear...

无需做任何检测 自动在需要的地方加上间距，对应的列的间距可以用 column-gap

...
.container {
    max-width: 530px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    border: 1px solid hotpink;
}
.container .item {
   width: 90px;
   height: 90px;
   background-color: #ff4c8b;
}
...
<div class="container">
   <div class="item"></div>
</div>