阶段四/左右固定中间自适应.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>
 <div class="container">
  <div class="left"></div>
  <div class="mid"></div>
  <div class="right"></div>
 </div>
 <style>
  .container {
   display: flex;
  }

  .left {
   width: 150px;
   height: 100px;
   background: rosybrown;
  }

  .mid {
   flex: 1;
   width: 100%;
   height: 100px;
   background: royalblue;
  }

  .right {
   width: 100px;
   height: 100px;
   background: cadetblue;
  }
 </style>
</body>

</html>