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 不能够百分百解决适配 但是无伤大雅 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/698871.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JVM 类加载器的工作原理

JVM 类加载器的工作原理 Java 虚拟机(JVM)的类加载器是 JVM 体系结构中的一个重要组件,它负责动态加载 Java 类到内存中。类加载器的工作原理涉及几个关键步骤和概念。本文将详细介绍 JVM 类加载器的工作原理。 1. 类加载器的概念 类加载器…

4-1RT-Thread信号量

4-1RT-Thread信号量 在实时系统中,一项工作往往需要多个线程共同完成。而线程对CPU的使用权由其优先级来确定。如果线程的功能是独立的,如控制LED灯周期性闪烁,那么我们只需要关注线程具体功能的实现即可。但在线程之间需要配合完成某些功能时…

家用路由器究竟有多费电?小白实测

小白最近听到了个笑话: 有个奶奶跟朋友说家里上不了网,让他去看看。朋友过去之后看到路由器被拔掉了,就问奶奶:“怎么把路由器拔掉了呀?”奶奶说:“那个东西的灯一闪一闪的,太费电,…

达内Angular学习

课程地址:1.1-环境搭建~1_哔哩哔哩_bilibili 一、环境搭建 安装前,确保node.js和npm包已经安装,并符合版本要求。 C:\Users\liutong>node -v v20.10.0C:\Users\liutong>npm -v 10.2.3 正式安装前,检查镜像是否为境内的镜像: C:\Users\liutong>npm config get…

Java MyBatis实战:QueryWrapper中的and和or拼接技巧

哈喽,大家好,我是木头左! 一、引言 在Java Web开发中,MyBatis是一个非常流行的持久层框架。它通过XML或注解的方式将Java对象与数据库表进行映射,从而实现数据的增删改查操作。在使用MyBatis的过程中,经常…

学习了解 JSON Schema

在数字时代,数据的快速增长要求开发者掌握有效的管理和验证技术。JSON(JavaScript Object Notation) 是一种流行的轻量级数据交换格式,在网络编程中有广泛应用。为了应对复杂数据的挑战,JSON Schema 诞生,提…

爱普生SMD3225贴片晶振升级版TSX-3225

爱普生有一款外形尺寸3.2*2.5mm的无源贴片晶振,型号TSX-3225,也是非常直观的能从型号分辨其封装尺寸大小的,被广泛应用于便携式的无线传输设备,同时,这也是一款非常成熟的产品,毕竟SMD3225封装是目前市场主…

功能强大的文本编辑器(绿色版)

UltraEdit 是一套功能强大的文本编辑器,可以编辑文本、十六进制、ASCII 码,完全可以取代记事本。 现在为你分享一个绿色免安装版,请在文末查看该软件的领取方法。 UltraEdit的强大功能 UltraEdit是一款功能强大的文本编辑器,广…

手把手教你安装 Vivado2019.2(附安装包)

一、Vivado 2019.2优点 Vivado 2019.2 作为 Xilinx 公司发布的一款设计套件版本,具有多个显著的优点,以下是对其优点的详细归纳: 集成度高:开发工具丰富并行综合功能灵活的许可证策略用户友好的界面强大的仿真和验证功能丰富的文…

数据结构与算法题目集(中文) 6-3 求链表的表长

该代码使用循环遍历链表来计算链表的长度。代码首先定义了一个整数变量i用于计数,并初始化为0。然后进入一个while循环,条件为链表L非空。在循环中,通过L L->Next来遍历链表中的每一个节点,并将计数变量i递增。最终返回计数变…

聚鼎科技:现在的装饰画做起来难吗

在当代,装饰画作为一种体现个人品味和审美情趣的方式,已经广泛应用于各种室内空间。不少人会产生这样的疑问:在现代化技术和材料的支持下,制作一幅装饰画是变得容易了,还是依旧充满挑战? 现代科技的确为装饰画的制作带…

LLM定制的四个层次

LLM(Large Language Models)代表了一种提高生产力的创新方法。他们能够简化各种任务,显著提高整体效率。从提示工程到Agents可以分为四个层次。 Level-1: Prompt engineering Prompt是简明的输入文本,用作查询或指令,引导语言模型产生所需输…

用函数指针求a和b中的大者

指针变量也可以指向一个函数。一个函数在编译时被分配给一个入口地址。这个函数入口地址就称为函数的指针。可以用一个指针变量指向函数,然后通过该指针变量调用此函数。 先按一般方法编写程序: 可以用一个指针变量指向max函数,然后通过该指…

PHP短链接短网址生成源码

下载地址:PHP短链接短网址生成源码 V3.0(11月14日更新) 1.更换用户中心模板 2.首页可以更换模板(暂时只有俩套) 3.增加首页背景更换 4.logo可以在后台设置 5.更换后台模板 6.优化访问统计功能 7.删除了几个没什么用的东西 8.数据表已支持全…

【Vue】项目创建目录初始化

文章目录 vue-cli 建项目调整初始化目录结构 vue-cli 建项目 1.安装脚手架 (已安装) npm i vue/cli -g2.创建项目 vue create hm-shopping选项 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint) > Manually sel…

日本麻将基本规则和基本术语以及役种讲解

基本规则 无役无法和牌 “役”是特定牌的组合,不满足任何役是无法和牌的,关于役在后面会进行深入的讲解 和牌条件 满足和牌牌型有役荣和时不能振听 和牌牌型 ABC*xAAA*yDD,一般的和牌牌型,x组顺子和y组刻子加上一组对子(xy4)AA*7,特殊的和牌牌型,是一种役,名叫…

SpringSecurity入门(四)

18、权限管理/授权 18.1、针对url配置 配置SecurityConfig package com.wanqi.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.web.bu…

面试官问:百万QPS秒杀系统该如何设计

今天就带大家体系化的梳理下,大厂级高并发的秒杀系统该如何设计。 带大家跳出程序员思维,从架构师的视角分析下,大厂级、高并发的秒杀系统该如何设计? 秒杀系统的三个问题 问题一:为什么需要秒杀系统? 简…

CVE-2023-37569(未授权任意文件上传+弱口令爆破)

靶场简介 Online Piggery Management System v1.0 - 存在未授权的文件上传漏洞,登陆界面弱口令爆破 进入靶场 猜测弱口令admin/admin,错误,进行账号密码爆破 得到账号密码 admin/password 登陆进入,找到一处文件上传位置 上传…

SpringBoot快速部署(2)—不使用docker的常规方法

一、软件下载和部署前准备 安装软件 获取软件安装包 然后上传到服务器的 /tmp 目录下。 软件:nginx、jdk、mysql 下载 X-shell 和 Xftp 注意:这个页面下载安装的才可以免费使用。家庭/学校免费 - NetSarang Website 安装jdk 1.8 tar -zxvf /tmp/jdk-…