深入理解Flex布局——flex-grow&flex-shrink&flex-basis

时间：2023-03-30 23:38:00 CSS

欢迎来到我的公众号锐谈获取我的最新文章：1.前言最近遇到一个Flex布局的问题，在project，才发现自己对它的理解还很肤浅，不知道如何处理一些特殊情况。于是找了一些资料深入研究，然后把自己的学习心得总结成这篇文章。2.问题还原首先说一下我遇到的问题。希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应：实现起来很简单，代码如下：左

中

右

。容器{显示：flex；宽度：自动；高度：300px；背景：灰色；}.left{flex-basis：200px；背景：线性渐变（到右下角，绿色，白色）；}.middle{flex:1;背景：线性渐变（到右下角，黄色，白色）；}.right{flex-basis：300px；background:linear-gradient(tobottomright,purple,white);}到目前为止一切顺利。但是当中间部分的内容很长时，UI会变形：为了固定左右部分的宽度，需要给左右加上flex-shrink:0。但是添加之后，容器的宽度被拉长了，页面底部出现了滚动条：而我期望的效果是滚动条出现在中间部分，无法滚动整个页面。解决方法是添加overflow:scrolltomiddle:此时完整代码如下：left中间longright.container{display:柔性;宽度：自动；高度：300px；背景：灰色；}.left{flex-basis：200px；伸缩收缩：0；背景：线性渐变（到右下角，绿色，白色）；}.middle{flex:1;溢出：滚动；背景：线性渐变（到右下角，黄色，白色）;}.right{flex-basis:300px;伸缩收缩：0；background:linear-gradient(tobottomright,purple,white);}.long{width:800px;}完整的codepen实践经验到此结束，下面我们来详细了解一下涉及到的知识点。三、知识点说一下上面用到的属性flex：1、其实是一个缩写，相当于flex:110，即flex-grow:1；伸缩收缩：1；弹性基础：0；flex-grow表示当有剩余空间时，分配给item的比例flex-shrink表示当空间不足时，item收缩的比例flex-basis表示分配空间前主轴占用的空间.下面说一下flex空间分配的步骤。flex-grow（默认值0）假设有一个宽度为800的容器，里面有3个item，宽度分别为100、200、300：左中右。容器{显示：flex；宽度：800px；高度：300px；背景：灰色；}.left{flex-basis：100px；背景：线性渐变（到右下角，绿色，白色）;}.middle{flex-basis：200px;背景：线性渐变（到右下角，黄色，白色）;}.right{flex-basis:300px;background:linear-gradient(tobottomright,purple,white);}效果如下：此时多出200空间（灰色部分）。此时如果我们将left、middle、right分别设置flex-grow为2、1、1，则每一项的计算逻辑如下：首先将多余的空间200除以4（2+1+1),等于50left=100+2x50=200middle=200+1x50=250right=300+1x50=350flex-shrink(默认值1)假设父容器的宽度调整为550，里面还有3个项目，宽度分别是100、200、300，这时候空间不够溢出了。首先我们要明白，当我们定义一个固定宽度的容器为flex时，flex会尽量不改变容器的宽度，而是压缩item的宽度。这时候我们把left、middle、right分别设置为1、2、3。计算逻辑如下：溢出空间=100+200+300-550=50总重量=1x100+2x200+3x300=1400left=100-(50x1x100/1400)=96.42middle=200-(50x2x200/1400)=185.72right=300-(50x3x300/1400)=267.86如果我们不希望项目被压缩，则必须将flex-shrink设置为0。还是用上面的例子，当left,middle,right的flex-shrink为0时，会突破宽度限制，容器的宽度会从550变为600。codepen这里的flex-basis(默认值auto)flex-basis指定项目的主轴占用的空间。如果不设置，则等于内容本身的空间：4.总结本文从问题出发，讲解Flex布局在实战中的应用。并深入flex-grow、flex-shrink和flex-basis的细节，描述了在padding和overflow的情况下itemspace是如何计算的，希望对你有所帮助。

上一篇：css变量_0

下一篇：在前端设置任何颜色作为主题颜色（不需要预先指定几种固定颜色），在吐血整理

深入理解Flex布局——flex-grow&flex-shrink&flex-basis相关文章