达州做网站

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在flex布局中计算flex-grow与flex-shrink

本篇文章为大家展示了怎么在flex布局中计算flex-grow与flex-shrink，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都网站建设、做网站介绍好的网站是理念、设计和技术的结合。创新互联拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度/高度的是三个属性：
flex-basis, flex-grow, flex-shrink.

flex-basis

flex-basis 决定了项目占据主轴的空间，除非使用 box-sizing 进行设置，否则它将设置内容框的大小，因此当你指定一个flex项的大小时需要额外小心，因为它很肯能包含内边距与边框。

你可以为其指定一个具体的CSS尺寸值，也可以指定其占据父元素的百分比，它的默认值为 auto(根据内容自动调整大小)



  
    100px

200px

10%

20% 30% auto

怎么在flex布局中计算flex-grow与flex-shrink

flex-grow

flex-grow 设置当 flex 容器存在剩余空间(flex容器的大小减去所有flex项的大小之和)时项目的放大比例，它的默认值为 0 (即使存在剩余空间也不放大)。如果所有项目的 flex-grow 属性值都是相同的，则它们将等分剩余空间，否则，将根据不同的属性值所定义的比率进行分配。

例如，主轴长度为600px, 项目1占据50px, 项目2占据100px, 项目3占据150px, 则剩余空间为：600px - (50px + 100px + 150px) = 300px

假如每个项目的 flex-grow 属性值都相同(例如都为1)，则所有项目分配到相同的剩余空间：
- 项目1: 300px * (1 / (1 + 1 + 1)) = 100px;
- 项目2: 300px * (1 / (1 + 1 + 1)) = 100px;
- 项目3: 300px * (1 / (1 + 1 + 1)) = 100px;

  

  
    50px + 100px
    100px + 100px
    150px + 100px

怎么在flex布局中计算flex-grow与flex-shrink

假设每个项目的 flex-grow 属性的值并不都是相同的，例如项目1为 1, 项目2为 2, 项目3为 3, 则它们分配到的剩余空间分别为：
- 项目1: 300px * (1 / (1 + 2 + 3)) = 50px;
- 项目2: 300px * (2 / (1 + 2 + 3)) = 100px;
- 项目3: 300px * (3 / (1 + 2 + 3)) = 150px;

  

  
    50px + 50px
    100px + 100px
    150px + 150px

怎么在flex布局中计算flex-grow与flex-shrink

要是属性值为小数怎么办呢？这里分两种情况：
1. 所有flex项的 flex-gorw 属性值之和大于1，仍然按照上述方式进行计算；
2. 所有flex项的 flex-gorw 属性值之和小于1，基值按照1来进行计算，例如项目1为 0.2, 项目2为 0.3, 项目3为 0.4, 则它们分配到的剩余空间分别为：
- 项目1: 300px * (0.2 / 1) = 60px;
- 项目2: 300px * (0.3 / 1) = 90px;
- 项目3: 300px * (0.4 / 1) = 120px;

 

  
    50px + 60px
    100px + 90px
    150px + 120px

怎么在flex布局中计算flex-grow与flex-shrink

同样的，当 flex-shrink 的值为小数时，也分两种情况：
1. 所有flex项的 flex-shrink 属性值之和大于1，仍然按照上述方式进行计算；
2. 所有flex项的 flex-shrink 属性值之和小于1，只收缩溢出空间的一部分，例如项目1为 0.1, 项目2为 0.3, 项目3为 0.2, 则总的收缩空间为：
300px * (0.1 + 0.3 + 0.2) = 180px　　
每个项的权重计算方式是不变的，每个项目分别缩小：
- 项目1: 180px * 0.05 = 9px;
- 项目2: 180px * 0.45 = 81px;
- 项目3: 180px * 0.50 = 90px;

 

  
    100px - 9px
    300px - 135px
    500px - 90px

怎么在flex布局中计算flex-grow与flex-shrink

由于只收缩了溢出空间的一部分，div 内的元素总宽度实际上是超出 div 的宽度的。

以上就是关于使用flex布局中 flex-grow 与 flex-shrink 计算方式的简单介绍。

上述内容就是怎么在flex布局中计算flex-grow与flex-shrink，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

文章题目：怎么在flex布局中计算flex-grow与flex-shrink
地址分享：http://dzwzjz.com/article/jcghds.html

其他资讯

服务热线：028-86922220