关于flex-grow的陷阱

zhaochunqi 发布于2019-08-29 13:56 / 746人阅读

摘要：前一阵在使用布局进行宽度处理时，发现了并不是按照预期的情况进行比例处理，顿时觉得有点懵逼。对于一个来说，它的初始空间并不是，而是另一个属性值元素内容占用的空间。于是修改代码如下这样设置的比例就如我们所愿的显示出来了。

前一阵在使用flex布局进行宽度处理时，发现了flex-grow并不是按照预期的情况进行比例处理，顿时觉得有点懵逼。

在stackoverflow搜索之后，终于搞明白了其中的奥秘。

话不多说，直接上代码：

.flex-container {
    display: flex;
    width: 100%;
}
.flex-item {
    flex-grow: 1;
    list-style-type: none;
}
.big {
    flex-grow: 3;
}


    理论应该是小的三倍长
    但实际并不是这样

我们参照阮一峰的flex教程就可以看到对于这个属性的解释：

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

按照正常理解我们的代码没有问题啊，怎么比例并不是设置的那样呢？

重点来了，这里的剩余空间才是关键。
对于一个flex-item来说，它的初始空间并不是0，而是另一个属性值auto（元素内容占用的空间）。

这样就导致了我们设置了flex-grow的效果并不是将整个宽度进行等比例的拆分，而是对去除内容的宽度进行了比例划分。

而如果想要打到我们实际所想的效果，我们就需要使用flex属性来代替原来的。
因为根据MDN文档的描述，我们就知道了

flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，可以同时设置flex-grow,flex-shrink与flex-basis。

这样我们使用flex时只指定一个数字（宽度值会转化成flex-basis）时，flex-basis会自动转换为0%，而数字正好转换成了要设置的比例（flex-grow值）。

于是修改css代码如下：

.flex-item {
    flex: 1;
}
.big {
    flex: 3;
}

这样设置的比例就如我们所愿的显示出来了。

ps.stackoverflow原问题链接

GPU云服务器云服务器面试陷阱创业陷阱陷阱清单陷阱

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

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

Flexbox布局的正确使用姿势

摘要：分配空间原理影响布局分配空间的属性有三个，分别是和。伸缩项目扩展宽度项目容器宽度项目宽度或项目设置的总和对应的比例拉伸后伸缩项目宽度原伸缩项目宽度扩展宽度我们来计算一下上面栗子中第一个伸缩项目拉伸后的宽度。在项目中，我们还会大量使用到flexbox的新旧属性，但大多数人一般只会写新属性，旧属性交由autoprefixer处理，但其实完成同样功能的新旧属性表现形式却不尽相同。还有部分人...

GitCafe 2019-08-29 12:50 评论0 收藏0
Flex 布局

摘要：首先，实现布局需要先指定一个容器，任何一个容器都可以被指定为布局，这样容器内部的元素就可以使用来进行布局。注意当时设置布局之后，子元素的的属性将会失效。在没有接触Flex之前一直使用float、display、position 。说实话用起来非常恶心。当使用Flex时，我们可以简洁优雅实现复杂的页面布局 1、Flex 布局？showImg(https://segmentfault.c...

ShevaKuilin 2019-08-30 15:43 评论0 收藏0
关于flex-shrink如何计算的冷知识

摘要：先回顾一下假设有一个内包含三个子，宽度分别对于对于剩余空间分配比例的计算相信用过布局的都非常熟悉了。另外，我发现很多点赞数很多的文章，给出的计算公式是错误的。先回顾一下flex-grow 假设有一个div内包含三个子div1， div2, div3,宽度分别200px.对于flex-grow对于剩余空间分配比例的计算相信用过flex布局的都非常熟悉了。这里还是简单列一下计算公式：假设...

KaltZK 2019-08-29 17:00 评论0 收藏0
flex布局踩过的那些坑

摘要：接下来说说我踩过的那些坑布局版本兼容问题布局自提出之后，变化过好几个版本标志标志标志新增了对项的规定草案阶段兼容方案父级布局不用考虑其他属性都对应相关的版本方案，目前项目中是只写最新的方案，由自动添加兼容方案。接触H5项目后，开始了解到flex布局，功能非常之强大，用起来相当之舒服。基本的知识介绍就不说了，参考http://www.ruanyifeng.com/blo...。接下来...

刘玉平 2019-08-29 11:07 评论0 收藏0
Flexbox Guide

摘要：模型，通常被称为，是一种一维的布局模型。它将基于行或列控制布局，但不能同时控制布局。的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。那么超出的需要被消化通过收缩因子，所以加权综合可得。 showImg(https://segmentfault.com/img/remote/1460000016761795?w=871&h=559); Flexible Box ...

stefanieliang 2019-08-29 17:02 评论0 收藏0