在Flex中绝对使用flexbox进行定位 [英] Absolutely positioning with flexbox in Safari

问题描述

根据caniuse的说法，Safari对FlexBox有全面的支持。

我只是想用flexbox堆叠一些不同大小的div。我真的很好奇，为什么这在Chrome / Firefox，但不在Safari浏览器：
$ b

 < ; div class =container> 
< div class =inner-one>< / div> 
< div class =inner-two>< / div> 
< / div> 
  

.container {
width：15rem;
height：15rem;
border-radius：50％;
background-color：blue;

display：flex;
align-items：center;
justify-content：center;
}

.container div {
position：absolute;
}

.inner-one {
width：13rem;
身高：13rem;
border-radius：50％;
background-color：green;
}

.inner-two {
width：11rem;
height：11rem;
border-radius：50％;
background-color：purple;



请参阅JSFiddle： https://jsfiddle.net/19n95exf/3/

解决方案 position：absolute; break 显示：flex ，使用 transform：translate 改为

.container {position：relative;宽度：15rem;身高：15cm;边界半径：50％;背景颜色：蓝色; } .container div {border-radius：50％;位置：绝对;顶部：50％;剩下：50％;变换：翻译（-50％， - 50％）; } .inner-one {width：13rem;身高：13rem;背景颜色：绿色; } .inner-two {width：11rem;身高：11rem;背景颜色：紫色; }

< div class =container> < div class =inner-one>< / div> < div class =inner-two>< / div> < / div>





---

或给内部元素一个左/顶值

.container {width：15rem;身高：15cm;边界半径：50％;背景颜色：蓝色;显示：flex; align-items：center; justify-content：center; } .container div {border-radius：50％;位置：绝对; } .inner-one {left：1.5rem;顶部：1.5rem;宽度：13rem;身高：13rem;背景颜色：绿色; } .inner-two {left：2.5rem;顶部：2.5rem;宽度：11rem;身高：11rem;背景颜色：紫色; }

< div class =container> < div class =inner-one>< / div> < div class =inner-two>< / div>< / div>

$ b

Safari has full support for FlexBox according to caniuse.

I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:

<div class="container">
  <div class="inner-one"></div>
  <div class="inner-two"></div>
</div>

.container {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background-color: blue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.container div {
  position: absolute;
}

.inner-one {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background-color: green;
}

.inner-two {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background-color: purple;
}

See JSFiddle here: https://jsfiddle.net/19n95exf/3/

解决方案

Because position: absolute; break display: flex, use transform: translate instead

    .container {
      position: relative;
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .inner-one {
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

    <div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
    </div>

---

Or give the inner elements a left/top value

    .container {
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
    }

    .inner-one {
      left: 1.5rem;
      top: 1.5rem;
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      left: 2.5rem;
      top: 2.5rem;
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

<div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
</div>

这篇关于在Flex中绝对使用flexbox进行定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！