阮一峰flex,flex:1 表达的含义

阮一峰flex,flex:1 表达的含义

阮一峰flex目录

flex布局中单个子元素区别于其他子元素的主轴对其方式实现

flex:1 表达的含义

阮一峰的博客中有一些关于Flex的文章,如下:

以上是阮一峰博客中关于Flex的一些文章,希望对你有帮助。”

flex布局中单个子元素区别于其他子元素的主轴对其方式实现

在flex布局中,我们使用父级元素的 display 和 justify-content 来实现flex布局,并设定主轴对其方式,这两个属性详见 flex布局-阮一峰

这时设置了 justify-content 以后,所有的子元素都沿着主轴起始位置对齐,如果某一个子元素需要沿其他方向,比如主轴是横轴,方向是从左向右,这样设置以后,所有子元素都在左边向右边排列,如果我某一个子元素需要放在最右边,而不是和其他子元素一样顺着排列,应该如何实现?

对于交叉轴的方向,有 align-center 属性设置,而子元素的 align-self 属性可以覆盖这个属性,设置属于子元素自身的交叉在对齐方向。

但主轴的对其方向则没有这个属性。

我可以通过设置需要区别于其他方向的子元素的前一个兄弟元素的margin来实现这个需求。

比如

flex:1 表达的含义

flex 布局,我相信大家都非常熟悉, 但是要说到 flex:1 表达的含义,我相信很多同学说不出来。

很多同学入门flex 的时候,应该都是看了 阮一峰的flex 科普文章

想要梳理清晰flex:1的含义,我们先学习下flex 这个css属性表达了哪些含义

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

后两个属性可选。

从这里就可以推导出

相当于

我一开始理解的也是这样。

后面的分析会推翻我这里的结论

flex-basis 也是一个比较难理解的点,我写了 深入理解flex-basis 来梳理这个知识点,不懂得可以查看。

这里我们重点解析flex:1。

我写了一个简单的demo 来提供分析:

我们看下浏览器输出的效果:

可以看到,无论内容是多少,我们都实现等分。

我们看下控制台:

发现:

其实相当于:

看另一个例子:

浏览器显示效果:

依然是等分

再来一个类似的例子:

浏览器显示效果:

依然是等分

从以上的分析调试,我们可以初步分析

接下来,看下 flex: 1 1 auto 的效果

浏览器显示效果:

没有等分

写到这里,我们在细细品味下flex-basic的含义

auto 表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照剩余的空间,等比例缩放

如果随便设置一个其他带有长度单位的数字呢, 例如

又因为 c1.width = c2.width = c3.width,所以最终的效果就是 c1, c2, c3 进行了等分缩放。

给TA打赏
共{{data.count}}人
人已打赏
python

comparable的意思,comparable什么意思? comparative什么意思

2024-3-30 10:58:23

python

h5css3新特性,HTML5都有哪些新特性呢?

2024-3-30 11:01:28

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
打开微信,扫描左侧二维码,关注【旅游人lvyouren】,发送【101】获取验证码,输入获取到的验证码即可解锁复制功能,解锁之后可复制网站任意一篇文章,验证码每月更新一次。
提交