解決css中flex布局的元素有padding情況下各彈性元素width出現的問題

問題描述如下：

1.正常情況下：

在做一個app頭部搜索的時候用了flex布局。左右圖標寬度固定，中間搜索框用了設置flex為1,沒設置padding的時候如下圖所示：

2.給中間input設置padding后input塊的寬度占用了后面購物車的寬度

3.解決問題(box-sizing:border-box)

　　百度了一下算是找到了解決方案：給設置padding的input添加box-sizing:border-box,就ok了

代碼大致如下：

html

<header>
    <a href="" class="chat"></a>
    <div class="search">
        <input type="text" placeholder="簡約白搭歐美大牌短靴">
    </div>
    <a href="" class="cart"></a>
</header>

css

header{
  display: flex;
  flex-flow: row;
  background-color: #fff;
  height:2rem;
}
header .chat{
  background: url(images/chat.png) no-repeat center;
}
header .search{
  flex:1;
}
header .search input{
  width: 100%;
  height: 100%;
  background: #eee url(images/search.png) no-repeat 10px center;
  background-size: 1rem 1rem;
  border:0;
  border-radius:3px;
  padding-left: 1.5rem;
  box-sizing:border-box;
}
header .cart{
  background: url(images/cart.png) no-repeat center;

}
header .chat,header .cart{
  width: 4rem;
  background-size: 2rem auto;
}

 box-sizing:border-box 就是為了設置width和height元素值包含padding(內邊距)和border(邊框)的值，這樣就很好的解決了padding使寬度溢出的問題