https://blog.csdn.net/shidaping/article/details/52623348
We use flex to achieve such a small function, that is, the fixed width of the div on the left is 90px, and the div on the right occupies the rest of the width.
<!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>
But we found that div1 here is not 90px as we thought.
Here we need to introduce the flex property. The flex property is a composite property.
This has 3 parameters: flex: flex-grow flex-shrink flex-basis;
flex-grow indicates whether it will automatically increase, 1 is yes, 0 is no, the default is 1.
flex-shrink indicates whether to shrink automatically, 1 is yes, 0 is no, the default is 1.
flex-basis: width px/percent/number.
Here we set div1 to flex: 0 0 90px. That's it, the width of div2: 100% is unnecessary.