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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
微信小程序实现上传照片代码实例解析
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
PHP4.04简明安装
2006/10/09 PHP
分享PHP入门的学习方法
2007/01/02 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
YII实现分页的方法
2014/07/09 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript this用法小结
2008/12/19 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
jQuery操作css样式
2017/05/15 jQuery
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python对视频画框标记后保存的方法
2018/12/07 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
护理学毕业生自荐信
2013/10/02 职场文书
小学毕业寄语大全
2014/04/03 职场文书
探亲假请假条
2014/04/11 职场文书
诚信承诺书模板
2014/05/26 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书