淺談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）並且無論是什麼狀況均可以計算出你想要的大小，簡直不要太爽。

但是，cacl()雖然兼容性比起space-evenly要好一點。以下圖：

咱們仍是看到Android Browser仍是隻有部分支持。因此cacl()在移動端仍是要慎用。

最後還請大佬有什麼便可以達到目的又有很好兼容性的辦法還望不吝賜教。嘿嘿。