Css Flex自动边距在Chrome和Safari中的表现不同

在Chrome和Safari中打开此页面，我们可以看到不同之处

在Safari中，“数学”关键字不像Chrome那样位于右侧

此外，Chrome和Safari中的

item-3

div的宽度也不同

我的问题是为什么它在Safari中有所不同，以及修复方法是什么（我希望CSS修复

item-3

）

flex-wrap:wrap

不是可接受的解决方案

.main容器{
显示器：flex；
弯曲方向：立柱；
宽度：400px；
高度：300px；
边框：1px纯红；
}
.项目-1{
显示器：flex；
边框：1px纯蓝色；
}
.项目-2{
显示器：flex；
边框：1px纯绿色；
}
.项目-3{
显示器：flex；
左边距：自动！重要；
边框：2倍纯黄色；
}

物理
化学
数学

由于

左边距：自动

将弹性项目包装到右侧，因此

.item-3

的宽度不同于其同级项目。这是flex自动边距的正常行为

在Safari中，左边距不起作用的原因是一个谜/错误

但是，对于跨浏览器支持，在这种情况下，有一种简单的flex替代自动边距：

align self:flex end

.main容器{
显示器：flex；
弯曲方向：立柱；
宽度：400px；
高度：300px；
边框：1px纯红；
}
.项目-1{
显示器：flex；
边框：1px纯蓝色；
}
.项目-2{
显示器：flex；
边框：1px纯绿色；
}
.项目-3{
显示器：flex；
自对齐：柔性端；/*新*/
边框：2倍纯黄色；
}

物理
化学
数学