浮浮，唐不要忘記父元素應(yīng)該清除浮動。

在最近的一次面試中，面試官問，在水平布局中，假設(shè)有三個(gè)div，每個(gè)都有固定的寬度apx。如果想讓兩邊的寬度都是x，那么中間div的間隔就是2x。x可以是自適應(yīng)的。

怎么做很簡單，就兩行代碼:

justify-content的常見屬性有:flex-start|flex-end|center|space-between|space-around。

前三個(gè)按字面意義對齊到行首、行尾和行中間。

在最后兩個(gè)示例中，space-between:元素將均勻分布在行中。如果最左邊的剩余空格為負(fù)，或者該行只有一個(gè)子元素，則該值等效于#39flex-start#39。在其他情況下，第一個(gè)元素的邊界與該行的主起始位置的邊界對齊，而最后一個(gè)元素的邊界與該行的主結(jié)束位置的邊距對齊，而剩余的擴(kuò)展框項(xiàng)均勻分布，并確保它們之間的空白空間相等。白話的意思是第一個(gè)元素的位置與該行的起始位置對齊，最后一個(gè)元素與該行的結(jié)束位置對齊，中間剩余的空間均勻分布。

Space-around:彈性盒元素將在行中均勻分布，兩端將在子元素之間保留一半的空間。如果最左邊的剩余空間為負(fù)，或者該行中只有一個(gè)擴(kuò)展框項(xiàng)目，則該值等效于#39center#39。其他情況下，擴(kuò)展框項(xiàng)均勻分布，保證每對之間的空格相等，第一個(gè)元素前的空格和最后一個(gè)元素后的空格是其他空格的一半。

說到這個(gè)，it都是廢話，這也是你最初學(xué)習(xí)flexlayout會接觸到的。主要是面試官問，如果中間不是2x，那就是x，也就是每個(gè)缺口和兩邊的區(qū)間一樣。那個(gè)it::

起初，我想在兩邊設(shè)置填充，并在中間使用空格，但在不同屏幕上看到的兩邊的填充值肯定是不同的，所以我不我不想等待雙方的差距。。。所以我沒有Idon'我最后也想不通。回來后發(fā)現(xiàn)justify-content居然還有space-even這樣的屬性！為什么使用這個(gè)屬性是不言而喻的。均勻排列各元素，各元素之間的間隔相等。問題解決了。然而，空間均勻的兼容性仍然比通常使用的justify-content值差得多。

我們可以不要只是見面解決面試。問題，實(shí)際情況中可能會出現(xiàn)很多奇妙的情況，比如，四個(gè)x上圖中的s改為三個(gè)xs和one2x(雖然我沒見過這么奇妙的設(shè)計(jì)。。)那么我該怎么辦呢？

這里我想到了css3的cacl()，可以計(jì)算百分比和px值，而且是強(qiáng)批。例如，要達(dá)到上述要求:

也能取得成果。(假設(shè)a的值是100px)并且無論什么情況都可以計(jì)算出你想要的大小。It這不太好。