背景：有四個(gè)表格，按照田字排列，長寬五五開。同時(shí)，有兩個(gè)表格可能會隨著配置項(xiàng)不顯示，這個(gè)時(shí)候，旁邊的表格就要填滿不顯示的表格所在的空白，所以表格的長或?qū)捑鸵赃m應(yīng)了，就要用到**-webkit-box-flex**屬性了。如圖。

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

這幾個(gè)表格是這么布局的。在總div里橫向排序兩個(gè)div,兩個(gè)div不等寬，這兩個(gè)div內(nèi)部分別縱向排序，即1、3縱向排序，2、4縱向排序。
表格1內(nèi)部有內(nèi)容，所以1和3在寫法上是等高的，但是實(shí)際有幾個(gè)像素的出入。
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;//各個(gè)元素比例//-webkit-box-flex值相同時(shí)，有內(nèi)容的一邊會更大一點(diǎn)，//加個(gè)屬性height(縱向排列時(shí))/width(橫向排列時(shí))，隨便給個(gè)值，兩個(gè)部分就會一樣長/寬// 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;//各個(gè)元素比例margin-top: 10px;}} }

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

注意：如果是縱向排列，那么就給高度，因?yàn)楦竏iv設(shè)置的自適應(yīng)的方向是縱向；如果是橫向排列，那么就設(shè)置width。

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

---

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

總結(jié)

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

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