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