flex-item属性之flex-grow、flex-shrink了解下

Simon_Zhou 发布于2019-08-30 15:47 / 925人阅读

摘要：容器仍然是，灰灰，小橘，需要一起减掉才可以。但是灰灰和小橘的瘦身能力明显不一样，他们设置了不同的，分别为和。瘦掉的这需要平分到灰灰加上小橘身上的每一个上。

前言

flex布局，想必css江湖上的各位侠士都用得很多了，那我们今天就来说说flex-item下的几个不太常用的属性吧（其实是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。

从容貌上来看，grow，shrink，grow，shrink，哎呦，这不就是我一年下来减肥长胖减肥长胖的节奏么？╭∩╮（￣▽￣）╭∩╮
从字面上的意思来看，就是对flex-item进行身材的改变，很符合flex自适应的概念嘛。那这两个属性到底是有来嘛意思，有什么用呢？下面就来了解下喽。

参照物

flex-grow、flex-shrink、flex-basis三姐妹可以被flex属性直接囊括了，flex：flex-grow flex-shrink flex-basis, eg, flex: 0 1 auto;说好的只了解这两个属性的，为什么又来了个flex-basis?因为人身材变胖变瘦是要有对照物的嘛，需要和原装元素进行对比才可以。

flex-basis指item的content宽度，和属性width有着相同的作用，不过两者有着不同的优先级。

如果flex-basis和width同时设置了数值，则以flex-basis为准；

如果flex-basis设置为auto且width设置了确切的宽度值，以width设置的宽度值为准；

如果flex-basis设置为auto且width没有设置，则flex-basis以实际内容的宽度值为准;

一起变成张惠妹

好了，那我们已经有了基本的对照参考值，即容器内item的初始值宽度。我们看一下下面的这个例子:
父容器container宽度为600px，两个子元素的宽度分别为300px、100px，那么父容器在横轴上并没有被完全填满，但是就是想任性的不想其他人看到元素背后的绿色怎么办~，这个时候我们就用上了flex-grow，让元素都自己变胖一点喽。

http://jsfiddle.net/HqRunMan/...

分别对两个子元素设置了flex-grow，要胖当然是大家一起变胖啦。但是flex-grow不一样，也就是说两个元素的肥胖因子不太一样， flex-grow越大，被分配余下空间的宽度就越大。

remaining（剩余分配空间）: 600px - 300px - 100px = 200px

一起变胖的承受能力: 1 + 2 = 3

子元素灰灰需要接纳的肉肉宽度: (200 * 1 / 3) px =  66.67px    
灰灰新的身体宽度= 300px + 66.67px = 366.67px;

子元素小橘需要接纳的肉肉宽度: (200 * 2 /3) px = 133.33px   
小橘新的身体宽度= 100px + 133.33px = 233.33px;

瘦成闪电的誓言还在么

让我们想象一下，子元素灰灰和小橘在幸福的生活中，越来愈胖，突然有天他们回家发现这个家的大小再也容不下他们了。伤心欲绝的他们决定使出自己与生俱来的瘦身本领，拿起flex-shrink，一道金光闪过，终于这个家可以容下他们了。

http://jsfiddle.net/HqRunMan/...

容器仍然是600px，灰灰500px，小橘300px，需要一起减掉200px才可以。但是灰灰和小橘的瘦身能力明显不一样，他们设置了不同的flex-shrink，分别为1和3。谁的瘦身能力强，谁就多瘦一点喽。瘦掉的这200px需要平分到灰灰加上小橘身上的每一个px上。

remaining 需要分配的空间：600px - 500px - 300px = -200px

所有px一起变瘦的能力： 1 * 500 + 3 * 300 = 1400

子元素灰灰需要减掉的肉肉宽度 =（ -200 *  （1 * 500)/1400 ）px = -71.42px
瘦身后的灰灰宽度 = 500px -71.42px = 428.58px

子元素小橘需要减掉的肉肉宽度 =（ -200 *  （3 * 300)/1400 ）px = -128.57px
瘦身后的小橘宽度 = 300px - 128.57px = 171.42px

应用一下

讲到这里，不得不动手实现一个老生常谈的题目了“实现一个两列布局”，脑子里飞速旋转一下， BFC、负margin、绝对定位、浮动+calc，还有就是使用flex属性啦，代码check下:

http://jsfiddle.net/HqRunMan/...

左边栏定宽，设置flex: 0 0 auto；关闭了flex-grow和flex-shrink功能，宽度不会随着resize改变；
右侧内容，设置flex：1 1 auto；随着resize自适应宽度。

总结

flex-basis可以当宽度来使用，但是要考虑好和width的优先级；

自适应过程中，flex-grow可以使得未填满的宽度被元素瓜分占据；flex-shrink可以使得容器空间不够大的子元素瘦身。

超融合服务器服务器托管 flex-shrink 了解了解淘宝了解云计算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116390.html

新手flex布局入门篇，看这篇文章就够了

摘要：提纲介绍盒子模型什么是基础项目实战视频源码链接介绍参考文档什么是层叠样式表是层叠样式表的缩写。布局简称，布局是中一种新的布局模式，用于改进传统模式中标签对齐方向以及排序等等缺陷。主要用设置在容器里面严着主轴的排列方式。提纲 CSS介绍盒子模型什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

xinhaip 2019-08-05 17:55 评论0 收藏0
新手flex布局入门篇，看这篇文章就够了

摘要：提纲介绍盒子模型什么是基础项目实战视频源码链接介绍参考文档什么是层叠样式表是层叠样式表的缩写。布局简称，布局是中一种新的布局模式，用于改进传统模式中标签对齐方向以及排序等等缺陷。主要用设置在容器里面严着主轴的排列方式。提纲 CSS介绍盒子模型什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

Lionad-Morotar 2019-08-29 12:51 评论0 收藏0
CSS || flex笔记

摘要：五个取值与主轴方向有关默认值左对齐右对齐居中两端对其，间的间隔距离相等每个两侧的间隔相等，相当于设置左右值相等。默认值为即使存在剩余空间宽度，也不放大。默认值为，表示本来的大小。 Flex布局 Flex是flexible box的简称，纯粹用来布局的属性 1 flex和inline-flex 任何容器都可以知道为Flex布局，块级元素使用display: flex; ；行内元素使用i...

huhud 2019-08-29 12:16 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

felix0913 2019-08-23 15:29 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

huangjinnan 2019-08-23 15:28 评论0 收藏0