Flex CSS 导致与 flex 属性不同的行为答案

【问题标题】：Flex CSS resulting in different behavior than flex propertiesFlex CSS 导致与 flex 属性不同的行为
【发布时间】：2017-08-11 03:04:11
【问题描述】：

我正在尝试使用有角材料和弹性盒创建一个粘性页脚。看起来我已经成功地在我的主要内容元素上使用了flex-grow: 1 !important;，但它只有在我在具有style="" 属性的元素上使用该代码时才有效。应用相同规则的其他选项不起作用：

看起来 angularJS 或 Angular Material 都覆盖了我的设置，style="" 属性除外。我该如何改变这种行为？

我怀疑 Angular Material javascript 将我的 flex-grow 属性设置为 0，而我希望它为 1，因为无论我使用 CSS 和 flex 属性尝试什么，该属性在页面加载时始终为 0 .我对吗？这样做有充分的理由吗？

编辑：我找到了多个关于如何创建粘性页脚的示例，但它们都不适合我。我找到的唯一解决方案是具有上述样式属性的解决方案，我想要一个更简单的解决方案。

例如，我不能让这个工作，因为它会将 flex-grow 值设置为 0。

【问题讨论】：

【解决方案1】：

我不确定您为什么要在同一个声明中使用 flex: none 和 flex-grow: 1。

flex: none 分解为：

然后你用flex-grow: 1覆盖上面的flex-grow

您应该合并这两个规则。看起来像这样：flex: 1 0 auto

【讨论】：

我一发布问题就意识到了这一点。我现在看到我的解决方案有效，因为它强制flex-grow: 1;。它仍然只适用于样式属性。编辑：没关系。您的规则与 !important 结合使用似乎有效。
感谢您解释 flex-grow 是 flex 的一部分，我还不知道。您的解决方案在没有 !important 标记的单独 CSS 中工作，这就是我想要的。当您在同一个元素中覆盖规则时，似乎 flex 有一些时髦的交互，但这不是不可接受的。
flex 属性是：flex-grow、flex-shrink、flex-basis 的简写。
我的主要元素如下所示：<main class="md-padding" layout="row" style="flex:none; flex-grow:1;">。那行得通，并且在任何其他位置定义的相同的 flex 规则集都行不通。但是你的回答基本上是定义我想要做的事情的正确方式，你的规则在我需要的每一种方式中都有效。