“flex: auto;”是什么意思?

2023-12-20 10:14:50

flex 是复合属性,是flex-grow,flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后两个属性可选。

flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间也不放大
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(相当于我们设置的width)

而 flex: auto; 是 flex:1 1 auto; 的简写,即元素尺寸可以弹性增大,也可以弹性变小,具有十足的弹性,但在尺寸不足时会优先最大化内容尺寸。

使用场景:

当希望元素充分利用剩余空间,但是各自的尺寸按照各自内容进行分配的时候,适合使用 flex:auto。

flex:auto 多用于内容固定,或者内容可控的布局场景,例如导航数量不固定,每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现。

文章来源:https://blog.csdn.net/weixin_57837275/article/details/135099288
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。