文章参考
左边固定，右边百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
#left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div id="left">
我在左边,width: 200px;
</div>
<div id="right">我在右边，自适应</div>
</div>
</body>
</html>
为什么不能使用flex-shrink
这里不能用属性，因为左边固定，右边是剩余的百分百，最坏的情况是内容过多恰好撑满，那么只能剩下的只能放大撑满，而不是缩小，如果设置缩小，剩下的最好的情况是内容过多恰好撑满，只要内容不多，就不会撑满
右边固定，左边百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
#left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div id="left">
我在左边,width: 200px;
</div>
<div id="right">我在右边，自适应</div>
</div>
</body>
</html>
两边固定，中间百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
.left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div class="left">
我在左边width: 200px;
</div>
<div id="right">我在右边，自适应</div>
<div class="left">
我在右边width: 200px;
</div>
</div>
</body>
</html>