-webkit-box-flex 属性组件长/宽偏差

背景：有四个表格，按照田字排列，长宽五五开。同时，有两个表格可能会随着配置项不显示，这个时候，旁边的表格就要填满不显示的表格所在的空白，所以表格的长或宽就要自适应了，就要用到**-webkit-box-flex**属性了。如图。

1、2、3、4四个表格，按需求应该是等高的。实际1、3等宽，比2、4要稍宽，这个是需要，暂且不管。
问题是，2、4等高，但1比3高几个像素。本来几个像素区别不大，但是旁边2、4等宽，一眼就看出参差不齐

这几个表格是这么布局的。在总div里横向排序两个div,两个div不等宽，这两个div内部分别纵向排序，即1、3纵向排序，2、4纵向排序。
表格1内部有内容，所以1和3在写法上是等高的，但是实际有几个像素的出入。
css代码

.spLeftContentTopRight{height: 100%;width: calc(67% - 10px);float: left;display: -webkit-box;-webkit-box-orient: horizontal;.spLeftContentTopRightLeft{  width: calc(50% + 20px);height: 100%;display: -webkit-box;-webkit-box-orient: vertical;.childGrid{//1,3表格-webkit-box-flex: 2;//各个元素比例//-webkit-box-flex值相同时，有内容的一边会更大一点，//加个属性height(纵向排列时)/width(横向排列时)，随便给个值，两个部分就会一样长/宽// height:1px;margin-top: 10px;}}.spLeftContentTopRightRight{width: calc(50% - 30px);height: 100%;display: -webkit-box;margin-left: 10px;-webkit-box-orient: vertical;.childGrid{//2,4表格-webkit-box-flex: 2;//各个元素比例margin-top: 10px;}}
}

在网上找到了原因，也解决了¹。但是还是有点不能理解，先记录着吧
原因：表格1内有内容，所以撑开了表格，多几个像素。
解决方法：给个高度height属性，随便给个值就行。（不太能理解）

注意：如果是纵向排列，那么就给高度，因为父div设置的自适应的方向是纵向；如果是横向排列，那么就设置width。

特别鸣谢：网友Lieber-l

参考博客：https://www.cnblogs.com/lbcheng/p/6044373.html ↩︎

-webkit-box-flex 属性组件长/宽偏差相关推荐

【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性复用像素格式 | 图像绘制 )
文章目录一.获取图像真实宽高二.计算解码区域三.设置解码参数内存复用像素格式四.图像绘制五.执行效果六.源码及资源下载官方文档 API : BitmapRegionDecoder 在 ...
java设计一个立方体类box_实例1: 设计一个立方体类Box,定义三个属性,分别是长,宽,高。定义二个方法,分别计算并输出立方体的体积和表面积。_学小易找答案...
[填空题]表达式 list(filter(lambda x:x>2, [0,1,2,3,0,0])) 的值为 _________ . [填空题]表达式 len(' 中国 '.encode('ut ...
走近Flex组件系列(四)：分组组件(Box)、分割组件(DividedBox)和容器组件(Panel)
本文主要介绍Flex的Box,DividedBox和Panel组件的应用. 一.分组组件(Box) Flex中Box组件分两种,即VBox和HBox,也就是水平分组布局和垂直分组布局.下面对这两中分别 ...
vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
场景 1.vant框架上传组件-上传身份证两面图片需求并且压缩图片质量,非压缩长宽--商城项目 2.压缩图片质量大小-- 3.压缩逻辑因为是正反两面单独压缩执行,所以我这里使用 Promise.all ...
声明一个长方形类，属性有长和宽；操作有赋值、计算长方形的周长和面积、输出信息等，要求定义构造函数（缺省值为10）和析构函数。
题目描述:声明一个长方形类,属性有长和宽:操作有赋值.计算长方形的周长和面积.输出信息等,要求定义构造函数(缺省值为10)和析构函数. 析构函数的作用:对象消亡时,自动被调用,用来释放对象占用的空间. ...
java定义一个长方形类，该类中具有长方形长宽两种属性，并具有相应的构造方法属性访问方法，计算长方形的周长和面积的方法，要求输出长是5，宽是4的长方形
定义一个长方形类,该类中具有长方形长宽两种属性,并具有相应的构造方法属性访问方法,计算长方形的周长和面积的方法,要求输出长是5,宽是4的长方形 public class test3 {public ...
Java获取图片属性（长，宽，大小，类型。。）/ EXIF
获取图片属性(长,宽,大小,类型..)/ EXIF 注:在遇到大的图片或者并发操作时,第一种方法可能会造成内存泄漏,cpu飙高等问题,建议使用第二种: 1.通过java自带的流操作: @Testpub ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
文章目录一.GestureDetector 创建与设置二.GestureDetector 触摸事件传递三.触摸滑动操作四.惯性滑动操作五.长图滑动组件代码示例六.运行效果七.源码及资源下 ...

-webkit-box-flex 属性组件长/宽偏差

-webkit-box-flex 属性组件长/宽偏差相关推荐

最新文章

热门文章

-webkit-box-flex 属性 组件长/宽偏差

-webkit-box-flex 属性 组件长/宽偏差相关推荐

最新文章

热门文章

-webkit-box-flex 属性组件长/宽偏差

-webkit-box-flex 属性组件长/宽偏差相关推荐