flex布局技巧？最近有個(gè)面試，面試官問到，在一個(gè)縱向布局上，題中有三個(gè)div，每個(gè)寬度為定寬apx，要是想使兩側(cè)寬度為x,中間div間重合為2x。x可以不自適應(yīng)。怎摸做很簡(jiǎn)單，兩行代碼就一切都搞定：

flex布局技巧？

最近有個(gè)面試，面試官問到，在一個(gè)縱向布局上，題中有三個(gè)div，每個(gè)寬度為定寬apx，要是想使兩側(cè)寬度為x,中間div間重合為2x。x可以不自適應(yīng)。

怎摸做很簡(jiǎn)單，兩行代碼就一切都搞定：

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

前三個(gè)那是字面意思，向行起始位置整個(gè)表格，向行都結(jié)束了位置尺寸線，向行中間位置角點(diǎn)。

后兩個(gè)中，space-between：元素會(huì)來算地分布在行里。要是最左邊的殘余空間是負(fù)數(shù)，或郵儲(chǔ)銀行只有一一個(gè)子元素，則該值相位差于#39flex-start#39。在其它情況下，最后一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊，同樣最后一個(gè)元素的邊界與行的主結(jié)束了位置的邊距尺寸線，而余下的自動(dòng)收縮盒項(xiàng)目則你算算分布，并確保兩兩之間的空白位置空間之和。大白話就是會(huì)把第一個(gè)元素的位置與行結(jié)束位置對(duì)其，那一個(gè)元素與行結(jié)束了位置對(duì)其，中間的剩余空間總平均分布。

space-around：彈性盒子元素會(huì)換算下來地分布在行里，連接導(dǎo)線可以保留子元素與子元素之間間距大小的一半。要是最左邊的余下空間是負(fù)數(shù)，或該行只能三個(gè)自動(dòng)收縮盒項(xiàng)目，則該值阻抗于#39center#39。在其它情況下，自動(dòng)收縮盒項(xiàng)目則你算算分布特點(diǎn)，并必須保證兩兩之間的小方框空間大小關(guān)系，同時(shí)那個(gè)元素前的空間在內(nèi)最后一個(gè)元素后的空間為其他空白空間的一半。

說著這當(dāng)然也是廢話，這些也是flex布局初始學(xué)都會(huì)相互到的。要注意是這個(gè)面試官又問，如果不是中間也不是2x，是x呢，也就是每個(gè)間隙與兩側(cè)的間隔是一樣的。也就是這樣：

這個(gè)問題我一就開始想的是兩側(cè)可以設(shè)置padding，中間用justify-content:space-between可是這樣在差別的屏幕上看到的兩側(cè)padding值估計(jì)是完全不同的，所以中間的間隙與兩側(cè)就想等了。。。所以才后來我也沒想不出來。過來之后發(fā)現(xiàn)到j(luò)ustify-content居然還另外space-evenly這么大個(gè)屬性！這個(gè)屬性干什么專用不言自明。均勻排布每個(gè)元素，每個(gè)元素之間的不宜超過互相垂直。上題就能解決了。但space-evenly的兼容性可比廣泛的justify-content值來說那就要差不少。

我們肯定不能只不滿足與幫忙解決一道面試題，再換算情況下很可能會(huì)有很多奇葩的情況，假如上圖4個(gè)x把它改成3個(gè)x，一個(gè)2x（只不過我是向來沒見過這種奇葩的設(shè)計(jì)。。）那又該怎么辦呢？

這里我想到了css3的cacl()，這玩意兒百分比，px值混搭都能計(jì)算，強(qiáng)的一批。比如說實(shí)現(xiàn)上面的要求：

也一樣的也可以提升效果。（假設(shè)不成立a的值為100px）不過論是什么情況都可以不計(jì)算出出你要想的大小，那可真最好別太爽。

PS網(wǎng)頁設(shè)計(jì)布局有四種方式分別是?

DIVCSS和table兩種布局，DIV CSS布局運(yùn)行速度快，科學(xué)，但難學(xué)，table布局很簡(jiǎn)單，運(yùn)行程序加載慢，做網(wǎng)站不科學(xué)一般，各有利弊。