父容器flex布局,子控件absult布局,会影响父容器的宽度
父容器flex布局,子控件absult布局,会影响父容器的宽度
应该是这样的:
实际是这样的:
父容器的宽度不是预想的宽度,变小了
原来的错误代码:
.kVideoCarrier { display: flex; flex-direction: column; width: 80%; /* flex-grow:0; flex-shrink:0; */ margin-right: 80rpx; background-color: brown; } .kvImageView { width: 100%; height: 200rpx; background-color: orange; position: relative; } .kvPlayIcon { position: absolute; width: 50rpx; height: 50rpx; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
正确代码:
.kVideoCarrier { display: flex; flex-direction: column; width: 80%; flex-grow:0; flex-shrink:0; margin-right: 80rpx; background-color: brown; } .kvImageView { width: 100%; height: 200rpx; background-color: orange; position: relative; } .kvPlayIcon { position: absolute; width: 50rpx; height: 50rpx; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
解释:
0
= don‘t grow (shorthand forflex-grow
) 不允许增长0
= don‘t shrink (shorthand forflex-shrink
) 不允许收缩
相关推荐
zhanghaibing00 2020-05-31
yuanye0 2020-05-20
葉無聞 2020-05-11
myloveqiqi 2020-05-02
wangjie 2020-02-12
wwwxuewen 2020-01-20
wangjie 2020-01-12
e度空间 2020-01-12
akcsdno 2019-12-26
MaureenChen 2019-12-01
随智阔 2014-01-13
jiedinghui 2019-11-10
somboy 2019-11-10
waterv 2019-11-09
wangjie 2019-11-04
ThikHome 2019-09-24
红壶吃猬队 2019-09-08
mokingone 2018-03-09