为什么Firefox的flex项目没有百分比填充/边距？ [英] Why doesn't percentage padding / margin work on flex items in Firefox?

问题描述

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

 
 
 
 
 
宽度：100％; background：blue;}。inner {width：50％;背景：黄色; padding-bottom：50％;}  
 
 < div class = 外 > < div class =inner> < a取代;和合< / A> < / div>< / div>  

在Chrome中。但在Firefox中，父母只挤到一行。



我如何在Firefox中解决这个问题？我使用版本44。

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

解决方案

从柔性盒规格：

$ b

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

以下是更多内容：

4.2。 Flex项目的边距和填充

弹性项目上的边距和填充可以通过以下任一方式解决：

• 它们自己的坐标轴（左/右百分比分辨宽度，顶部/底部分辨高度），或者
  
• 左/右/上/下百分比都与宽度有关）
  
  $ b

  用户代理必须选择这两种行为之一。注意：这种差异是很糟糕的，但它准确地反映了当前世界的状况（实现中没有达成共识，CSSWG也没有达成共识）。这是CSSWG的意图，浏览器将会收敛在其中的一个行为，在这个时候规范将被修改。

  
  

I want to have a square div inside a flexbox. So I use:

.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>

This works fine in Chrome. But in Firefox, the parent squeezes to just one line.

How do I solve this in Firefox? I use version 44.

You can also view the code at https://jsbin.com/lakoxi/edit?html,css

解决方案

From the flexbox specification:

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

Here's some more:

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.

这篇关于为什么Firefox的flex项目没有百分比填充/边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！