【CSS布局】Flex布局中元素换行设置间距问题

且陶陶

发布于 2023-04-12 15:18:58

5.4K0

发布于 2023-04-12 15:18:58

文章被收录于专栏：Triciaの小世界Triciaの小世界

要生成的效果图如下：

解决办法

1. 父元素定高的情况下，直接使用 align-content: space-between;

 ul{
            list-style: none;
            display: flex;
            height: 614px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        ul li{
            width: 234px;
            height: 300px;
            background-color: rgb(255, 2, 192);
        }

2. 父元素不定高的情况下

1）设置需要更改间距的元素（li）的margin-bottom:14px,然后用父容器（ul）的margin-bottom: -14px;来抵消。

ul{
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: -14px;
            justify-content: space-between;
            align-content: space-between;
        }
        li{
            margin-bottom: 14px;
        }
 ul li{
            display: flex;
            width: 234px;
            height: 300px;
            background-color: rgb(255, 2, 192);
        }

2）设置需要更改间距的元素（li）的margin-bottom：14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0 ;

ul{
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        li{
            margin-bottom: 14px;
        }
       li:nth-child(n+5){
            margin-top: 0;
        }
 ul li{
            display: flex;
            width: 234px;
            height: 300px;
            background-color: rgb(255, 2, 192);
        }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除

css