vue -ant -design 卡片是布局 实现动态计算 当前的 左右间距 实现居中

是这样的一个样式 我们使用display :flex 布局的时候 我们全部剧中 

display: flex;
  align-items: center;
  justify-content: center;

如果是上述的代码来说的话 总是最后的一个也是会居中的 这样就比较丑

我们好像就没有什么好的办法了 我们这自己写的 肯定没有组件牛 如果有这样的组件 那就直接用如果没有组件呢怎么实现呢

解决方案

1.计算每个item 的宽度

2.计算 整个box 的宽度 除去 padding margin 等以后的宽度

3. 使用box 的宽度 减去所有的item加起来的宽度 以及设置的item的margin 等 

剩下的宽度就是左右margin 

给box 设置当前的margin-left 就可以了

这个是一个开发中的解决问题的思路

具体怎么做 肯定要看自己的项目业务逻辑了

这是我计算当前margin 的方法

还有就是肯定是要监听当前的视图改变的

这个不能够100% 解决这个问题 当你拖动resize 不能够百分百解决适配 但是无伤大雅 

基本上是能适配大部分的电脑屏幕和笔记本 

相关推荐

  1. 使用 Ant Design Vue 实现动态表头与数据填充

    2024-06-06 07:48:05       10 阅读
  2. Ant-Design-Vue 动态表头

    2024-06-06 07:48:05       9 阅读
  3. 什么Ant Design Vue

    2024-06-06 07:48:05       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-06 07:48:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-06 07:48:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-06 07:48:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-06 07:48:05       20 阅读

热门阅读

  1. Python环境与编辑器:探索编程世界的双翼

    2024-06-06 07:48:05       11 阅读
  2. Flink 入门案例介绍

    2024-06-06 07:48:05       6 阅读
  3. 论文阅读:Fast Neural Scene Flow

    2024-06-06 07:48:05       7 阅读
  4. Openstack学习(1)——架构

    2024-06-06 07:48:05       7 阅读
  5. 022、键管理_遍历键

    2024-06-06 07:48:05       6 阅读
  6. Pspark从hive读数据写到Pgsql数据库

    2024-06-06 07:48:05       8 阅读