听说你很熟悉 flex

听说你很熟悉 flex,看以下几种情况说一下最终渲染结果

问题一

.container {
  display:flex;
  width: 100px;
}

.item {
  flex-grow: 1;
}
.item1 {
  width: 30px;
}
.item2 {
  width: 40px;
}

问题二

.container {
  display:flex;
  width: 150px;
}

.item {
  flex-grow: 1;
  margin: 10px;
}
.item1 {
  width: 30px;
}
.item2 {
  width: 40px;
}

问题三

.container {
  display:flex;
  width: 150px;
}

.item {
  margin: 10px;
}
.item1 {
  flex-grow: 1;
  width: 30px;
}
.item2 {
  flex-grow: 3;
  width: 40px;
}

问题四

.container {
  display:flex;
  width: 280px;
}

.item {
  margin: 10px;
}
.item1 {
  flex-shrink: 1;
  width: 100px;
}
.item2 {
  flex-shrink: 1;
  width: 200px;
}

问题一答案:

问题二答案:

问题三答案

问题四答案

tip

• flex-grow 的情况先假设全部放入，自由空间按照 flex-grow 的比例分
• flex-shrink 的情况也是先假设全部放入，还差多少？按照 flex-shrink * flex-basis的比例匀出来

按照这个规则我们看问题三和问题四

问题三详解

先假设全部放入，还多了 40px，flex-grow 分别是 1和3，即分别占10px 30px

• item1 = 30px + 10px = 40px
• item2 = 40 + 30px = 70px

问题四详解

先假设全部放入，差了40+100+200-280=60px,flex-shrink * flex-basis的比例即100:200=1:2，分别匀出来20px 40px

• item1: 100px - 20px = 80px
• item2: 200px - 40px = 160px

都不是刁难的问题，平时开发中很常见，但脑子里没能获取到明确又自信的渲染结果，补缺🤌