Safari 上的 Flexbox 布局在移动视图中不起作用答案

【问题标题】：Flexbox layout on Safari not working in mobile viewSafari 上的 Flexbox 布局在移动视图中不起作用
【发布时间】：2020-10-22 03:20:50
【问题描述】：

我正在为我的网站使用@angular/flex-layout 和@angular/material，但是在使用 safari 时我的移动布局出现了问题。

只有当窗口足够小以适应 md 或 xs 规则时才会发生这种情况

在 Chrome 上看起来像这样：

但在 Safari 上看起来像这样：

【问题讨论】：

【解决方案1】：

我找到了问题所在。

我必须将flex: 1 0 auto !important; 添加到未正确填写的父级。

【讨论】：

【解决方案2】：

如果您使用@angular/flex-layout，请尝试利用现有的fxFlex 选项，而不是使用 CSS 覆盖样式。

同样的 CSS flex: 1 0 auto !important 也可以由 fxFlex="noshrink" 完成

【讨论】：