等寬布局是一種比較常見的布局，但我還沒有仔細的去研究過，今天就來稍稍總結一下。
首先是我們要實現的最終效果，如下圖：
要求：三個子項目等寬等高，寬高隨父類變化自適應。每兩個子項目之間需要有20px的間距。
這個要求用css來實現可能會有一些麻煩，並且如果此處變成了四列，五列的話，使用css可能又需要重新計算寬度。
所以這里我們使用flex來進行布局：
html 代碼：
<section class="father"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </section>
css(單純實現等寬，不考慮間距):
我們先不管間距，我們先來實現等寬的效果（這里為了做出區分，我們把三個子項目的顏色做一些變化。）：
.father { display: flex; padding : 20px; width: 300px; height : 200px; border : 5px solid #000; } .item { flex : 1;
} .item-1 { background: red;
} .item-2 { background: green; } .item-3 { background: blue; }
最后的效果是這樣（每個子項目都是100px）：
這里我們需要注意的就是下面這句代碼：
flex : 1
它是一個簡寫形式 其實是 flex : flex-grow flex-shrink flex-basis的簡寫形式。那么我們定義的就是這個flex-grow屬性
flex-grow
flex-grow:它是指整個項目有多余空間時項目的放大比例。默認為0，也就是不放大。
分配多余空間
這是什么意思呢？比如說我們這里什么都不設置，那么父元素中間就是空的，那么就會有300px的多余空間，然后子元素來分這些多余空間。怎么分呢？我們按照權重比例來計算寬度。即子項目的寬度都是 (1 / (1+1+1) ) * 300，也就是平分了父容器的寬度。這里這樣寫你可能會覺得很麻煩，但是你可以嘗試把其中一個的flex設置成flex:2，那么它的寬度就會變成150px，就是用權重來進行計算的。
多余空間到底是什么？
那么這里還有一個問題，這里父元素的多余空間是否包括子元素的margin，border，padding呢？
還是用一個例子來說明，比如我們這里把item-1的padding設置成 padding : 0 20px;
最后的結果：
這里很明顯item-1的寬度增加了，而另外兩個的寬度減少了，但我們打開開發者工具可以看到，三個item的content的寬度都相同是86.67%
那么就很容易推斷出這是（300 - 20 * 2）/ 3 得到的結果
那么就是計算多余空間時是減掉了子元素的padding
大家可以去試試margin,和 border,都是這樣的情況。
css(加上間距的等寬布局):
那么回到我們的題目要求，理解上面所說之后就很簡單了。我們只要給后兩個間距一個margin-left 即可。那么我們只要在等寬的基礎上加上如下代碼即可。
.father .item + .item { margin-left : 20px; }
最終效果：
+ 號選擇器：
這里用到了一個css的+號選擇器，這里來做一下簡單介紹。
+號選擇器是相鄰居兄弟選擇器，例如：
h1 + p {
color:red;
}
它指的是緊跟在h1后面的p選擇器，這里用一個w3school的例子：
<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body>
那么效果會是這樣：
現在更改一下css代碼：
p + p { color:red; }
你可以把它理解成每一個p元素后面緊跟着的p元素，就是說第一個p元素（此處簡稱p1，之后都用簡稱）后面的p2被選中，p2后面的p3被選中，以此類推，最后除p1之外就都被選中了，效果如下：
如果還是不理解，可以嘗試再改一下html代碼（此處在最后一個p元素之前加了一個h1元素），如下：
<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <h1>This is a heading.</h1> <p>This is paragraph.</p> </body>
效果會是這樣：
那么p4之后是一個h1元素，所以p5就沒有被選中。
到此我們的等寬布局就結束了。
以上均是個人理解，若有錯漏，希望各位在評論區指出。