flex布局深究

前言

对于 基础布局知识，阅读flex布局教程 - 阮一峰

flex-grow

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（瓜分剩余空间）。
假设有三个子项

如果设置子项的 flex-grow: 1;， 则它们将按照比例 1 ：1 ：1 等分剩余空间。

如果设置
第 一 个子项的flex-grow: 1;，
第 二 个子项的flex-grow: 2;，
第 三 个子项的flex-grow: 3;，
则它们将按照比例 1 ：2 ：3 等分剩余空间。

flex-shrink

我们都知道，flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

但是与flex-grow的放大比例有着完全不同的计算方式。

当设置了flex-shrink ，则 flex-grow 属性无效。

我们设置一个容器，包裹三个子项盒子

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

同时给上样式

.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  display: flex;
}

.content {
  width: 100px;
  height: 100px;
  flex-basis: 300px;  /*优先于width*/
  
  flex-shrink: 1;
  
  border: 1px solid green;
  box-sizing: border-box;
}

.content:nth-of-type(3) {
  flex-shrink: 3;
}

此时，三个子项的大小总共是 900，超过了 盒子600的大小，同时对三个子项设置了 flex-shrink，前两个盒子为1，第三个值为3

我们按照 flex-grow的扩展的计算方式进行测试，可以得到

而实际结果也是如此，但真的是这样么？当然不是！！！，主要原因在于 三个子项的宽度是相等的，然后误导将shrink的比例当做了缩减的比例。

我们再设置一个容器，包裹三个子项盒子

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

同时给上样式， 去掉子项边框，让其为整数值，方便计算！

.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  display: flex;
}

.content {
  width: 200px;
  height: 100px;
  
  flex-shrink: 1;
  
}

.content:nth-of-type(3) {
  width: 400px;
  flex-shrink: 3;
}

此时，三个子项的大小总共是 800，超过了 盒子600的大小 200，同时对三个子项设置了 flex-shrink，前两个盒子为1，第三个值为3。

按照刚刚测试的算法，1：1：3 对超出的 200 进行压缩可以得到
第一个宽度为 200 - 40 = 160，
第一个宽度为 200 - 40 = 160，
第三个宽度为 400 -120 = 280

但实际测试结果为175 175 250，
如此便可以验证压缩的计算方式，并不是扩展的计算方式

真实的计算方式则是所有子项的 真实**（内容区）**宽度 shrink值 相加，作为权值，为分母。

然后每个子项的真实宽度 shrink值/ 权值 再乘以多出来的部分，得到 压缩部分。再减去压缩部分得到实际宽度大小。

拿上述例子来计算。

这里就有一个值得注意的地方。在图片中 计算压缩大小的试子中，分子上是 真实宽度为啥呢？

我们接着设置一个容器，包裹三个子项盒子

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

同时给上样式， 这次加上子项边框

.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  display: flex;
}

.content {
  width: 200px;
  height: 100px;
  
  flex-shrink: 1;
  
  border: 1px solid black;
  box-sizing: border-box;
}

.content:nth-of-type(3) {
  width: 400px;
  flex-shrink: 3;
}

可以得到实际结果如图

.

惊奇的发现，宽度竟然变成了小数，而且，加上padding的值也不等于计算出来的结果，虽然差不多。

但是如果将 border 去掉，就会发现和原来的一样，不同的地方，就是padding的值没了。

细心的可以知道：这个真实宽度就是指内容区的真实宽度。

我们再接着设置一个容器，包裹三个子项盒子
去掉子项内容区的内容

<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

同时给上样式， 加上颜色
这次前两个盒子 不设置width，用padding代替宽度大小，去掉边框

.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  display: flex;
}

.content {  
  height: 100px;
  
  padding: 0 100px;
  flex-shrink: 1;
  
  box-sizing: border-box;
  background-color: #f0f;
}
.content:nth-of-type(2) {
  background-color: #ff0;
}
.content:nth-of-type(3) {
  width: 400px;
  flex-shrink: 3;
  background-color: #0ff;
}

可以得到实际结果如图

惊奇的发现，它们宽度竟然一样。其实可以猜测，第一个和第二个都没有压缩，只有第三个压缩了。

相当于 第一个和第二个的 shrink值，都是 0 。

其权重 计算可以为 0 * 1 + 0 * 1 + xxx * 3。这样一来，只能在第三个上面压缩。

我们再再接着设置一个容器，包裹三个子项盒子

<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

同时给上样式， 加上颜色
这次设置80的padding

.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  display: flex;
}

.content {  
  width: 200px;
  height: 100px;
  
  padding: 0 80px;
  flex-shrink: 1;
  
  box-sizing: border-box;
  background-color: #f0f;
}
.content:nth-of-type(2) {
  background-color: #ff0;
}
.content:nth-of-type(3) {
  width: 400px;
  flex-shrink: 3;
  background-color: #0ff;
}

推测结果如图

真实效果如图

当设置了 flex-shrink属性同时遇到 box-sizing:border-box ， border或者padding，加权值在计算的时候，不是真实盒子宽度，而是内容区的宽度。

flex-basis

当子项同时设置了 width和flex-basis，basis的优先级更高。

不做测试，直接结论！

1. 就是子项的width。权重高于width。

2. 添加内容，当是英语单词的时候，

   1. 只写basis ，就代表width的最小值，即min-width
   2. 同时设置了basis和 width。
      1. basis < width basis是下限，width代表上限
      2. basis > width 则width无效了

3. 当不换行内容撑开容器，设置了shrink，不参与压缩flex-shrink

   1. 可以设置中文
   2. word-break:break-word强制换行