我想在flexbox中有一个Square div。所以我用:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
在Chrome中可以正常使用。但是在Firefox中,父级只压缩一行。
如何在Firefox中解决此问题?我使用版本44。
更新
flexbox规范已更新。
4.2。 Flex项目边距和填充
弹性项目(如方块框上的项目)的边距和填充百分比将根据其包含的块的内联大小进行解析,例如,在水平书写模式下,左/右/上/下百分比均根据其包含的块的宽度进行解析。
原始答案-适用于2018年之前发布的FF和Edge版本
根据 flexbox规范:
作者应避免在弹性项目的填充或边距中完全使用百分比,因为它们在不同的浏览器中会出现不同的行为。
还有更多:
4.2。 Flex项目边距和填充
可以根据以下任一条件解决弹性项目上的边距和填充百分比:
用户代理必须选择以下两种行为之一。
注意:这种差异很糟,但是可以准确地捕获当前的状态(实现之间没有共识,CSSWG内部也没有共识)。CSSWG的意图是浏览器将集中于其中一种行为,届时将对规范进行修订。
问题内容: 如果您查看CSS盒模型规范,将会观察到以下内容: [margin]百分比是相对于所生成的盒子的包含块的 宽度 来计算的。 请注意,“ margin-top”和“ margin- bottom”也是如此。 如果包含块的宽度取决于此元素,则结果布局在CSS 2.1中未定义。 (强调我的) 确实是这样。但是 为什么 呢?到底什么会迫使任何人以这种方式设计它?很容易想到您想要的场景,例如,某件
问题内容: 我有两个div,高度为90%,但显示方式有所不同。 我试图在它们周围放一个外部div,但这没有帮助。另外,在Firefox,Chrome,Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗? 下面是我的代码: 问题答案: 使用(视口高度)代替百分比。它将获取浏览器的高度并相应地调整其大小,例如 试试这个代码 与CSS
问题内容: 我有两个div,高度为90%,但显示方式有所不同。 我试图在它们周围放一个外部div,但这没有帮助。此外,在Firefox,Chrome,Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗? 下面是我的代码: 问题答案: 使用(视口高度)代替百分比。它将获取浏览器的高度并相应地调整其大小,例如 试试这个代码 与CSS
问题内容: 为什么百分比值不起作用,但是百分比值却起作用呢? 端部的宽度为视口的80%,但端部的高度为0。 问题答案: 块元素的高度默认为块内容的高度。因此,给定这样的东西: 将生长到足以容纳段落的高度,并且将生长到足以容纳段落的高度。 当您将高度或宽度指定为百分比时,这是相对于元素父级的百分比。对于宽度,除非另有说明,否则所有块元素的宽度一直与其父元素一样,一直到;因此,块元素的宽度与它的内容无
问题内容: 我正在尝试向元素内的display:flex元素添加填充。如果将填充定义为百分比,则在Firefox中不会显示填充,尽管在中定义时会显示px。两种情况在Chrome中都可以正常工作。 问题答案: 网格/弹性百分比 该小组试图研究如何定义垂直百分比边距和填充。注意:传统上,CSS的顶部和底部页边距是针对包含块的宽度而不是其高度进行解析的,这具有一些有用的效果,但通常令人惊讶。现有的布局模
问题内容: 我一直在绞尽脑汁使用以下命令在CSS中创建垂直对齐方式 尽管这似乎适用于这种情况,但令我感到惊讶的是,当我增加或减小基本div的宽度时,垂直对齐方式会对齐。我期望当我设置padding- top属性时,会将填充值作为父容器高度的百分比(在我们的示例中为基数),但是上述50%的值是按宽度。:( 有没有一种方法可以将填充和/或边距设置为高度的百分比,而无需使用JavaScript? 问题答