Question

让我的Flexbox磁贴在Safari （对于这个purporse v10.0）的断点处堆叠时遇到一些麻烦。这是一个示例codepen，展示了我想要做的事情。

这里有很多关于同一主题的问答，但我还没有找到解决我具体问题的解决方案。我已经测试了供应商前缀＆amp;没有供应商前缀。删除calc（）和min-width属性！还有别的吗？以下是我试图做的事情......

.tile-container
   display: flex
   flex-wrap: wrap

.tile
   flex: 1
   margin: 3px
   padding: 2rem
   min-width: calc(25% - 0.75rem)
   min-height: 200px
   text-align: center
   color: #fff
   background: tomato

.tile-icon
   width: 100%
   max-width: 50px

.tile-title
   display: block
   padding-top: 10px

.tile-content
   margin-top: 30px

@media (max-width: 768px)
.tile
   width: 50%
   min-width: calc(50% - 0.75rem)
@media (max-width: 480px)
.tile
   min-width: calc(50% - 0.75rem)
@media (max-width: 380px)
.tile
   min-width: 100%

......物品应垂直堆放在较小的屏幕上，并水平放置在较大的屏幕上。但是，在Safari中，它始终是水平的，从不堆叠（当调整浏览器大小时）。

我可以提供后备选项，但我真的很喜欢帮助投资我可能会出错的地方。有人可以帮我理解我可能会忽略的内容吗？

Answer 1

所以我在尝试了更多......之后似乎找到了自己的答案。

似乎正在运行的解决方案不是flex: 1我能够flex: 1 0 calc(25% - 0.75rem)，而且结果符合预期。

希望这有助于你将来

Flexbox未在Safari中

1 个答案: