在使用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设置为默认值时,宽度会被压缩。
|