请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

开发问题 flex-basis、flex-grow、flex-shrink不生效

0
回复
1151
查看
[复制链接]

2

主题

2

帖子

20

积分

 楼主| 2021-10-12 15:37:40 显示全部楼层 |阅读模式

在使用flex布局时,使用flex-basis、flex-grow、flex-shrink属性或与其他属性联动时,与W3C标准显示差距过大,并且有的无法生效,具体如下:

flex-basis:

垂直轴排列(flex-direction: column)时:flexbasis都无效。

水平轴排列(flex-direction: row)时:ux文件的真机显示情况: 有两层div(且外层div是column内层div是row)时(下图场景),无论设不设宽度,组件的宽度由flexbasis决定。 其他情况下,flexbasis都无效,组件宽度都由width决定。

flex-grow:

垂直轴排列时:宽度不会扩展,高度在屏幕有剩余空间时会扩展,无剩余空间(组件超出屏幕且可以滑动)时不会扩展。

水平轴排列时:高度不会扩展, 宽度只有一层div为row排列时会扩展,其他情况不会扩展。

flex-shrink:

flex-direction设置为非默认值时(div设为column,list设为row)flex-shrink不会生效。

flex-direction设置为默认值时,宽度会被压缩。





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册