左边固定，右边填充整个窗体的布局，怎么做【佰钧成面试题】

面试题智学无忧-老曹 •

文章标签: 左右布局弹性布局 flex css布局弹性盒子

159

佰钧成的一个面试官问到了这么一个问题

做一个后台常见的布局，左边的宽度固定，右边宽度填满整个窗体，如何实现了？

先让你思考一下，等下在给出答案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解析xml文档</title>    
    <style type="text/css">
      .container{
          display: flex; /*弹性盒子*/
      }
      .left{
          background-color: pink;
          width:300px;
      }
      .right{
          background-color: green;
          flex: 1; /*剩余的填满*/
      }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>     
</body>
</html>

效果：较窄的窗体