flex:none 和 flex:1

不允许项目压缩、放大 flex: none
如果我们希望项目排在一行里，但是项目的宽度又不被压缩，那么我们应该给项目设置 flex:none，使项目不能被压缩或放大。

我们接触到的属性，justify-content、align-items、flex-wrap，都是设置在 flex 容器上的。但是这个控制项目是否被压缩或放大的属性，是设置在 flex 项目上的。

项目自动充满剩余空间 flex: 1

如果一行有剩余的情况下，希望项目能够均匀放大，撑满水平方向，我们应该给所有项目设置 flex: 1，注意这里是给所有项目都设置。

两栏自适应布局
两栏自适应布局指的是一栏固定宽度，另一栏随浏览器宽度的变化自动调节自己的宽度。

<div class="flex-auto">
  <div class="static"></div>
  <div class="flexible"></div>
</div>

.flex-auto {
  display: flex;
}
.flex-auto .static {
  width: 100px;
  flex: none;
}
.flex-auto .flexible {
  flex: 1;
}

指定项目放大
如果一行有剩余的情况下，我们可以任意指定某个项目放大撑满剩余空间，只要给指定项目设置 flex: 1 即可。