最近有個面試，面試官問到，在一個橫向布局上，假設有三個div，每個寬度為定寬apx，如果想使兩側寬度為x,中間div間間隔為2x。x可以自適應。如下圖：
怎么做很簡單，兩行代碼就搞定：
space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。如一圖。
說到這其實都是廢話，這些都是flex布局初始學習就會接觸到的。主要是這個面試官又問，如果中間不是2x，是x呢，也就是每個間隙與兩側的間隔相同。也就是這樣：
這個問題我一開始想的是兩側設置padding，中間用justify-content: space-between;可是這樣在不同的屏幕上看到的兩側padding值肯定是不同的，所以中間的間隙與兩側就不想等了。。。所以最后我也沒想出來。回來之后發現justify-content居然還有space-evenly這么個屬性！這個屬性干嘛用的不言而喻。均勻排列每個元素，每個元素之間的間隔相等。上題就解決了。但是space-evenly的兼容性比起常用的justify-content值來說還是要差不少。
我們不能只滿足與解決一道面試題，再實際情況下可能會有很多奇葩的情況，比如說上圖4個x改成3個x，一個2x（雖然我是從來沒見過這種奇葩的設計。。）那又該怎么辦呢？
這里我想到了css3的cacl()，這玩意兒百分比，px值混搭都能計算，強的一批。比如實現上面的要求：
也一樣可以達到效果。（假設a的值為100px）而且不管是什么情況都可以計算出你想要的大小，簡直不要太爽。
可是，cacl()雖然兼容性比起space-evenly要好一點。如下圖：
我們還是看到Android Browser還是只有部分支持。所以cacl()在移動端還是要慎用。
最后還請大佬有什么即可以達到目的又有很好兼容性的辦法還望不吝賜教。嘿嘿。