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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
Seajs源码详解分析
Apr 02 Javascript
微信小程序系列之自定义顶部导航功能
May 21 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
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JsonServer安装及启动过程图解
2020/02/28 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
浅析Python数据处理
2018/05/02 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python标记语句块使用方法总结
2019/08/05 Python
python 穷举指定长度的密码例子
2020/04/02 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
园林资料员岗位职责
2013/12/30 职场文书
创意活动策划书
2014/01/15 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
MySQL通过binlog恢复数据
2021/05/27 MySQL