Safari浏览器显示flex问题

Safari浏览器在较早的版本中对于Flex布局的支持存在一些问题，但随着版本的更新，这些问题已经得到了很大程度的修复

1. 确保使用正确的前缀

Safari浏览器可能需要添加-webkit-前缀以支持某些Flex相关的CSS属性。例如：

.container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

2. 检查Flex属性的兼容性

某些Flex属性在不同版本的Safari浏览器中可能存在兼容性问题。请查阅Can I use网站，了解您正在使用的Flex属性在Safari浏览器中的兼容性。

3. 使用Autoprefixer

Autoprefixer是一个PostCSS插件，它可以自动为CSS代码添加浏览器前缀。这可以帮助您解决Safari浏览器中的一些兼容性问题。要使用Autoprefixer，请按照以下步骤操作：

1. 安装Autoprefixer：

npm install autoprefixer --save-dev

1. 在项目中创建一个名为postcss.config.js的文件，并添加以下内容：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

1. 在构建过程中运行PostCSS。如果您使用的是Webpack，可以在webpack.config.js文件中添加以下内容：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

4. 使用Flexbugs

Flexbugs是一个收集了Flex布局相关已知问题的GitHub仓库。您可以在这里找到一些针对Safari浏览器的解决方案：

https://github.com/philipwalton/flexbugs

5. 更新Safari浏览器

确保您的Safari浏览器已更新到最新版本。新版本的Safari浏览器对Flex布局的支持已经得到了很大程度的修复。