https://blog.csdn.net/shidaping/article/details/52623348
我们要用flex实现这样一个小功能，即左边的div固定宽度为90px,右边的div占满余下的宽度。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<div class="flex-container">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
height: 100px;
}
.div1{
width: 90px;
background-color: green;
}
.div2{
width: 100%;
background-color: red;
}
</style>
</body>
</html>
但是我们发现这里div1并未如我们所想的那样是90px。
这里需要就引出了flex这个属性。flex属性是一个复合属性。
这有3个参数: flex: flex-grow flex-shrink flex-basis;
flex-grow表示是否会自动增大，1为是，0为否，默认1.
flex-shrink表示是否自动缩小，1为是，0为否，默认1.
flex-basis：宽度px/百分比/数字。
此处我们将div1设为flex: 0 0 90px.即可，div2的width: 100%是不必要的。