flex: 1是哪些属性的缩写？(学习笔记)

flex：1 是 flex-grow: 1; flex-shrink: 1;flex-basis: 0% 的缩写。

解析下flex-grow

flex-grow是将剩余的空间（子元素宽度之和小于父元素宽度的差值），根据flex-grow的值平分，然后加到flex-basis上。

<div id="content">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box1">C</div>
  <div class="box1">D</div>
</div>

#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 60px;
}
.box {
  flex-grow: 1;
}
.box1 {
  flex-grow: 4;
}

父元素的宽度是500px，子元素的flex-basis加起来是240px，父容器分完以后剩下260px，ABCD的flex-grow加起来10，那么每一份是26px，最终AB是60px + 26px = 86px，CD是60px + 26px * 4 = 164px。

解释下flex-shrink

flex-shrink是将多出的空间（子元素宽度之和大于父元素宽度的差值），根据flex-shrink的值平分，然后flex-basis减去分到的值。

<div id="content">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box1">C</div>
  <div class="box1">D</div>
</div>

#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 150px;
}
.box {
  flex-shrink: 1;
}
.box1 {
  flex-shrink: 4;
}

子元素的flex-basis加起来是600px，而父容器只有500px，那么少的100px，就得从ABCD往出扣，ABCD的flex-shrink加起来是10，那么每一份就是10px，最终AB是150px - 10px = 140px，CD是150px - 10px * 4 = 110px。

参考文章：https://juejin.cn/post/7339042131467747368?utm_source=gold_browser_extension