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

news/2024/7/3 8:49:16 标签: css, css3, html5

要生成的效果图如下:

 解决办法

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

css"> 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;来抵消。

css">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 ;

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


http://www.niftyadmin.cn/n/1595517.html

相关文章

设置日志服务器的过程

准备实验环境:两台虚拟机:第一台服务器A(IP地址为1.1.1.1/24),用于集中保存日志记录。第二台客户机B (IP地址为1.1.1.2/24)中crond服务产生的日志记录,统一保存到服务器A中的“/var/log/cron”文…

【转】input标签获取焦点时文本框内提示信息清空

作用是,一个文本框,需要输入内容,在没有输入的时候里面有一段提示内容,当点击这个文本框输入的时候,文本框内的内容自动消失。挺简单的一个功能,但是没有想到实现起来还是很麻烦的,在网上找了一…

公共基础复习总结(不断更新中...)

一、数学 1、向量代数的考点 (1)向量的数量积和向量积及其乘法规律;(2)两向量,或者三向量平行/垂直/共面的条件。转载于:https://www.cnblogs.com/xiaqs/archive/2013/03/17/2964557.html

yum仓库的使用

yum的目的是为了解决RPM依赖关系的问题,方便使用者进行软件的安装、升级等工作。RHEL5中默认提供了对YUM的支持。yum的基本工作流程:服务器端:在服务器上面存放了所有的RPM软件包,然后通过命令分析每个RPM文件的依赖性&#xff0c…

CSS实现省略号

省略号作用 在制作网页的时候,经常会遇到文字内容太多超出部分省略的情况。例如: 我们可以把这个类设置在公共样式里,需要的时候随时调用。 实现方法 .omit {width: 185px;/* 省略号的设置 前提:文本父级要有宽度 */white-spa…

Java Jdbc减少与Oracle之间交互提升批量处理性能,到底该如何优化才好?

不拾掇Java有好几年了(N>3吧),之所以写这篇文章其实是纯粹是为了给开发人员一些好的使用jdbc真正去减少交互和提升批量处理batch update性能的例子; 如果你是DBA,那么工作之余你可以把这篇文章推荐给开发看一下, 也许这些例子…

JS基础(二)

程序三大流程控制语句 顺序结构 从上往下执行 分支结构 根据条件选择执行 循环结构 某段代码重复执行 分支语句 if分支语句 单分支 语法: if(条件) {满足条件要执行的代码 }当条件为true,代码会执行若条件结果不是布尔…

移动适配-rem

rem 认识 优点: 可以适应不同大小的屏幕 使用px或者百分比布局不能实现: px单位时绝对单位百分比布局是宽度自适应,高度固定的 rem使用 rem使用时需要配合: 媒体查询flexible.js(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字…