为什么离子设置网格`.col``display：block`和`width：100％`属性？

Question

当我阅读离子的_grid.scss源代码时。 我找到了这种风格：

.col {
  @include flex(1);
  display: block;
  padding: ($grid-padding-width / 2);
  width: 100%;
}

我删除了display:block;，width: 100%;也很有用。 那么，为什么离子把这些属性放在这里？

Answer 1

原因

其他课程或风格可能会覆盖您的情况，但不是所有情况。这会导致您的用例正常工作，但并不意味着每个用例都能正常工作。

在这种情况下，它实际上是flex规则的备份。旧浏览器不支持Flexbox，display: block;和width:100%;用作这些浏览器的后备规则。

<强>重现

导航至ionic grid

在屏幕右侧，您有一个带有col元素的手机示例。

检查其中一个col元素

禁用flex课程。这些是唯一的活跃类：

display: block;
padding: 5px;
width: 100%;

您会看到它似乎没有任何变化。