Flex实现左固右满布局

1、 需求分析

要实现一个左边宽度固定，右边的宽度自动铺满的布局，效果如下

2. 代码实现：

	/*1. 容器的声明*/
  .container {
      display: flex;
      width: 100%;
      height: 300px;
      border: 1px solid red;
  }
	/*2. 项目的声明*/
  .left {
      width: 100px;/*必须，左固就得固*/
      background: blue;
  }
  .right {
      flex: 1;/*必须，让它行分配剩余的空间，由于是block，默认铺满宽度*/
  }

<div class="container">
	<div class="left"></div>
	<div class="right"></div>
</div>