父容器flex布局，子控件absult布局，会影响父容器的宽度

时间：2020-03-01 10:33:24 阅读：81 评论：0 收藏：0 [点我收藏+]

应该是这样的：

技术分享图片

实际是这样的：

技术分享图片

父容器的宽度不是预想的宽度，变小了

原来的错误代码：

.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 for flex-grow) 不允许增长
0 = don‘t shrink (shorthand for flex-shrink) 不允许收缩

https://stackoverflow.com/questions/23794713/how-can-i-have-two-fixed-width-columns-with-one-flexible-column-in-the-center

父容器flex布局，子控件absult布局，会影响父容器的宽度

原文：https://www.cnblogs.com/tufei7/p/12388345.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)