关于css的displayflexflexgrowflexshrink

flex 布局在开发中的作用：

1. 解决以前需要用定位 position, 浮动 float, 百分比 % 来解决的布局问题，
2. 解决以前比较难以把握的垂直居中问题 vertical-align

面试中很容易碰到一个题：

左边 200px, 右边占满整屏

以前的写法，会用到左边写固定 200px, 后边的元素 margin-left:200px, 然后加上浮动 float，有了 flex 之后呢，写法非常方便

.left
    width 200px
.right
    flex 1

自动占满剩余的空间, 是不是特别 6，当然这个是题外话，我们要学的是 flex:grow,flex:shrink

flex: grow

MDN 是这样描述的：

CSS 属性 flex-grow设置了一个 flex 项主尺寸的 flex 增长系数。它指定了 flex 容器中剩余空间的多少应该分配给项目（flex 增长系数）。

怎么样，看懂了吗，我自己看了也晕，还是来些栗子吧

section
    div.left
    div.center
    div.right

section
    display flex
    width 600px
    height 100px
    .left
        flex-grow 1
        width 100px
        background red
    .center
        flex-grow 2
        width 200px
        background yellow
    .right
        flex-grow 3
        width 16px
        background green

上面这个栗子在实际运行中，会是怎样呢

是不是有点意思呢，宽度都按特定的比例拉伸了，这就是我们 flex：grow 的功效了

• 在子元素的 flex-grow 加起来大于 1 的时候，要算出实际宽度。
• 首先计算出子元素相对父元素的剩余宽度，在这里是 600-100-200-16=284
• 计算第一个方块的实际宽度：284*1(flex-grow)/6(子元素 flow-grow 总和)+100(样式定义的 width)=147.33，第二个跟第三个不妨自己试着算算

flex-grow 还有一种情况是，flow-grow 总和小于 1 的情况，这时候算法跟上面有所不同:

栗子：还是拿上面栗子来看，把 flow-grow 的值全部改为 0.n，相对应

.left
    flex-grow 0.1
    width 100px
    background red
.center
    flex-grow 0.2
    width 200px
    background yellow
.right
    flex-grow 0.3
    width 16px
    background green

试着想一想会得到什么样的一个布局呢，
看图，我已经放在下面了

当子元素的 flow-grow 加起来不足 1 的时候，这时候，父元素就会有空间不被占满，那么这个时候得子元素实际宽度是多少呢：

• 在子元素的 flex-grow 加起来小于 1 的时候，要算出实际宽度。
• 首先计算出子元素相对父元素的剩余宽度，在这里是 600-100-200-16=284
• 计算第一个方块的实际宽度：284*0.1(flex-grow)/1(子元素 flow-grow 总和)+100(样式定义的 width)=128.4，第二个跟第三个不妨自己试着算算

当然啦，这个 flex-grow 的值是被 min/max-width 的影响的，自己实际运用的时候要注意哦

flex:shrink

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

同样附上 MDN 关于 flex:shrink 的描述。。哈哈

flex:grow 是拉伸填补空位，那么 flex:shrink 则是相对立的，它会收缩哦，也就是子元素的宽度要大于父元素的宽度

同样我们也来上一个栗子：
还是沿用上面的代码，但是我们得修改下 css

.left
    flex-shrink 1
    width 200px
    background red
.center
    flex-shrink 2
    width 300px
    background yellow
.right
    flex-shrink 3
    width 160px
    background green

相信聪明的你已经发现了吧，没错，200+300+160=660，这个值已经超出了父容器的 600 宽度了，这个时候，在实际运行中会是怎样的呢：

依旧来张图吧~

怎么样，都按照一定的比例自己收缩了吧，是不是很神奇~

flex:shrink 跟 flex:grow 的算法还是有一定差异的，这里有几个数值要注意(溢出值，总宽度)：

• 先计算出子元素的溢出值 200+300+160-600=60。
• 然后计算子元素的总宽度，2001+3002+160*3=1280
• 计算第一个方块的实际宽度：200 – 601(flex-shrink)200(width)/1280=190.62，第二个跟第三个不妨自己试着算算

这个算法是不是有点不好理解呢，其实总宽度就是把 flex:shrink 当作是份额，子元素是每一份，每一份 * 份额再相加，这样就算出了总宽度；然后再算出溢出值在每个子元素中占的份额，再用子元素的实际宽度减去溢出份额就得到实际宽度啦~

当然了，flex:shrink 也有小于 1 的情况，思考下，如果 shrink 大于 1 的情况，经过缩小刚好跟总宽度相等；那么如果小于 1 的时候会出现什么情况呢

来了来了他来了，

小于 1 的情况，子元素得不到充分的缩比，依旧会伸到容器外部

194.38 + 283.12 + 146.5 = 624，怎么样，虽然这个时候子元素依然有缩小，但是依旧大于父容器的 600，神奇吧

那么，这个时候是怎么计算的实际宽度呢：

• 先计算出子元素的溢出值 200+300+160-600=60
• 而这个时候得溢出值已经不能拿来直接计算了, 因为子元素的 flex-shrink 的总和没有 1，只有 0.6，此时的溢出值要用 60*0.6=36 来计算了
• 然后计算子元素的总宽度，2000.1+3000.2+160*0.3=128
• 计算第一个方块的实际宽度：200 – 360.1(flex-shrink)200(width)/128=194.38，第二个跟第三个不妨自己试着算算

当然啦，flex-shrink 也会受到 max/min-width 的影响哦

到此就结束了，大家可以根据自己的理解写个 demo 加深下记忆哦，谢谢

码农进阶题库, 每天一道面试题 or Js 小知识 https://www.javascriptc.com/interview-tips/

❤️ 看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！

关注公众号「IT 平头哥联盟 」，公众号后台回复「 资源」免费领取我精心整理的前端进阶资源教程

JS 中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容