哪个浏览器是正确的关于css3 flex
在试用css3 flex-box proporty之后，我很快注意到Chrome和Firefox中的一些差异。
特别是：如果你在一个应该是flex的元素上设置一个宽度，firefox会根据它所需的元素来弹出元素，它将宽度样式考虑进去，但它只是一个变量。
Chrome会充分尊重款式，
一个例子：
<div id="box">
<div class="flex-box">Test</div>
<div class="flex-box">Test Text</div>
</div>
如果箱子内的2个div具有相同的宽度，铬将使它们具有相同的尺寸。 Firefox会重新调整第二个div需要更多空间，因此它会得到更多的分配。
谁是对的？
请记住，flex不适用于宽度，它在适用于确定最小固有宽度后的可用空间。 这在几种常见情况下会产生违反直觉的结果，正如www风格的邮件列表所指出的那样。 我发现，除非你想要CSS重新排序或多行（这还没有在Firefox和Chrome中实现），你认为你想要使用的display: box和box-flex你真的想要使用display: table和display: table-cell 。
但回到你的实际问题：如果你设置了像素的宽度，我发现Firefox和Chrome的显示方式是相同的，但如果你将宽度设置为百分比，则不会。 至于目前哪种浏览器正确地做到了这一点，公平地打赌，Firefox正在实现规范最初的目标，因为原始规范描述了XUL属性的作用，而XUL属性就是这些基础的内容。 正如其他人所说的，最终规范是否最终符合这一初衷是未知的。
我不认为任何浏览器是对还是错，因为flexbox仍然是一个工作草案。 在任何时候，规范都可能改变并渲染另一个浏览器是对还是错。
http://www.w3.org/TR/css3-flexbox/
我不同意robertc的声明“但是回到你的实际问题：如果你设置一个像素宽度，我发现Firefox和Chrome的显示方式是相同的，但如果你设置一个百分比宽度，则不会。”
我目前使用flexbox试图展示将JS和CSS网站中相当沉重的内容转换为非常简单的HTML / CSS3网站是多么简单。 一旦结论，我已经谈到以像素为单位设置宽度：
#main {
display: box;
}
#main > section {
width: 120px;
padding: 10px;
border: 5px solid #000;
}
在chrome中，总宽度= 120 + 20 + 10 = 150px在ff中，总宽度= 120px（20px填充位于120和10px边框内）
我发现另一个不一致的地方，在Chrome中，#main是贪婪的，占用了100％，就像你可能期望的那样。 在Firefox中，您需要在#main上设置为100％，以便按照您的预期行事。
我仍在努力消除所有支持的浏览器中的所有差异，我会在我有更多补充的时候尝试发布。 可悲的是，就像他的flexbox模型一样酷，并且很容易，因为它使得很多狗屎，它很不一致。
还有一件事，使用CSS转换来更改尺寸可以很好地适用于明确定义的尺寸（即像素）......但是如果尺寸是由框的flex定义的，则动画只是在flex值之间跳转......没有接近平滑（虽然，而不是弯曲5和1，你可以弯曲500和100）。 事实上，chrome不会在flex值之间动画，只是跳跃。 FF另一方面很好地做到了这一点。
我只是真的希望事情进展到FF处理flexbox的方式，而chrome是接近的，我只是不同意如何处理一些事情，flex数据之间缺乏动画只是简单的吸引。
链接地址: http://www.djcxy.com/p/75603.html