在Safari上Flexbox没有按预期包装。我做错了什么？

在Safari上，Flexbox布局可能会出现不按预期包装的问题。这可能是由于以下原因导致的：

1. 浏览器兼容性问题：不同浏览器对Flexbox布局的支持程度不同，Safari可能对某些Flexbox属性的解析存在差异。这可能导致在Safari上的表现与其他浏览器不一致。
2. Flexbox属性的使用错误：Flexbox布局有一系列属性，如flex-direction、justify-content、align-items等，用于控制子元素的排列方式。可能是你在使用这些属性时出现了错误，导致布局不符合预期。

解决这个问题的方法如下：

1. 检查浏览器兼容性：首先，确保你使用的Safari版本是最新的，并且支持Flexbox布局。可以通过查看Safari的官方文档或开发者工具来了解其对Flexbox的支持情况。
2. 检查Flexbox属性的使用：仔细检查你在Flexbox容器和子元素上应用的属性，确保它们按照预期工作。特别注意Safari对某些属性的解析可能与其他浏览器不同，需要做相应的调整。
3. 使用浏览器前缀：为了增加浏览器兼容性，可以尝试在Flexbox属性前添加浏览器前缀。例如，对于display: flex;属性，可以添加-webkit-前缀，即display: -webkit-flex;。这样可以确保在Safari上正确解析Flexbox属性。
4. 使用Polyfill或框架：如果以上方法无法解决问题，可以考虑使用Flexbox的Polyfill或使用支持更好的CSS框架，如Bootstrap或Foundation等。这些工具可以提供更好的浏览器兼容性和一致的布局效果。

总结起来，要解决在Safari上Flexbox布局不按预期包装的问题，需要检查浏览器兼容性、Flexbox属性的使用是否正确，并考虑使用浏览器前缀、Polyfill或框架等方法来解决。