查看: 657|回复: 0

[DIV/CSS] flex-grow 与 flex-shrink

发表于 2017-10-27 08:00:02
太阳http代理AD
flex-grow

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

剩余空间分配计算

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

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

示例 原始案例(剩余300px)
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col"></div>
  4. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 600px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. flex-basis: 100px;
  9. flex-grow: 0;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. flex-basis: 200px;
  14. flex-grow: 0;
  15. }
复制代码
剩余空间分配
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col"></div>
  4. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 600px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. flex-basis: 100px;
  9. flex-grow: 2;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. flex-basis: 200px;
  14. flex-grow: 1;
  15. }
复制代码

项目1:

原宽度:100px 新宽度:300px 分配空间:200px

项目2:

原宽度:200px 新宽度:300px 压缩宽度:100px

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)
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col"></div>
  4. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 300px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. flex-basis: 200px;
  9. flex-shrink: 0;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. flex-basis: 400px;
  14. flex-shrink: 0;
  15. }
复制代码
溢出处理
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col"></div>
  4. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 300px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. flex-basis: 200px;
  9. flex-shrink: 1;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. flex-basis: 400px;
  14. flex-shrink: 2;
  15. }
复制代码

项目1:

原宽度:200px 新宽度:140px 压缩宽度:60px

项目2:

原宽度:400px 新宽度:160px 压缩宽度:240px

参考资源

css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记



太阳http代理AD
回复

使用道具 举报