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

要生成的效果图如下：

解决办法

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);}

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

CSS 之 Flex布局
CSS 之 Flex布局文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
CSS的Flex布局的学习
CSS的Flex布局的学习哔哩哔哩链接:https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒.伸缩盒)是CSS中的又一种布局手段,它主 ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
css使用flex布局实现骰子1~6
css使用flex布局实现骰子1~6 效果 Html <body><div class='div1 border'><span></span></ ...
弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
css中的换行符_如何使用CSS防止项目列表中的换行符？
css中的换行符 Introduction: 介绍: Dealing with various items in CSS sometimes pose very different problems. ...
CSS(二)——Flex布局边框渐变过渡动画
学习CSS第二周的总结一. Flex布局容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位 ...

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

要生成的效果图如下：

解决办法

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

最新文章

热门文章