弹性盒子布局flex属性,flex grow shrink basis

flex-grow、flex-shrink、flex-basis三个属性的作用：

　　在flex布局中，当父元素宽度不同时，子元素如何分配父元素的空间？

　　(注意：这三个属性都设置在子元素上。下面小编讲的是父元素，指的是flex中布局的元素(display:flex))

　　以下是如何快速记住这三个属性：

　　首先，它是flex-basis。basis在英语里是主要成分的意思，所以他和width放在一起的时候，一定要杀width。basis遇到width会说我是主要成分，你是次要成分，所以你见到我就靠边站。

　　其次，flex-grow，英文的意思是扩大，扩大，增加，意思是当父元素的宽度大于子元素的宽度之和，并且父元素有盈余的时候，那么，flex-grow就会说我要成长，我要成长，我要怎么成长？当然是共享母元素的空间。请参见下面第二个属性的内容。

　　最后是flex-shrink，英文意思是收缩。这意味着当父元素宽度小于子元素宽度之和，超过父元素宽度时，Flex-shrink会说外界太苦。我还是回到父亲的怀抱吧！因此，伸缩会按照一定的比例收缩。参见下面第三个属性的内容。

第一个属性：flex-basis

　　该属性用于设置元素的宽度。其实宽度也可以设置。如果在元素上同时设置了宽度和弹性基准，宽度值将被弹性基准覆盖。

　　style type= text/CSS media= screen 。box { display:flex；边距：100px自动；宽度：400px高度：200px} .内部{宽度：200px高度：100px弹性基础：300像素；背景：粉色；}/style/headbydivclass= box div class= inner /div/div/body见下图：边肖我设置宽度为width:200 px；弹性基础：300像素；结果显示属性flex-basis应用于子元素。内心；

第二个属性：flex-grow

　　该属性用于设置当父元素的宽度大于所有子元素的宽度之和时，子元素如何分配父元素的剩余空间(即父元素将拥有剩余空间)。flex-grow的默认值是0，这意味着该元素不需要父元素的剩余空间。如果值大于0，表示自讨苦吃。价值越大，需求越大。

　　例如：父元素是400像素宽，有两个子元素：A和B，A是100像素宽，B是200像素宽。可用空间为400-(100 200)=100px。如果A和B都没有请求剩余空间，则有100px的空闲空间。

　　body div class= box div class= inner /div div class= inner 1 /div/div/body . box { display:flex；弯曲方向：行；边距：100px自动；宽度：400px高度：200px边框：1px纯红；} .内部{ flex-basis:100p x；高度：100px背景：粉色；} . inner 1 { flex-basis:200 px；高度：100px背景：蓝色；}见下图：

　　如果A要求剩余空间：设置flex-grow为1，B不要求。a的最终大小是它自己的宽度(100px)和剩余空间的宽度(100px)=200px。内部{ flex-basis:100p x；高度：100px背景：粉色；伸缩增长：1；} . inner 1 { flex-basis:200 px；高度：100px背景：蓝色；}见下图：

　　如果A和B都被设置为要求剩余空间，则A将flex-grow设置为1，B将flex-grow设置为2。那么A的最终大小就是A得到的剩余空间的宽度(100px)(100px(1/(1 ^ 2))，B的最终大小就是B得到的剩余空间的宽度(100px(2/(1 ^ 2))(这里边肖只给出公式，朋友们可以自己算)。内部{ flex-basis:100p x；高度：100px背景：粉色；伸缩增长：1；} . inner 1 { flex-basis:200 px；高度：100px背景：蓝色；伸缩增长：2；}见下图：

第三个属性：flex-shrink

　　该属性用于设置当父元素的宽度小于所有子元素的宽度之和(即子元素将超过父元素)时，子元素如何减少其自身的宽度。flex-shrink的默认值为1。当父元素的宽度小于所有子元素的宽度之和时，子元素的宽度将减小。该值越大，减少越严重。如果值为0，则表示没有减少。

　　例如，父元素是400像素宽，有两个子元素：A和B。A是200像素宽，B是300像素宽。那么，A和B超出父元素的总宽度为(200 ^ 300)-400=100px。如果A和B都不减小宽度，即都将flex-shrink设置为0，则100px的宽度将超过父元素。box { display:flex；弯曲方向：行；边距：100px自动；宽度：400px高度：200px边框：1px纯红；} .内部{ flex-basis:200 px；高度：100px背景：黑色；伸缩：0；} . inner 1 { flex-basis:300 px；高度：100px背景：蓝色；伸缩：0；}见下图：

　　如果a不减小宽度：将flex-shrink设置为0，b减小。那么B的最终大小就是自己的宽度(300px)-超过父元素的总宽度(100px)=200px。内部{ flex-basis:200 px；高度：100px背景：黑色；伸缩：0；} . inner 1 { flex-basis:300 px；高度：100px背景：蓝色；伸缩：1；}见下图：

　　如果A和B都减小了宽度，则A将伸缩量设置为3，B将伸缩量设置为2。那么A的最终大小就是自己的宽度(200px)- A的缩减宽度(100 px *(200 px * 3/(200 * 3 300 * 2))=150 px，B的最终大小就是自己的宽度(300px)- B的缩减宽度(100px * (300px * 2/()。内部{ flex-basis:200 px；高度：100px背景：黑色；伸缩：3；} . inner 1 { flex-basis:300 px；高度：100px背景：蓝色；伸缩：2；}见下图：

　　这里先说清楚。flex是flex-grow、Flex-Shrink和Flex-Basis的缩写(注意小写的顺序)。你可以记住以下缩写规则：

　　例如，如果flex的值为none，则计算值为0 0 auto，等效如下：item { flex:none；}.item { flex-grow:0；伸缩：0；弹性基础：自动；}当flex的值为auto时，计算出的值为1 1 auto，等效如下：item { flex:auto；}.item { flex-grow:1；伸缩：1；弹性基础：自动；}当flex的值为非负数时，数字为flex-grow，flex-shrink为1，flex-basis为0%。以下内容是等效的：item { flex:1；}.item { flex-grow:1；伸缩：1；弹性基础：0%；}当flex的值为长度或百分比时，视为flex-basis，flex-grow为1，flex-shrink为1，具有以下等价性(注意0%是百分比而不是非负数):第1项{弹性：0%；}.项目-1 { flex-grow:1；伸缩：1；弹性基础：0%；} .item-2 { flex:24px；} .项目-2 { flex-grow:1；伸缩：1；flex-basis:24px；}当flex的值为两个非负数时，分别视为flex-grow和flex-shrink的值，flex-basis的值为0%，等价如下：item { flex:2 3；} .item { flex-grow:2；伸缩：3；弹性基础：0%；}当flex的值为非负数和长度或百分比时，分别视为flex-grow和flex-basis的值，flex-shrink的值为1，等价如下：item { flex:233322 px；} .item { flex-grow:2333；伸缩：1；flex-basis:3222 px；}就是这样。这篇关于css弹性盒flex-grow，flex-shrink和flex-basis的详细解释的文章在这里。有关flex-grow、flex-shrink和flex-basis的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。