vue flex 布局实现div均分自动换行的示例代码


Posted in Javascript onAugust 05, 2020

    许久没有更新了,今天才意外发现以前还是没有看懂盒模型,今天才算看懂了,首先我们今天来看一下想要实现的效果是什么?当然适配是必须的,1920 或者 1376都测试过。效果如图所选中区域所示:

vue flex 布局实现div均分自动换行的示例代码

 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客,我们主要用到flex布局的一个换行属性,它是flex-wrap: wrap,自动换行。

vue flex 布局实现div均分自动换行的示例代码

二、vue代码

(1)html部分:

<div class="home-card">
   <div class="home-item" v-for="n in 7" :key="n">
    <img class="home-img" :src="require('_img/icon.png')" alt="">
    <div class="home-right">
     <span style="color: #999; fontSize: 12px">当周流入总计</span>
     <span class='home-num' >124,345</span>
     <span><i class="el-icon-caret-bottom" style="color: red; fontSize: 12px" ></i> <i style="color: red"> -10%</i>   <span style="color: #999; fontSize: 12px">同比上月</span></span>
    </div>
   </div>
  </div>

(2)css部分

.home-card {
  width 100%
  overflow hidden
  padding 10px 0px
  display flex
  flex-wrap: wrap
  .home-item {
   border-style solid
   border-width: 1px
   border-color: #E4E4E4
   width calc(25% - 30px)
   padding 20px 0px 20px 20px
   margin-right 10px
   margin-bottom 10px
   display flex
   align-items center
   background #fff
   &:nth-child(4) {
    margin-right 0
   }
   .home-img {
    display inline-block
    width 60px
    height 60px
    margin 0
    padding 0
   }
   .home-right {
    display flex
    flex-direction column
    justify-content center
    align-items flex-start
    margin-left 10px
    .home-num {
     font-size 40px
     margin 5px 0
    }
   }
  }
 }

要想每一个div刚好能自动填充适配,最关键的就是css样式里面的宽度计算:也就是width: calc(25%  -  30px),因为最大宽度是100%,每一个平分下来是25%,剩下的这么算呢?看图

vue flex 布局实现div均分自动换行的示例代码

 每一个home-item共占用32px,去掉10px,每个平分2.5px,也就是home-item占用32-2.5=29.5px,算30px,这样就实现宽度自动填充实现适配了。哈哈

到此这篇关于vue flex 布局实现div均分自动换行的文章就介绍到这了,更多相关vue div均分自动换行内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中的布尔运算符使用介绍
Nov 20 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
ionic实现底部分享功能
May 11 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
老生常谈js数据类型
Aug 03 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python中的包和模块实例
2014/11/22 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python日志器使用方法及原理解析
2020/09/27 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
求职简历的自我评价
2014/01/31 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
网站推广策划方案
2014/06/04 职场文书
老干部工作先进事迹
2014/08/17 职场文书
体检通知范文
2015/04/21 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Python中相见恨晚的技巧
2021/04/13 Python