为什么离子集电网``.col`显示：block`和`宽度：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%;

你会看到，它似乎没有什么变化。