如何使用Flex布局

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

关于flex-grow和flex-shrink

参考链接： https://juejin.im/post/5bcaa394f265da0aa3595fac

flex完整语法是：flex: [flex-grow] [flex-shrink] [flex-basis]。经常写的flex: 1实际是设置flex-grow属性。

flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）

<style>
.container {
  display: flex;
  width: 1000px;
  height: 300px;
}
.part1 {
  background-color: plum;
  flex: 1 2 500px;
}
.part2 {
  background-color: cyan;
  flex: 2 1 400px;
}
</style>
<div class="container">
  <div class="part1">1</div>
  <div class="part2">2</div>
</div>

容器宽度为100px，两个子元素的宽度和为500 + 400 = 900px，那么对于剩下的100px，会按照2：1的比例分配，所以元素最后的宽度为：

500 + 100 * 1 / ( 1 + 2 ) = 533.333
400 + 100 * 2 / ( 1 + 2 ) = 466.666

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果把容器宽度改为600，那么元素的宽度分别为多少？可能会认为是300 300，总收缩宽度为300，按2：1的比例每个收缩200 100，但实际不是这样的：

计算方式如下：

总权重宽度：TW = 每个元素的flex-basis * flex-shrink之和，计算下来为500 * 2 + 400 * 1 = 1400
总收缩宽度：500 + 400 - 600 = 300

每个元素的收缩宽度：flex-basis * flex-shrink / TW * 总收缩宽度

所以计算结果为：

500 - 500 * 2 / 1400 * 300 = 285.71
400 - 400 * 1 / 1400 * 300 = 314.29