背景：有四個表格，按照田字排列，長寬五五開。同時，有兩個表格可能會隨著配置項不顯示，這個時候，旁邊的表格就要填滿不顯示的表格所在的空白，所以表格的長或寬就要自適應了，就要用到**-webkit-box-flex**屬性了。如圖。

1、2、3、4四個表格，按需求應該是等高的。實際1、3等寬，比2、4要稍寬，這個是需要，暫且不管。
問題是，2、4等高，但1比3高幾個像素。本來幾個像素區(qū)別不大，但是旁邊2、4等寬，一眼就看出參差不齊

這幾個表格是這么布局的。在總div里橫向排序兩個div,兩個div不等寬，這兩個div內(nèi)部分別縱向排序，即1、3縱向排序，2、4縱向排序。
表格1內(nèi)部有內(nèi)容，所以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值相同時，有內(nèi)容的一邊會更大一點，//加個屬性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;}} }

在網(wǎng)上找到了原因，也解決了¹。但是還是有點不能理解，先記錄著吧
原因：表格1內(nèi)有內(nèi)容，所以撐開了表格，多幾個像素。
解決方法：給個高度height屬性，隨便給個值就行。（不太能理解）

注意：如果是縱向排列，那么就給高度，因為父div設置的自適應的方向是縱向；如果是橫向排列，那么就設置width。

特別鳴謝：網(wǎng)友Lieber-l

---

參考博客：https://www.cnblogs.com/lbcheng/p/6044373.html ??

總結

以上是生活随笔為你收集整理的-webkit-box-flex 属性 组件长/宽偏差的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。