flex:1可以撑满剩余空间

flex: 1；的妙用

首先 flex 是 flex-grow、flex-shrink、flex-basis的缩写。

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下两个是等同的：

.item{flex: 1;}

.item{

   flex-grow: 1;

   flex-shrink: 1;

   flex-basis: 1;}

用途：

例如在表头有三个div被被应用到同一行后。但需要把第一个和第二个div排在最左边，第三个div需要排在最右边。可以直接给只给第二个div应用flex ：1；(即把此行所有的剩余空间都给第二个div，第三个div自然就被挤到最右边了)