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>