【flex布局】关于"同一元素设置absolute之后flex不生效"的问题

标签: 前端  css  flex

今天碰到个问题,在firefox56下,同一元素同时设置position:relative和display:flex之后,flex居然不生效了,感觉很奇怪,百度了发现,有很多小伙伴碰到的是“同一元素设置absolute之后flex不生效”的问题,于是自己试了下,想看看是不是同一个原因。

“同一元素设置absolute之后flex不生效”

HTML代码

  <div class="parent">
    <div class="child"></div>
  </div>

CSS代码

 .parent{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      /* width: 100%; */
      height: 500px;
      border: plum solid 1px;
    }
 .child{
      width: 100px;
      height: 100px;
      background: pink;
    }

效果如下
flex居中失效
以下就把class='parent’的元素称为父元素,class=‘child’的元素称为子元素

的确出现了flex的居中不生效的问题,网上的解决方案一般是在父元素上在套一个盒子,外层盒子使用绝对定位内层盒子使用flex布局,但是仔细想想,其实不用这么麻烦。

更简单的解决方案

父元素设置了绝对定位之后,如果没有宽度,父元素宽度为0,如果有子元素,父元素宽度就会和子元素宽度一致,那么这个时候在父元素中想使用flex布局当然不生效呀,所以只需要给父元素再加一个宽度就可以了
此时child居中

设置为relative也失效的问题

那么我的问题和这个一样么?本来我以为是一样的,但是父元素设置relative后,不会改变父元素的宽度呀,并且自己在chrom下和更高版本的firefox下尝试了下都么有这个问题,那可能就是firefox56的问题了?

原文链接:加载失败,请重新获取