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
  {
        width:200px;  
  }
 .right
  { 
        flex:1;
        /*
        flex-grow:1;
        flex-shrink:1;
        */
   }

例子