版权声明：本文为博主原创文章，部分内容为借鉴理解。 https://blog.csdn.net/weixin_35773751/article/details/88564124
目标：在perent-div中 child-div中的其中一个不改变宽度
这里要借助flex的item属性，也许很多人会觉得很难，其实很简单，我说说我是怎么记得。
首先知道有六个属性
然后知道 flex-grow 和 flex-basis 是在有剩余空间使用
flex-shrink 是没有剩余空间使用
这样就记住一半了，
然后余下的基本看一眼就知道了，无非就是flex、order、flex-self,就这样记完了。
回到题目，重点使用 flex-shrink
这里一定要记住
item-div 中 （ flex-grow 和 flex-basis 是在有剩余空间使用 ）（ flex-shrink 是没有剩余空间使用 ）
flex-basis 是在有剩余空间的时候才能自定义宽度，否则不起作用。
因此：
<style>
.perant{
backgrond:blue;
width:500px;
height: 300px;
display:flex;
margin:0 auto;
}
.child1{
background: red;
width: 300px;
height: 100%;
flex-shrink: 0; // 设置以后宽就是300px了
}
.child2{
background: pink;
width: 200px;
height: 100%;
}
.child3{
background: green;
width: 100px;
height: 100%;
}
</style>
<body>
<div class="perant">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</body>