原文：flex:1不等分的問題
一驼卖、現(xiàn)象
我們常常使用flex布局氨肌，來實現(xiàn)等分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box{
width: 100vw;
height: 100vh;
background: green;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item{
flex: 1;
background: yellow;
height: 200px;
border: 2px solid #000000;
}
.test{
padding: 40px;
background-color: red;
}
</style>
<body>
<div class="box">
<span class="item test"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
<script type="text/javascript">
</script>
</html>
但是上述代碼實現(xiàn)的效果：
image.png
都是flex：1,為啥第一個item會更寬一些呢酌畜？看起來就是那個padding導(dǎo)致的效果怎囚。可是按照我們平時的使用來看桥胞，flex:1應(yīng)該均等分配空間才對恳守。難道是因為box-sizing的原因考婴，那么就給item加上box-sizing:border-box:
image.png
可以看到，高度上確實起作用了催烘，但是寬度上似乎并沒有起到作用沥阱。第一個的寬度上還是被padding撐開了。
二伊群、原因分析
1考杉、父容器flex布局，子元素不處理
先來看看基本的在岂，沒有flex等屬性的時候奔则，子元素默認的屬性值是：
flex-grow: 0;//0的意思就是子元素不放大,這個屬性規(guī)定了 flex-grow 項在 flex 容器中主軸方向上分配剩余空間的相對比例。
flex-shrink: 1;//flex 元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮蔽午，其收縮的大小是依據(jù) flex-shrink 的值易茬。0時不縮小，值越大越縮小及老。
flex-basis: auto;//指定了 flex 元素在主軸方向上的初始大小抽莱。如果不使用 box-sizing 改變盒模型的話骄恶，那么這個屬性就決定了 flex 元素的內(nèi)容盒（content-box）的尺寸食铐。并且當一個元素同時被設(shè)置了 flex-basis (除值為 auto 外) 和 width (或者在 flex-direction: column 情況下設(shè)置了height) , flex-basis 具有更高的優(yōu)先級.
注：因為flex：1其實是這三個屬性的簡寫，具體的網(wǎng)上到處都有僧鲁。這里按下不表虐呻。
image.png
這里分析下斟叼，為啥子元素不設(shè)flex的時候會是這個樣子春寿。
1绑改，四個子元素的內(nèi)容都為空，且conten-box并沒有設(shè)置寬度值识腿，所以內(nèi)容盒子conten-box的寬度是0.flex-basis: auto;就基于這個內(nèi)容設(shè)置了四個子元素寬度為0，因為它的優(yōu)先級高于width费薄。
2,這時候四個子元素默認寬度之和小于容器寬度硝全，flex-shrink: 1;沒有生效颖榜。
3庶柿，又因為flex-grow: 0;不進行放大處理。所以寬度就是0赫蛇。
三召廷、實際原因
因為 依照 flex 的自動調(diào)整計算規(guī)范是不包含 padding 的凳厢。w3 規(guī)范這里的部分提到 flexItem 的可用空間要減去 margin、border竞慢、padding先紫。所以想要均分的話，需要套個margin筹煮、border遮精、padding一樣的div。
