flex布局技巧？最近有個面試，面試官問到，在一個寬度布局上，打比方有三個div，每個寬度為定寬apx，如果想使兩側(cè)寬度為x,中間div間間隔為2x。x是可以自適應(yīng)。怎么做很簡單點，兩行代碼就搞定：j

flex布局技巧？

最近有個面試，面試官問到，在一個寬度布局上，打比方有三個div，每個寬度為定寬apx，如果想使兩側(cè)寬度為x,中間div間間隔為2x。x是可以自適應(yīng)。

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

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

前三個就是字面意思，向行起始位置整個表格，向行結(jié)束了位置對齊，向行中間位置對齊。

后兩個中，space-between：元素會你算算地分布在行里。如果沒有最左邊的殘余空間是負(fù)數(shù)，或瀘州銀行僅有一個子元素，則該值相位差于#39flex-start#39。在其它情況下，最先元素的邊界與行的主起始位置的邊界尺寸線，而還有一個元素的邊界與行的主結(jié)束了位置的邊距對齊，而殘余的旋動盒項目則你算算其分布，并切實保障兩兩之間的小方框空間大小關(guān)系。大白話是會把第一個元素的位置與行結(jié)束位置對其，第一個元素與行結(jié)束后位置對其，中間的剩余空間總平均分布。

space-around：彈性盒子元素會換算下來地分布特點在行里，連接導(dǎo)線記錄子元素與子元素之間間距大小的一半。如果最左邊的剩下的空間是負(fù)數(shù)，或中原銀行只有三個自由伸縮盒項目，則該值相位差于#39center#39。在其它情況下，自動收縮盒項目則來算其分布，并以保證兩兩之間的空白位置空間之和，同樣第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。

聽完這反正都是廢話，這些大都flex布局初始學(xué)習(xí)就會所接觸到的。要注意是這個面試官又問，如果中間并非2x，是x呢，也就是每個間隙與兩側(cè)的間隔不同。也這樣：

這個問題我一結(jié)束想的是兩側(cè)設(shè)置里padding，中間用justify-content:space-between可惜那樣的話在有所不同的屏幕上看見了的兩側(cè)padding值絕對是有所不同的，所以我中間的間隙與兩側(cè)就不想等了。。。所以我結(jié)果我也沒想出去。出去之后發(fā)現(xiàn)justify-content居然還有space-evenly這么說個屬性！這個屬性干嘛是用顯而易見。勻?qū)嵟帕忻總€元素，每個元素之間的間隔時間大小關(guān)系。上題就可以解決了。但space-evenly的兼容性相比于具體方法的justify-content值來說我還是要差不少。

我們又不能只滿足與能解決幾道面試題，再實際情況下可能會有很多奇葩的情況，諸如上圖4個x把它改成3個x，一個2x（雖說我是從來沒曾經(jīng)見過這種奇葩的設(shè)計。。）那又該怎么辦呢？

這里我他知道了css3的cacl()，這玩意兒百分比，px值混搭起來都能計算出，強的一批。例如基于上面的要求：

也一般可以至少效果。（打比方a的值為100px）而且反正是什么情況都是可以計算出出你打算的大小，那絕對是千萬不能太爽。

flex布局怎么讓div中的div移動？

系統(tǒng)設(shè)置div的外邊距距離，設(shè)置margin屬性。