flex布局,换行的元素上下设置间距

12 阅读1分钟

效果图

image.png

解决办法
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:8px,然后用父容器(ul)的margin-bottom: -8px;来抵消。

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