为什么带有供应商前缀的 flexbox、justify-content 在 Safari 中不起作用？答案

【问题标题】：Why is flexbox, justify-content with vendor prefixes not working in safari?为什么带有供应商前缀的 flexbox、justify-content 在 Safari 中不起作用？
【发布时间】：2021-01-07 04:03:32
【问题描述】：

目标是使用display: flex; 和justify-content: right; 将图像定位到其容器的右侧。以下代码在 chrome 和 firefox 中运行良好，但在我测试过的所有 safari 版本中都没有。

我尝试过的事情：

检查了caniuse，这表明它应该适用于我测试过的所有版本。
通过 autoprefixer 运行 css 并添加这些内容。
已测试添加内联 css，没有任何变化。
在浏览器开发工具中打开和关闭样式以检查：除了 safari 中的 flexbox 样式外，一切都按预期工作。
隔离代码以排除冲突。
尝试了多个版本的 safari，包括 9.1.2（忘记检查其他版本的实际版本号，但它们是运行 catalina 和最新 iOS 的更新设备，因此假设 safari 13.x 或 14.x）。

这里是jsfiddle demo code

这里是html和css源代码：

HTML：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Safari - Flexbox Issue</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div class="container container-nav"></div>
            <div class="container container-home">
                <img alt="tree image - should be far right of container" src="https://www.clipartmax.com/png/full/3-31530_vector-clip-art-cedar-tree-clip-art.png">
            </div>
        </body>
    </html>

CSS：

    * {
        box-sizing: border-box;
    }
    
    html, body {
        height: 100%;
        min-height: 100%;
    }
    
    .container {
        max-width: 960px;
    }
    
    .container-nav {
        height: 80px;
    }
    
    .container-home {
        height: 40%;
        padding: 2em 4em 0 0;
      
        /* begin flexbox stuff */
      
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: right;
            -ms-flex-pack: right;
                justify-content: right;
    }
    
    img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
    }

非常感谢任何帮助。

【问题讨论】：

标签： html css flexbox safari

【解决方案1】：

当然样式应该是 justify-content: flex-end 以使内容向右对齐。

请注意，如果您使用 flex-direction:column，这将具有不同的布局 - 但对于简单布局 - flex-start 等同于行的开头（在 ltr 布局中左侧），而 flex-end 等同于结尾（右）。

.container-home {
    height: 40%;
    padding: 2em 4em 0 0;
  
    /* begin flexbox stuff */
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

这是 jsfiddle 的图像，其中进行了这些更改，并且预期对齐正确的图像

【讨论】：

非常感谢您解决了这个问题。我想知道为什么right 在其他浏览器中工作。 [找到这篇文章] (css-tricks.com/snippets/css/a-guide-to-flexbox);在justify-content 部分中，如果flex-direction 没有意义，则right 将表现得像start。所以我测试了将flex-direction 明确设置为row 并再次尝试right 但这没有用。真的很好奇，但对此有任何见解吗？
no -sorry - 我不知道 - flex-start / end 是我使用的全部，请注意，如果它是 flex-direction: column - 那么这将等同于 top/bottom 而不是 left/对。