位置: IT常识 - 正文

flex布局优化(两端对齐,从左至右)(flex布局实战)

编辑:rootadmin
flex布局优化(两端对齐,从左至右) 文章目录前言方式一 nth-child方式二 gap属性方式三 设置margin左右两边为负值总结前言

推荐整理分享flex布局优化(两端对齐,从左至右)(flex布局实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:flex布局教程实例篇,flex布局flex:1,flex布局使用场景,flex布局使用场景,flex布局用法,flex布局使用场景,flex布局问题,flex布局问题,内容如对您有帮助,希望把文章链接给更多的朋友!

flex布局是前端常用的布局方式之一,但在使用过程中,我们总是感觉不太方便,因为日常开发中,大多数时候,我们想要的效果是这样的

即左右两端对齐并顶满,小盒子左右间距一致,并且从左至右排布。 今天主要就来讨论,通过css,有几种方式来实现,以及它们的优缺点。

方式一 nth-child<template> <div class="main"><div class="flex-box"><div class="item-box">...</div>...</div> </div></template>.flex-box {display: flex; // 设置成为flex模式 flex-wrap: wrap; // 允许换行}.item-box {width: 22%; // 以4个一行为例,有4个子盒子,3个间距margin-right: 4%; // 3 * 4 + 4 * 22 = 100margin-bottom: 20px; // 行与行之间也要设置边距。}// 如果一行是5个就是 5 + 5n.item-box:nth-child(4 + 4n) {// 当n为0时,即表示第一行最后一个元素,不需要右外边距,否则就超出 100%了。margin-right: 0 !important;}

优点:实现了我们想要的布局方案,代码量也并不复杂,基本没有兼容性的问题。

缺点1:当遇到下面这种情况时,该设置将会失效。

<template> <div class="main"><div class="flex-box"><div class="item-box">...</div><div class="item-box" style="display:none;"></div></div> </div></template>

这是因为nth-child是按照子盒子的个数来设置的,虽然其中一部分子盒子消失了,但它的元素依然存在,个数并没有变。

flex布局优化(两端对齐,从左至右)(flex布局实战)

缺点2: 不够灵活,如果在不同屏幕分辨率下,每行个数不一样(做响应式的时候经常会遇见这种情况),需要在不同分辨率下,多写一套样式代码。

@media screen and (max-width: 991px) { .flex-box {display: flex; // 设置成为flex模式 flex-wrap: wrap; // 允许换行}.item-box {width: 48%; // 以2个一行为例,有2个子盒子,1个间距margin-right: 4%; // 1 * 4 + 2 * 48 = 100margin-bottom: 20px; // 行与行之间也要设置边距。}// 如果一行是2个就是 2 + 2n.item-box:nth-child(2 + 2n) {// 当n为0时,即表示第一行最后一个元素,不需要右外边距,否则就超出 100%了。margin-right: 0 !important;} }方式二 gap属性.flex-box {display: flex; // 设置成为flex模式 flex-wrap: wrap; // 允许换行 gap: 4%; // 设置间距为4%}.item-box {width: 22%; // 以4个一行为例,有4个子盒子,3个间距 margin-bottom: 20px; // 行与行之间也要设置边距。}

优点: 显而易见,这种方式的代码量更少,更方便,并且不存在方式一的缺点1,即display:none;不会造成影响。

缺点1:gap目前还是一个很新的属性,对浏览器的兼容性并不高,尤其是不兼容ie11,如果项目对浏览器没有兼容性要求,可以使用gap,当然也可以换一种布局方式,display:grid;

缺点2:当然这种方式也需要对不同分辨率的设配,额外多写一套代码,但相对来说,也轻松许多。

方式三 设置margin左右两边为负值.flex-box {display: flex; // 设置成为flex模式 flex-wrap: wrap; // 允许换行 margin: 0 -2% 0 -2% // 间距为4%}.item-box {width: 21%; // 以4个一行为例,有4个子盒子,4个间距 4 * 21 + 4 * 4 = 100 margin: 0 2% 20px 2%; // 左右两边各2%,所以间距为4%}

优点:兼容性很好,能够兼容ie11,并且不存在display:none;时的问题。 缺点1:代码略微有些复杂,需要合理安排盒子宽度和间距的宽度,与前面的两种方式不同间距数量和盒子数量一致。需要分别设置左边距和右边距。

缺点2:需要对不同分辨率的设配,额外多写一套代码。

总结

三种方式中,第二种方式最简单,但兼容性有限;第一种方式代码量不少,兼容性适中,而且display:none;的问题严重,最后一种方式,最推荐,虽然有一些计算,并且也要合理分配宽度,但其兼容性最好,基本没啥场景不能适用,正所谓一招鲜,吃遍天。

至于缺点2,面对不同分辨率,每行数量会变化的问题,目前没有特别好的解决方案,都需要额外一套样式代码才能解决。

当然,你可以通过使用scss或者less,弄一个for循环,从一行2个到 10个 进行样式的封装,这样使用的时候,直接使用类名即可,比如 flex-row-6,flex-row-4等。

@for $i from 2 through 10 { .flex-row-#{$i} { display: flex; flex-wrap: wrap; .item { width: calc(96% / #{$i}) !important; margin-right: calc(4% / #{$i - 1}) !important; margin-bottom: 20px; } .item:nth-child(#{$i}n + #{$i}) { margin-right: 0 !important; } }}
本文链接地址:https://www.jiuchutong.com/zhishi/296133.html 转载请保留说明!

上一篇:山东项目系统慢问题分析和解决(山东省项目)

下一篇:Python 高性能 web 框架 - FastApi 全面指南(Python 高性能 pdf)

  • 抖音放映厅怎么开通(抖音放映厅怎么搜索电影)

    抖音放映厅怎么开通(抖音放映厅怎么搜索电影)

  • 锂电池不用能放10年(锂电池不用能放屋里吗)

    锂电池不用能放10年(锂电池不用能放屋里吗)

  • 二手苹果无面容什么意思(二手苹果无面容能买吗)

    二手苹果无面容什么意思(二手苹果无面容能买吗)

  • 键盘按一个字a出现2个(键盘按一个字母出来好几个)

    键盘按一个字a出现2个(键盘按一个字母出来好几个)

  • iPhone11和XS谁好(iphone11和xs到底买哪个)

    iPhone11和XS谁好(iphone11和xs到底买哪个)

  • 小米10背面是玻璃吗(小米10背面是玻璃材质吗)

    小米10背面是玻璃吗(小米10背面是玻璃材质吗)

  • 2.0ah是多少毫安(2.0ah是多少毫安电池比手机电池大吗)

    2.0ah是多少毫安(2.0ah是多少毫安电池比手机电池大吗)

  • cad算面积的命令是什么(cad算面积的命令是多少)

    cad算面积的命令是什么(cad算面积的命令是多少)

  • 华为荣耀9x是不是5g手机(华为荣耀9x是不是防水的)

    华为荣耀9x是不是5g手机(华为荣耀9x是不是防水的)

  • 什么软件可以查看wifi有多少人连接(什么软件可以查开宾馆记录)

    什么软件可以查看wifi有多少人连接(什么软件可以查开宾馆记录)

  • 华为nova6指示灯在哪(华为nova的指示灯为什么不亮)

    华为nova6指示灯在哪(华为nova的指示灯为什么不亮)

  • 华为p30自带贴膜有两层吗(华为p30新机自带膜)

    华为p30自带贴膜有两层吗(华为p30新机自带膜)

  • 华为手机视频怎么导出来(华为手机视频怎么设置动态壁纸)

    华为手机视频怎么导出来(华为手机视频怎么设置动态壁纸)

  • 手机刷机照片怎么找回来(手机刷机照片怎样保存)

    手机刷机照片怎么找回来(手机刷机照片怎样保存)

  • 怎么把视频做成锁屏壁纸(怎么把视频做成表情包)

    怎么把视频做成锁屏壁纸(怎么把视频做成表情包)

  • 抖音怎么撤销实名认证(抖音撤销实名认证要多久)

    抖音怎么撤销实名认证(抖音撤销实名认证要多久)

  • 微信清空后找不到群聊(微信清空后找不到群怎么办)

    微信清空后找不到群聊(微信清空后找不到群怎么办)

  • 荣耀9x出厂带钢化膜吗(荣耀9x原机是钢化膜吗)

    荣耀9x出厂带钢化膜吗(荣耀9x原机是钢化膜吗)

  • freebuds左耳没声音(free buds lite 左耳机无声)

    freebuds左耳没声音(free buds lite 左耳机无声)

  • bilibili怎样投屏(哔哩哔哩怎样投屏)

    bilibili怎样投屏(哔哩哔哩怎样投屏)

  • 华为p30相册在哪里(华为p30相册在哪个文件夹)

    华为p30相册在哪里(华为p30相册在哪个文件夹)

  • 什么叫原生开发(原生开发小程序 什么意思)

    什么叫原生开发(原生开发小程序 什么意思)

  • 相机热靴盖有必要盖么(相机热靴盖怎么取下来)

    相机热靴盖有必要盖么(相机热靴盖怎么取下来)

  • 怎样破解wifi密码?如何破解无线路由器(怎样破解wifi密码怎么办)

    怎样破解wifi密码?如何破解无线路由器(怎样破解wifi密码怎么办)

  • iPhone6手机自带P图软件怎么用?(苹果6plus自带软件有哪些)

    iPhone6手机自带P图软件怎么用?(苹果6plus自带软件有哪些)

  • 小规模入账的收入分录
  • 非流动资产处置损失包括哪些
  • 企业增资认缴是什么意思
  • 不按出资比例取得分红怎么纳税?
  • 小规模纳税人发票图片
  • 工业企业的三个阶段
  • 经济纠纷引发的刑事案件
  • 发给职工的福利要交个税吗
  • 计提劳务成本月末需要结转吗
  • 神州优车开具的客运服务费入什么科目?
  • 企业注销合适还是转让出去合适
  • 代扣工资申请怎么写
  • 以旧换新要按商品价格吗
  • 税务申报零申报怎么操作
  • 什么情况下可以收取现金
  • 我们公司春节发工资英文
  • 增值税开票金额在哪里看
  • 记账凭证应交税费应交增值税怎么写
  • 计提附加税的会计分录怎么写
  • 银行年费计入管理费用还是财务费用
  • 核定征收的企业利润怎么处理
  • 关联方利息支出
  • 简述国内采购流程
  • 启用或关闭windows功能怎么勾选
  • 硬盘的日常维护需要做到什么?
  • 会计分录是怎么样的
  • 股份公司注销流程及费用
  • 出纳日记账填写样本
  • 简单才能极致
  • 营改增建筑业税率是多少
  • 转出未交增值税借方余额表示什么
  • 招标场地费怎么收
  • PHP:Memcached::touchByKey()的用法_Memcached类
  • 应交所得税和所得税费用的区别计算公式
  • vue的iframe
  • php图片链接
  • 在产品定额工时怎么算
  • 接受捐赠的增值税要交企业所得税吗
  • 时点数和时期数 订单量 库存量点击量
  • 手机话费怎么打发票
  • 职工探亲如何报差旅费
  • mybatis入门菜鸟教程
  • 个税全员全额扣除怎么算
  • 公司保障措施
  • sql数据库降低版本
  • 准则规定的内容是
  • sql server2012使用方法
  • 不同企业可以开专票吗
  • 代缴社保费怎么做分录
  • 什么是金融资产和金融负债
  • 应付账款不用付情况说明
  • 房屋估价需要准备什么
  • 变更法人流程和资料
  • 公允价值变动损益和投资收益区别
  • 固定资产减值准备一经计提不得转回
  • 打印的机票行程单怎么看
  • 营业税金及附加会计分录
  • 融资手续费计入长期待摊
  • window7临时文件
  • wps2019视频
  • 安装solaris11
  • win8应用商店废了
  • centos搭建lamp环境
  • win8.1无法连接wifi
  • macbook系统怎么用
  • androidstudio手机编程软件
  • 预处理命令可以放在程序中的任何位置
  • 自定义右键属性是什么
  • JavaScript基础语法
  • python编写步骤
  • 原生js实现ajax步骤
  • python 文件操作,读,写,指定位置
  • javascript面向对象编程
  • 税务局收垃圾处置费
  • 全国退休人员有几多人
  • 浙江社保费申报说无有效三方协议信息
  • 税务稽查工作底稿属于什么证据
  • 如何查询企业是小规模还是一般
  • 宁波市开发区
  • 年休假期间工资支付标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设