flex布局技巧？

最近有個面試，面試官問到，在一個橫向布局上，假設有三個div，每個寬度為定寬apx，如果想使兩側寬度為x,中間div間間隔為2x。x可以自適應。

? 怎么做很簡單，兩行代碼就搞定：

?

justify-content 常用屬性有：flex-start | flex-end | center | space-between | space-around

前三個就是字面意思，向行起始位置對齊，向行結束位置對齊，向行中間位置對齊。

后兩個中，space-between ：元素會平均地分布在行里。如果最左邊的剩余空間是負數，或該行只有一個子元素，則該值等效于'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。大白話就是會把第一個元素的位置與行起始位置對其，最后一個元素與行結束位置對其，中間的剩余空間平均分布。

?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）而且不管是什么情況都可以計算出你想要的大小，簡直不要太爽。