位置: 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)

  • idea背景怎么改为白色(idea 改背景)

    idea背景怎么改为白色(idea 改背景)

  • 华为Mate10pro投屏教程(华为mate 10 pro怎么投屏)

    华为Mate10pro投屏教程(华为mate 10 pro怎么投屏)

  • 红米k30pro是双扬声器吗(小米k30pro双扬声器吗)

    红米k30pro是双扬声器吗(小米k30pro双扬声器吗)

  • 打印被挂起如何解决(打印被挂起来怎么解决)

    打印被挂起如何解决(打印被挂起来怎么解决)

  • 电脑钉钉怎么静音(电脑钉钉怎么静音老师的视频会议)

    电脑钉钉怎么静音(电脑钉钉怎么静音老师的视频会议)

  • 苹果官网买手机几天到(苹果官网买手机在哪里买)

    苹果官网买手机几天到(苹果官网买手机在哪里买)

  • 苹果手机怎么录音(苹果手机怎么录频屏)

    苹果手机怎么录音(苹果手机怎么录频屏)

  • 抖音里可能认识的人是什么意思(抖音里可能认识的人是怎么推荐的)

    抖音里可能认识的人是什么意思(抖音里可能认识的人是怎么推荐的)

  • 手机本来不卡突然变卡(手机本来不卡突然变卡还闪退)

    手机本来不卡突然变卡(手机本来不卡突然变卡还闪退)

  • atapi cdrom什么意思(cdrom什么意思啊)

    atapi cdrom什么意思(cdrom什么意思啊)

  • qq等级51级是什么图标(qq五十一级是多少)

    qq等级51级是什么图标(qq五十一级是多少)

  • 拼多多拼单成功商品下架还给发货吗(拼多多拼单成功后退款另一方怎么办)

    拼多多拼单成功商品下架还给发货吗(拼多多拼单成功后退款另一方怎么办)

  • 抖音橱窗里的已售是月销量吗(抖音橱窗里的已售是什么意思)

    抖音橱窗里的已售是月销量吗(抖音橱窗里的已售是什么意思)

  • 华为mate30悬浮球怎么锁屏(华为mate30悬浮球怎么打开)

    华为mate30悬浮球怎么锁屏(华为mate30悬浮球怎么打开)

  • 注册辅助验证是什么意思(注册辅助验证是什么意思华为的)

    注册辅助验证是什么意思(注册辅助验证是什么意思华为的)

  • 超话屏蔽会自动解除吗(超话屏蔽会自动取关吗)

    超话屏蔽会自动解除吗(超话屏蔽会自动取关吗)

  • 云打印怎么用(云打印怎么用微信打印)

    云打印怎么用(云打印怎么用微信打印)

  • 美团怎么设置限购2份(美团怎么设限购)

    美团怎么设置限购2份(美团怎么设限购)

  • 乐橙监控连接手机步骤(乐橙监控连接手机步骤多人共享)

    乐橙监控连接手机步骤(乐橙监控连接手机步骤多人共享)

  • 微信7.0怎么看别人的时刻视频(微信8.0怎么看别人)

    微信7.0怎么看别人的时刻视频(微信8.0怎么看别人)

  • 超级课程表ios下载不了(超级课程表ios下载安装)

    超级课程表ios下载不了(超级课程表ios下载安装)

  • 抖音要到多少粉丝才可以直播(抖音到多少粉丝发视频可以赚钱)

    抖音要到多少粉丝才可以直播(抖音到多少粉丝发视频可以赚钱)

  • 母婴社区app开发如何运营(母婴社交app)

    母婴社区app开发如何运营(母婴社交app)

  • Mac系统不能升级Windows XP SP3提示磁盘空间不足(mac怎么不能升级系统)

    Mac系统不能升级Windows XP SP3提示磁盘空间不足(mac怎么不能升级系统)

  • NVM 基本使用(nvm for windows)

    NVM 基本使用(nvm for windows)

  • 存货售出后是否含税
  • 定期定额的个税起征点
  • 退货折价的账务处理分录
  • 企业所得税可以不交吗
  • 遗失的发票可以补开吗
  • 企业发票专用章使用涉及的审批流程
  • 企业租给企业房产税税率
  • 可供出售资产减值损失
  • 长期挂账应收账款怎么调
  • 预付房租租金如何做账
  • 固定资产认证进项在勾选平台勾吗
  • 企业资产净资产
  • 补提以前年度个税会计分录
  • 一般代开增值税多少个点?
  • 冬虫夏草开票什么税率
  • 负利润需要交所得税吗
  • 小规模纳税人当月超过500万的部分怎么申报
  • 商标转让增值税税目
  • 政府收取的工程物资
  • 调整以前年度应交税费分录
  • 工会经费怎么做账务处理
  • 长期包租收入如何进行会计处理
  • 物业公司收的预存水费不够抵减怎么交税
  • 机械租赁有什么机械
  • 小型微利企业应纳税所得额300万
  • 防伪税控发票维修流程
  • 药店 医保收入占比
  • 阻止系统蓝屏后怎么恢复
  • mac电脑怎么转移到另一个电脑
  • 本月计提下月冲回
  • 进口货物可以退回吗
  • 对外贸易法律的特征包括
  • 营改增餐饮行业纳税规则
  • 开机自动连接宽带怎么设置w11
  • neotrace.exe - neotrace是什么进程 有什么用
  • windows server 2016 配置web网页
  • 支付押金无法付款
  • 冬日里的科赫尔湖,德国巴伐利亚州 (© Reinhard Schmid/eStock Photo)
  • 麦地那老城
  • conda配置虚拟环境
  • 微信小程序实训内容
  • ci框架过时了吗
  • ecshop功能
  • 企业会计日志
  • 收回投资收到的现金减少
  • 自然人扣缴系统怎么申报个税
  • 银行主账户和子账户能独立使用吗
  • 全资子公司注销的账务处理
  • 高铁票丢失了可以补打吗
  • 有哪些情况可以用别人的id
  • 暂估回冲方式
  • 企业运费如何开票
  • 运费发票抵扣要求
  • 承租人转租房屋的后果
  • 劳务公司核定征收怎么交税的
  • 建设工程项目设计阶段的投资控制方法有哪些
  • 营销策划服务费属于什么服务
  • 收到党支部经费如何做账
  • 施工图审查费计算公式
  • 净资产=资产-负债
  • mybatis特殊字符查询出来编码了
  • workbench如何运行
  • sql数据库检查命令
  • win7系统开机蓝屏0x0000007b
  • 如何更改win8开始菜单
  • win8怎么关电脑
  • netsurf.exe - netsurf是什么进程 有什么用
  • w10系统怎么压缩
  • win10系统如何创建新用户
  • 单线程语言有哪些
  • unity单选
  • 下面有关js中call和apply的描述,错误的是
  • dota2 服务器ip地址
  • Android -- service两种启动方式startService与bindService
  • jQuery+Ajax实现无刷新操作
  • android开源库
  • unity 几种触发事件
  • 普票怎么入账标识
  • 增值税号和增值税账号的区别
  • 如何落实请示汇报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设