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 相关文章推荐
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
vue组件实例解析
Jan 10 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 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
相对路径转化成绝对路径
2007/04/10 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
python引用DLL文件的方法
2015/05/11 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年酒店工作总结
2015/04/28 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL