深入理解flex布局之flex-grow、flex-shrink、flex-basis

前提知识:
max-content: 尺寸值会变得尽可能大, 没有自动换行的机会. 如果flex容器太窄, 它就会溢出其自身的盒子。

min-content: 文本已尽可能抓住机会来自动换行, 变得尽可能小且没有溢出。

效果如下面的图片

min-content max-content概念-flex布局-20200518.png

positive free space正向自由空间

flex子元素在主轴上的尺寸(大小)之和小于flex容器的尺寸时, flex容器中就会有多余的空间没有被填充, 这些空间就被叫做 positive free space

图片中Available = 200px即是positive free space

positive free space-flex-20200518.png

negative free space反向自由空间

flex子元素在主轴上的尺寸之和大于flex容器的尺寸时, flex容器的空间就不够用,此时flex子元素的尺寸之和减去flex容器的尺寸(flex子元素溢出的尺寸)就是negative free space, 这个negative free space加上flex容器的尺寸刚好可以容纳flex子元素。

图片Overflow = 100px即是negative free space

negative free space-flex-20200518.png


  1. flex-basis 默认值为auto

    flex-basis: auto浏览器会先检查flex子元素的主尺寸是否设置了绝对值再计算出flex子元素的初始值,如果是已经给flex容器的子元素设置了宽度值,如300px,则flex-basis的值就是300px。如果没有给flex容器的子元素设置宽度值,auto值就会解析为其内容的大小默认为width: max-content

    flex-basis: 0flexbox 完全忽略flex子元素的尺寸设置flex-basis:0。这基本上告诉flexbox所有空间都可以抢占,并按比例分配,具体怎么分配要结合flex-growflex-shrink的算法。

  1. flex-grow 默认值为0
    flex-growflex容器子项的flex增长值, 当主轴方向positive free space分配时,flex容器中的子元素相对于flex容器中的其余flex子元素在主轴方向尺寸增长程度

基本使用:
flex容器的子元素上设置flex-grow: 1,则positive free space会被子元素平均分配
🌰flex-grow:1 实践-codepen

flex-grow-2-flex-20200518.png

flex容器的子元素没有设置flex-grow,即flex-grow: 0(默认)

flex-grow-1-flex-20200518.png

flex-growflex-shrinkflex-basic结合使用,

flex子元素上面三个属性的简写形式为flex,默认值为flex: 0 1 auto

需要注意的是:

flex属性接受指定一个 无单位的数字(正数)时,则这个值指的是flex-grow,且存在当flex的属性值为一个或是两个无单位数字的时候,则flex-bais的值从auto变为0。具体查看flex-简写-MDN

flex: 1
/* 等价于 flex-grow:1 flex-shrink:1 flex-basis: 0 */

demo flex-basis flex-shrink flex-grow

🌰 flex: 1 1 0,在没有设定主轴方向的尺寸时,且flex-basic: 0flex子元素的尺寸计算值是0--所有空间都用来争夺flex-grow: 1,则正向自由空间被平分到各个子元素上,最终的结果是子元素在主轴方向上的尺寸是相同的

flex-basis的值为零-flex-20200518.png

🌰 flex: 1 1 auto,在flex子元素没设定主轴方向的尺寸时,且flex-basis: auto则子元素的尺寸取决于max-content 大小flex-grow: 1,则正向自由空间被平分到各个子元素上

flex-basis的值为auto-flex-20200518.png

  1. flex-shrink,默认为1
    flex-shrink 减少空间来使盒子适应它们的容器而不溢出,需要注意的是flex-shrink会导致flex子元素在主轴方向上的尺寸收缩,但是也不会小于min-content

demo flex-shrink-codepen

flex容器在主轴上的尺寸小于flex子元素的在主轴上的尺寸之和时。当没有设定flex-shrink值得时候,效果如下图

flex-shrink-1-flex-20200518.png

flex容器在主轴上的尺寸小于flex子元素的在主轴上的尺寸之和时。当设定flex-shrink: 1值得时候,flex子元素按比例收缩,效果如下图

flex-shrink-2-flex-20200518.png

注意flex-shrink的计算方式与flex-grow有很大的区别,flex-shrink计算如下图所示

flex-shrink 计算-20200519.jpeg

🌰demo flex-shrink 计算的验证
HTML

<div class="container">
  <div class="green">300</div>
  <div class="yellow">600</div>
</div>

CSS

.container {
  display: flex;
  width: 800px;
}
.green {
  width: 300px;
  flex-shrink: 4;
  /* flex-shrink: 0; */
}
.yellow {
  width: 600px;
  flex-shrink: 6;
  /* flex-shrink: 0; */
}

如果上面实例中flex子元素flex-shrink: 0(没有设定是,该值默认为1),则会导致溢出,如下图

flex-shrink 计算-SHRUNK SPACE-20200519.png

根据上面的图片的计算公式:
已经:.green.yellowflex-shrink值分别为4,6

total shrink scaled width = (300x4) + (600x6) = 4800

.green shrink ratio = (width x flex shrink)/ total shrink scaled width = (300 x 4)/4800 = 0.25

.yellow shrink ratio = (width x flex shrink)/ total shrink scaled width = (600 x 6)/4800 = 0.75

shrunk space = (.gerrn width + .yellow width) - .container width = (300px + 600px) - 800px = 100px

.green new width = .green width - (.green shrink ratio x shrunk space) = 300px - (0.25 x 100px) = 275px

.yellow new width = .yellow width - (.yellow shrink ratio x shrunk space) = 600px - (0.75 x 100px) = 525

flex-shrink 计算 demo-20200519.png


参考:


版权声明:本文为博主原创文章,未经博主许可不得转载