虽然我在flexbox容器的子元素上设置了百分比宽度，但Safari似乎忽略了它们，或者至少使它们略有不同。这意味着当连续3个项目时，只显示2个项目。
此处显示问题的CodePen：http://codepen.io/moy/pen/BWLKbo
如您所见，在桌面上，每个列表项的宽度应为33.33333％。这不会发生在第一行吗？值得注意的是，我的前缀是使用Autoprefixer添加的。
一旦从display: flex中删除.mosaic，列表项就会排成行。所以它是导致它的flexbox。我需要这个以确保所有列表项都连续相同。
我尝试使用另一篇文章中提到的flex: 1 0 auto;，但似乎并没有解决这种情况。我没有经常使用flexbox所以我的知识非常基础，所以可能需要更改值？
希望有人可以帮忙解决这个问题！ ：）
答案 0 :(得分：2)
看起来问题是由于：before /：after伪元素被渲染为＆＃39; solid＆＃39;或者有某种形式的内容。因此，设置width: 0;或content: normal;似乎可以解决问题。
因此在容器上CSS（scss）将是：
.mosaic {
@include clearfix;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 $vertical-spacing;
padding-left: 0;
width: 100%;
&:before,
&:after {
content: normal;
}
}
希望能帮到别人！一个非常讨厌和令人沮丧的bug！ ：）
答案 1 :(得分：1)
这似乎是布局引擎中某些种类的舍入错误。
至少在移动设备上我可以通过将宽度更改为33%而不是33.33333%来使其工作。
如果这不会干扰页面上的其他设计，那可能就是解决方案。