弹性项目的百分比保证金应该如何工作？答案

【问题标题】：How should percentual margin work on flex items?弹性项目的百分比保证金应该如何工作？
【发布时间】：2016-02-19 06:33:55
【问题描述】：

尝试向 flex 容器内的项目添加百分比 margin-top，我注意到 Firefox 和 Chrome 之间存在不一致。

如果 flex 项声明 margin-top: 25%，Firefox 会将其解释为将其置于父项高度的 25%（本例中为 25 像素）：

如果改变父元素的宽度，子元素不会垂直移动，我觉得这很直观。

但是当我在 Chrome 中尝试相同时，我发现边距顶部被视为父级 width 的 25%（本例中为 50 像素）：

如果父元素的宽度发生变化，子元素会向上或向下移动，我觉得对于声明为距离顶部 25% 的元素来说这真的很奇怪。

现在，正确的行为是什么？哪个浏览器搞砸了？

【问题讨论】：

标签： css flexbox

【解决方案1】：

根据spec

弹性项目上的百分比边距和填充总是根据它们各自的尺寸解决；与块不同，它们并不总是针对其包含块的内联维度进行解析。

注意：此行为目前存在争议，并且可能会在本规范的未来版本中更改以匹配块的行为。

哪个浏览器搞砸了？

如您所见...两者兼而有之。 :)

【讨论】：

Greaaaaat，所以 Firefox 是按照规范来做的，但是 Chrome 想把它改成不那么直观的行为（为了与旧的古怪行为保持一致），所以它以不同的方式实现 flexbox，鉴于 Chrome 的市场份额主导地位，它可能最终会导致规范发生变化:(
你会感到惊讶。工作组可能比您想象的更明智。