flex-grow

flex-grow用于处理flex容器剩余空间。

剩余空间分配计算

剩余空间 = flex容器宽度 - (项目1flex-basis + 项目2flex-basis + ... + 项目nflex-basis)

项目1分配空间 = [项目1flex-grow / (项目1flex-grow + 项目2flex-grow + ... + 项目nflex-grow)] * 剩余空间

示例

原始案例（剩余300px）

.row {  display: flex;  width: 600px;  height: 100px;}.row > .col:nth-child(1) {  background: red;  flex-basis: 100px;  flex-grow: 0;}.row > .col:nth-child(2) {  background-color: green;  flex-basis: 200px;  flex-grow: 0;}

剩余空间分配

.row {  display: flex;  width: 600px;  height: 100px;}.row > .col:nth-child(1) {  background: red;  flex-basis: 100px;  flex-grow: 2;}.row > .col:nth-child(2) {  background-color: green;  flex-basis: 200px;  flex-grow: 1;}

项目1：
- 原宽度：100px
- 新宽度：300px
- 分配空间：200px

flex_show_006

项目2：
- 原宽度：200px
- 新宽度：300px
- 压缩宽度：100px

flex_show_007

flex-shrink

flex-shrink用于处理flex容器溢出空间。

溢出空间分配计算

溢出空间 = (项目1flex-basis + 项目2flex-basis + ... + 项目nflex-basis) - flex容器宽度

加权值 = (项目1flex-basis 项目1flex-shrink) + (项目2flex-basis 项目2flex-shrink) + (...) + (项目nflex-basis * 项目nflex-shrink)

项目1压缩宽度 = (项目1flex-basis 项目1flex-shrink / 加权值) 溢出空间

示例

原始项目（溢出300px）

.row {  display: flex;  width: 300px;  height: 100px;}.row > .col:nth-child(1) {  background: red;  flex-basis: 200px;  flex-shrink: 0;}.row > .col:nth-child(2) {  background-color: green;  flex-basis: 400px;  flex-shrink: 0;}

溢出处理

.row {  display: flex;  width: 300px;  height: 100px;}.row > .col:nth-child(1) {  background: red;  flex-basis: 200px;  flex-shrink: 1;}.row > .col:nth-child(2) {  background-color: green;  flex-basis: 400px;  flex-shrink: 2;}