关于css3 flex box，哪个浏览器是正确的？

在尝试了css3 flex box的比例之后，我很快注意到Chrome和Firefox的一些差异

特别是：如果您在一个元素上设置了一个宽度，该宽度应为flex， firefox将根据需要调整元素，它考虑了宽度样式，但它只是一个变量

Chrome将充分尊重其风格

例如：

<div id="box">
  <div class="flex-box">Test</div>
  <div class="flex-box">Test Text</div>
</div>

试验
测试文本

如果框内的两个div具有相同的指定宽度，则镀铬将使它们具有相同的大小。Firefox将重新认识到第二个div需要更多的空间，因此它得到了更多的分配

---

谁是对的？

我不认为任何浏览器是对的还是错的，因为flexbox仍然是一个工作草案。在任何时候，规范都可能更改，并呈现另一个浏览器的对错

---

请记住，flex不适用于宽度，它适用于确定最小固有宽度后的可用空间。在几种常见情况下，这会产生反直觉的结果。我发现，除非你想要CSS重新排序或多行（这在Firefox和Chrome中还没有实现），否则你认为你想要使用的是

display:box

和

box flex

，因为你真的想要使用

display:table

和

display:table cell

---

但回到你的实际问题：我发现Firefox和Chrome的显示方式完全相同，如果你是，但如果你是。就目前哪个浏览器做得正确而言，Firefox肯定实现了规范最初的意图，因为原始规范描述了XUL属性的功能，而XUL属性正是这一切的基础。正如其他人所提到的，最终规范是否符合这一初衷还不得而知。

我不同意robertc的说法“但回到你的实际问题：如果你以像素为单位设置宽度，我发现Firefox和Chrome的显示是相同的，但如果你以百分比为单位设置宽度，则不会。”

我目前正在使用flexbox，试图展示将一个相当繁重的JS和CSS站点转换为一个非常简单的HTML/CSS3站点是多么简单。关于以像素为单位设置宽度，我得出了一个结论：

#main {
  display: box;
}

#main > section {
  width: 120px;
  padding: 10px;
  border: 5px solid #000;
}

在铬合金中，总宽度=120+20+10=150px 在ff中，总宽度=120px（20px填充位于120内，10px边框也位于120内）

我发现的另一个不一致之处是，在chrome中，#main是贪婪的，占据了100%，正如您可能预期的那样。在Firefox中，您需要将#main设置为100%，以使其按预期运行

我仍在努力消除所有受支持浏览器中的所有差异，当我有更多内容要添加时，我会尝试发布。可悲的是，尽管flexbox模型很酷，而且很容易制造出很多狗屎，但它还远远没有一致性

还有一件事，使用CSS转换来更改维度可以很好地处理明确定义的维度（即像素）。。。但是，如果尺寸是由长方体的柔体定义的，则动画只是在柔体值之间跳跃。。。没有接近平滑的地方（不过，可以使用500和100的弯曲代替5和1的起伏弯曲）。事实上，chrome不会在flex值之间设置动画，只是跳跃。另一方面，FF做得很好

---

我真的希望事情能像FF处理flexbox那样发展，虽然chrome很接近，但我不同意某些事情是如何处理的，flex值之间缺乏动画真是糟糕透了。

请记住，即使其中一个现在是，将来也可能会出错。也就是说，你查阅过说明书了吗？我做了，但在那里找不到答案（要么不在那里，要么我只是理解得不够好，无法找到答案，要么两者兼而有之），所以我想我应该在这里问一下，