Question

我想在flexbox中有一个方形div。所以我用：

> g$heights
 [1] 5.5pt                                                       1grobheight                                                
 [3] sum(0.2cm, sum(0.15cm, 0.8128cm, 0cm, 0.15cm), 0.2cm)+0.2cm 0.2                                                        
 [5] 1null                                                       0cm                                                        
 [7] 0.193302891933029cm                                         0.2                                                        
 [9] 1null                                                       0cm                                                        
[11] 0.193302891933029cm                                         0.2                                                        
[13] 1null                                                       0cm                                                        
[15] 0.193302891933029cm                                         0.2                                                        
[17] 1null                                                       0.456194824961948cm                                        
[19] 0cm                                                         1grobheight                                                
[21] 5.5pt

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}

这在Chrome中运行良好。但在Firefox中，父母只挤到一行。

如何在Firefox中解决此问题？我使用的是44版。

您还可以在https://jsbin.com/lakoxi/edit?html,css

查看代码

Answer 1

2018年更新

Flexbox规范已更新。

4.2. Flex Item Margins and Paddings

弹性项目的边距和填充百分比，如块上的那些   框，根据其包含块的内联大小进行解析，   例如左/右/上/下百分比全部解决他们的问题   在水平书写模式中包含块的宽度。

原始答案 - 适用于2018年之前发布的FF和Edge版本

来自flexbox specification：

作者应该完全避免在弹性项目中使用填充或边距的百分比，因为它们会在不同的浏览器中获得不同的行为。

还有一些：

4.2. Flex Item Margins and Paddings

Flex项目的边距和填充百分比可以通过以下任一方式解决：


他们自己的轴（左/右百分比分解宽度，顶部/底部分辨高度），或，

内联轴（左/右/上/下百分比全部解析宽度）


用户代理必须选择以下两种行为之一。

注意：这种差异很糟糕，但它准确地捕获了当前的世界状态（实现之间没有达成共识，CSSWG内部没有达成共识）。这是CSSWG的意图，浏览器将收集其中一个行为，此时规范将被修改。

Answer 2

除了Michael_B's answer之外，还有一个可行的解决方法。

使用百分比时，我们经常将其与视口宽度联系起来，因此，考虑到这一点，视口单元vw / vh可以是一个选项，因为它的工作方式类似（响应）。

Stack snippet

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50vw;
}

<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

根据评论更新

如果必须使用正方形，并且无法使用视口单元或脚本，则使用虚拟图像是另一种技巧。

注意，作为图像，SVG或Base64也可以用作datauri来节省额外的往返服务

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
}
.inner img {
  display: block;
  width: 100%;
  visibility: hidden;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/10" alt="">
  </div>
</div>

为什么Firefox和Edge中的填充项目的百分比填充/边距不起作用？

2 个答案: