css flex 右边固定左边自适应

css flex 右边固定左边自适应宽度也是开发中常见的一种布局，本章节将来演示如何用css flex来实现右边固定左边自适应的宽度布局，其实也没什么好演示的就是“左边固定右边自适应”对换一下位置即可。

代码例子

我们只需要把左边设置成flex:1即可，这等同于flex-grow:1;flex-shrink:1;(flex-grow:1空间足够填充剩余空间，flex-shrink:1空间不足等比例缩小)

#boxs
 {
    width:80%;
    height:100px;
    border:1px solid #333;
    display:flex; 
  }
  .left
  {
     flex:1;
        /*
        flex-grow:1;
        flex-shrink:1;
        */      
  }
  .right
  { 
      width:200px;
  }

例子