flex-basis、flex-grow、flex-shrink

• flex-basis 用来给项目设置初始 宽/高
• flex-grow 在父元素 宽/高 大于子元素 宽/高 之和时，规定父元素剩余空间分配比例
• flex-shrink 在父元素 宽/高 小于子元素 宽/高 之和时，子元素收缩自己 宽/高 的比例
  当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

  <header>
    <h1>Site name</h1>
  </header>
  <main>
    <p>Bacon Ipsum dolor sit amet...
  <!-- 从baconipsum.com那里复制一些示意文字过来 --></p>
  </main>
  <footer>
    <p>© 2015 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
  </footer>

/* css */
/* flex-basis */
main {
  flex-basis: 400px;
}

flex-grow为按照权重值分配剩余空间：
下图footer分配的剩余空间为header的两倍

/* flex-grow */
/* 默认值为0 */
main,header,footer {
  width: 100px;
}
header {
  flex-grow: 1;
  /* flex-grow: 0.2; */
}
footer {
  flex-grow: 2;
  /* flex-grow: 0.2; */
}

flex-shrink不是简单的按照权重分配，还要考虑元素的宽度影响：

/* flex-shrink */
/* 默认值为1 */
  header {
    width: 800px;
    flex-shrink: 2;
  }
  main {
    width: 900px;
  }
  footer {
    width: 1000px;
    flex-shrink: 3;
  }

具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。
则权重为：800 * 2 = 1600、 900 * 1 = 900、 1000 * 3 = 3000，总权重为5500
总宽度为 1680px ， 超出量为 2700 - 1680 = 1020
则三个元素收缩量分别为：1020 * (1600 / 5500)、1020 * (900 / 5500)、1020 * (3000 / 5500) 即： 296 166 556