flexbox是如何拉伸的

时间：2023-03-31 02:07:28 CSS

下面这段代码，在页面上会如何显示呢？.flex-box{宽度：200px；高度：100px；显示：flex；}.box1{宽度：100px；背景色：#ccc;}.box2{flex:1;background-color:skyblue;

halgjlajlgjlajglajghahahhahahhahahaha

这是一个常见的左侧使用了固定宽度，右侧使用了自适应的用法，浏览器是如何计算宽度的？很多人可能会有疑问：为什么.box1设置了宽度，但还是被挤压了？以flex如何拉伸为例，有如下例子：.flex-box{width:400px;高度：100px；显示：flex；}.box1{宽度：200px；背景色：红色；}.box2{宽度：200px；背景色：绿色；}.box3{宽度：400px；背景颜色：蓝色；

父容器中的子元素有一个初始宽度，如何确定初始宽度下面说明如果按照初始宽度放在普通父容器中，那么会溢出400像素。当父元素显示：flex；默认情况下，子框flex-shrink:1，box1、box2、box3都具有可收缩的特性。flex-shrink定义的只是一个减少元素宽度的权重组件。每个元素收缩多少还有另一个重要因素，那就是它自己的宽度。显示尺寸是这样计算的：总重量为1x200+1x200+1x400=800；三个元素分别收缩：400x1(flex-shrink)x200(width)/800=100400x1(flex-shrink)x200(width)/800=100400x1(flex-shrink)x400(width))/800=200box1的显示尺寸为：box1defaultwidth-100=100;box2的显示尺寸为：box2defaultwidth-100=100;box3的显示尺寸为：box3默认宽度-200=200；它仍然很容易理解。同样，当元素不足以填满父元素时，需要拉伸的宽度也是这样计算的。只是比例尺底变成了剩余空间的宽度。这时候需要将子元素的flex-grow设置为1，因为子框的flex-grow默认为0。不同的是，每个元素在拉伸时的权重是元素的flex-grow的值。如果你想让元素不可伸缩或者不可伸缩，那么你需要将相应的属性设置为0。比如：flex-shrink:0,flex-grow:0。flex-basis,width,content决定了初始宽度flex-basis用于计算上一节中元素的“初始宽度”。当flex-basis为auto时，初始宽度为设置的宽度值或元素内容大小（盒模型中占用的宽度）。当flex-basis为像素值时，初始宽度为flex-basis的值。当flex-basis为百分比时，初始宽度为父容器的比例。当flex-basis为0或0%时，初始宽度为0。常用flex设置：stylefelx-growflex-shinkflex-basisflexdefault01autoflex:1110%flex:auto11autoflex:none00autoflex-basis属性初始化flexchild的尺寸在任何空间分配发生之前。初始宽度优先级：flex-basis>width>content，最终大小会受到min-width和max-width的约束现在来回答文章开头的第一个问题，浏览器是怎么计算的。box1初始大小为100px，box2初始大小为0，然后还有剩余大小100，box1占0，box2占1，所以剩余大小分配给box2==这些表现就是widthofthesub-boxcontentwillnotexceed当子框的宽度很宽时，一切看起来都顺风顺水，但是当某个子框的内容宽度超过了子框的宽度时，就会开始争夺地盘。==上面两节讲了剩余空间的获取和分配，但是实际中有些元素并没有乖乖服从分配，所以需要找出不符合分配的成员，重新计算分配的空间。flex子元素如何竞争？在实践中，收缩行为往往会给你合理的结果。您通常不希望您的内容完全消失，或者文本框小于其最小内容。同样，拉伸行为也希望尽可能多地展示内容。除非有明确的宽度相关设置，否则尺寸不会主动超过容器宽度。但是也有一些特殊情况，比如连续的英文数字，??很长；或者内联元素设置为white-space:nowrap。如果内容超出，按照显示规则，元素不会乖乖服从分配的空间，它会占用剩余的空间，这肯定会涉及到其他子元素的收缩，但不管是拉伸还是收缩，它会受到max-width和Min-width约束的影响。但是如果父框承载不了子框的内容，那就只能真的溢出了。所谓不满足分配的成员是指分配后的空间<内容。当成员不满足分配时，则该成员的最终值为内容。因为这个成员超出了，其他成员需要重新分配多余的空间。请参见以下示例：.flex-box{width:300px;高度：100px；显示：flex;}.flex-box>div{flex:11auto;}.box1{width:200px;}这里box1的初始值为200，box2和box3的初始值为0，那么剩下的空间为100，则33将分别分配给box1、box2、box3，则box1、box2、box3分别为233、33、33。flex-box{宽度：300px;高度：100px；显示：flex;}.flex-box>div{flex:110%;}.box1{width:200px;}box1、box2、box3初始值均为0，则剩余空间为300，将给box1，box2，box3分别分配100，则box1，box2，box3分别为100，100，100。此时去掉box1的宽度，给box1添加一个200px的内容，上面两个例子如何呈现？.flex-box{宽度：300px；身高：100像素；显示：flex;}.flex-box>div{flex:11auto;这里box1的初始值是200，box2的初始值和box3为0，则剩余空间为100，33将分别分配给box1、box2、box3，则box1、box2、box3分别为233、33、33。flex-box{宽度：300px;高度：100px；显示：弹性；}。flex-box>div{flex:110%;这里box1、box2、box3的初始值为0，那么剩余空间为300,将给box1,box2和box3分别分配100,但是box1的内容被拉伸到200,box1需要拉伸,对应的box2和box2需要重新分配空间(-100px),两者的在允许范围内拉伸和压缩，其中box1需要拉伸100px，对应的box2和box3分别压缩50px，最终呈现为box1、box2、box3分别为200、50、50。这个时候再回头看看例子的开头。box1的初始值为100，box2的初始值为0，box1flex:0,box2flex:1，然后剩下的空间给box2，box1是可收缩的box，box2它是一个可扩展的盒子。当box2的内容超出原来的空间时，会拉伸，box1会相应收缩。那么如何避免这种情况呢？方法一：给box1设置最小宽度min-width方法二：给box1设置flex-shink:0方法三：从content开始处理，给box2设置word-break:break-all

上一篇：【静态页面架构】CSS盒子模型

下一篇：前端面试日更多答案2020-03-12

flexbox是如何拉伸的相关文章