解决css中flex布局的元素有padding情况下各弹性元素width出现的问题

解决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使宽度溢出的问题。