flex布局 space-between情况下换行出现的问题

最新推荐文章于 2025-06-16 11:58:58 发布

Hydroism

最新推荐文章于 2025-06-16 11:58:58 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： flex布局

本文链接：https://blog.youkuaiyun.com/weixin_42212558/article/details/85260270

前端专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在使用Flex布局时遇到的多行元素对齐问题，特别是在一行只显示四个card且总共有六个card的情况下，第二行出现的对齐问题。文章详细介绍了如何通过调整CSS样式，利用float布局和特定的margin设置来解决这一难题，确保布局美观且响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.zl-list-flex {
    display: flex;
    display: -o-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.zl-card {
    width: 410px;
    height: 416px;
    cursor: pointer;
    position: relative;
    margin-bottom: 70px;
}

当一行只显示4个card，总共有6个card时，第二行会出现两边对齐问题，我们需要把第二行向左对齐。综合研究，暂时没有找到flex布局下css的解决方案。最终采用加margin的float布局。

.zl-list-flex {
    margin-right: -54px;
}

.zl-card {
    width: 410px;
    height: 416px;
    float: left;
    cursor: pointer;
    position: relative;
    margin-bottom: 70px;
    margin-right: 54px;
}

每行最后一个会出现不必要的margin-right，使用选择器选择nth-child(4n)并不能很好的解决，为容器加上margin-right为负数能够解决这个问题。