-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 属性 组件长/宽偏差的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。