Html 为什么带有供应商前缀的flexbox、justify内容在safari中不起作用？

目标是使用

display:flex将图像定位到其容器的右侧和
证明内容：右。以下代码在chrome和firefox中运行良好，但在我测试过的所有safari版本中都没有

我尝试过的事情：

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

以下是html和css源代码：

HTML:


Safari-Flexbox问题

CSS:

*{
框大小：边框框；
}
html，正文{
身高：100%；
最小高度：100%；
}
.集装箱{
最大宽度：960像素；
}
.货柜导航{
高度：80px；
}
.货柜屋{
身高：40%；
填充：2em 4em 0；
/*开始使用flexbox*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒子包：右；
-ms flex pack：对；
证明内容：正确；
}
img{
最大高度：100%；
最大宽度：100%；
高度：自动；
}

非常感谢您的帮助。
当然，样式应该是调整内容：flex end，以使内容正确对齐

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

这是一个JSFIDLE的图像，其中包含了所做的更改，并且应该是右对齐的图像
非常感谢您解决了这个问题。我想知道为什么
right
在其他浏览器中工作。[找到这篇文章]（）；在
justify content
一节中，如果
right
与
flex direction
不符，则它的行为类似于
start
。因此，我明确地测试了将
flex direction
设置为
row
，然后再次尝试
right
，但没有成功。真的很好奇，但对此有什么见解吗？没有-对不起-我不知道-我只使用flex开始/结束，请注意，如果使用flex方向：列-那么它将等同于顶部/底部，而不是左/右。
.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;
}