flex布局中的几个小技巧

news2024/9/20 1:09:36

1. flex属性一定要写在父级元素的css属性,比如ul里面,不能写到li上面        

          ul{
                display:flex; // flex必须写在父元素ul里面
                justify-content:space-between;
                height:75px;
                li{
                  height:75px;
                  line-height:75px;
                  flex:1;
                  padding-left:23px;
                  a{
                    color:$colorB;
                    font-size:14px;
                    img{
                      width:42px;
                      height:35px;
                      vertical-align:middle;
                      margin-right:15px;
                    }
                  }
                }
              }

2.  当flex子元素横成一排不能换行时,在父元素设置flex-wrap: wrap即可解决问题:

 

 3. 当flex子元素行间距过小时,通过设置flex子元素的padding值,可以增大行距

这是一个非常重要的技巧

 

 

.scroll_left .scr_li .children ul li {
  height: 75px;
  line-height: 75px;
  /* 通过padding撑开商品列表的上下行距 */
  padding: 10px 5px 5px 15px;
  width: 220px; 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1006002.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

3D数字孪生:从3D数据采集到3D内容分析

数字孪生(Digital Twin)是物理对象、流程或系统的虚拟复制品,用于监控、分析和优化现实世界的对应物。 这些数字孪生在制造、工程和城市规划等领域变得越来越重要,因为它们使我们能够在现实世界中实施改变之前模拟和测试不同的场景…

Linux操作(查询日志)

目录 前言 查看日志 cat less head tail 小结 前言 之前的linux文章属于入门linux,这篇文章主要是linux在后端开发人员中对日志的的运用.对于linux基础掌握不是很好的小伙伴可以先去看看linux基础操作:Linux系统使用(超详细)_linux操作系统使用_陌上 烟雨齐的博客-CSDN博…

Leetcode152. 连续子数组的最大乘积

力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 给你一个整数数组 nums ,请你找出数组中乘积最大的非空连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积。 测试用例的答案是一个 32…

Android 系统中适配OAID获取

一、OAID概念 OAID(Open Anonymous Identification)是一种匿名身份识别标识符, 用于在移动设备上进行广告追踪和个性化广告投放。它是由中国移动通信集 团、中国电信集团和中国联通集团共同推出的一项行业标准 OAID值为一个64位的数字 二、…

【C语言】库宏offsetof

一.offsetof简介 因此,宏offsetof的作用是: 当你传入结构体的类型及其成员时,它会返回该成员在结构体中的偏移量. 二.offsetof的使用 如下,我们使用offsetof打印一下结构体foo中,成员a,成员b及成员c相对于首地址的偏移量分别是多少: #include <stdio.h> #include …

The specified module could not be found.

新电脑运行项目的时候出现了某个包找不到的问题 \\?\D:\guanwnag\cloudquery-website\node_modules\.pnpm\nxnx-win32-x64-msvc16.5.3\node_modules\nx\nx-win32-x64-msvc\nx.win32-x64-msvc.node 引入的路径就感觉有问题 去github上查找原因&#xff0c;发现是没安装 Micro…

代码随想录算法训练营day50|123.买卖股票的最佳时机III|188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 力扣题目链接 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉…

Linux系统用户密码过期_禁用过期策略

检查用户密码过期信息 使用Chage命令可以检查用户密码更改策略和过期信息。要检查特定用户的密码过期信息&#xff0c;可以使用以下命令&#xff1a; chage -l 用户禁用用户的密码过期 chage -m 0 -M 99999 -I -1 -E -1 用户这个命令将禁用该用户的密码过期。其中&#xff0…

企业性能测试成熟度

影响性能测试成熟度的5个内容项 1.性能测试流程规范 性能需求型模式-测试执行启动基本无规划&#xff0c;缺少标准流程规范&#xff0c;测试资产无法复用&#xff0c;测试结果无总结和沉淀性能常态化模式下流程规范->企业内部不同部门&#xff0c;各个团队共同制定并执行达…

Java“牵手”微店商品列表页数据采集+微店商品价格数据排序,微店API接口申请指南

微店平台创立于2011年5月&#xff0c;是北京口袋时尚科技开发的应用&#xff0c;2014年1月"微店"APP正式上线。微店已经从小微店主首选的开店工具转型为助力创业者发展兴趣、创立品牌、玩成事业的系统及基础设施。 微店商品列表数据包含商品名称、价格、销量、详情、…

Linux OpenGauss 数据库远程连接

目录 前言 1. Linux 安装 openGauss 2. Linux 安装cpolar 3. 创建openGauss主节点端口号公网地址 4. 远程连接openGauss 5. 固定连接TCP公网地址 6. 固定地址连接测试 前言 openGauss是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行。openGauss内…

centos7配置iscsi共享存储-tgtd

前言 iSCSI又称为IP-SAN&#xff0c;是一种基于因特网及SCSI-3协议下的存储技术&#xff0c;iSCSI利用了TCP/IP的port 860 和 3260 作为沟通的渠道。透过两部计算机之间利用iSCSI的协议来交换SCSI命令&#xff0c;让计算机可以透过高速的局域网集线来把SAN模拟成为本地的储存装…

MATLAB科学计算从入门到精通

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 MATLAB&#xff08;Matr…

软件测试/测试开发丨ChatGPT在测试计划中的应用策略

简介 测试计划是指描述了要进行的测试活动的范围、方法、资源和进度的文档。它主要包括测试项、被测特性、测试任务和风险控制等。 所以在使用ChatGPT输出结果之前&#xff0c;我们需要先将文档的内容框架梳理好&#xff0c;以及将内容范围划定好&#xff0c;必要的时候&…

2024年,企业知识库的趋势与前景

企业知识库是指企业内部存储和组织知识的集中化平台&#xff0c;包括文档、资料、经验、专业知识等。它的重要性在于提供了一个集中管理和共享知识的机制&#xff0c;对企业的发展和竞争力具有重大影响。 企业知识库的重要性 1. 提高工作效率和协作能力 企业知识库使得企业内…

国产触控笔哪个牌子好?适合开学季的电容笔推荐

学校的开学季节已经来临&#xff0c;伴随着科技的发展&#xff0c;新的电子产品和数码设备层出不穷。比如&#xff0c;智能手机&#xff0c;iPad平板&#xff0c;电容笔等等。但实际上&#xff0c;要想让iPad平板的性能&#xff0c;得到最大程度的提升&#xff0c;我觉得这个电…

【OpenCV • c++】图像噪音 | 椒盐噪音 | 高斯噪音

文章目录 一、什么是图像噪音二、椒盐噪声三、高斯噪声 一、什么是图像噪音 图像噪声是图像在获取或是传输过程中受到随机信号干扰&#xff0c;妨碍人们对图像理解及分析处理的信号。很多时候将图像噪声看做多维随机过程&#xff0c;因而描述噪声的方法完全可以借用随机过程的描…

C语言学习系列-->一篇带你看懂内存函数

文章目录 前言memcpy概述模拟实现 memmove概述模拟实现 memsetmemcmp总结 前言 上篇文章学习了C语言字符串函数&#xff0c;只是对字符串进行操作 本节&#xff0c;小编整理了一下C语言中的内存函数&#xff0c;对内存进行操作&#xff0c;只针对会内存块&#xff0c;不针对数据…

视频剪辑文案怎么写 视频剪辑文案用什么软件

视频剪辑文案与平面材料文案相比&#xff0c;在声音、画面的展现上自由度更高&#xff0c;视觉的丰满感也更高&#xff0c;是视听结合效果的呈现。本文会给大家介绍视频剪辑文案怎么写&#xff0c;视频剪辑文案用什么软件的相关内容&#xff0c;让大家可以在短时间内学会视频剪…

无涯教程-JavaScript - VDB函数

描述 VDB函数使用双倍余额递减法或您指定的某些其他方法返回您指定的任何期间(包括部分期间)的资产折旧。 VDB代表可变余额递减。 语法 VDB (cost, salvage, life, start_period, end_period, [factor], [no_switch])争论 Argument描述Required/OptionalCostThe initial co…