当前位置：文江博客话题详情

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

发布于 2022-09-13 00:31:27 字数 75 浏览 14 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻的味道 2022-09-20 00:31:27

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

如果你一行的数量是固定的，那么可以用用 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 的效果了。

回复收藏 0

如若梦似彩虹 2022-09-20 00:31:27

.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>