为什么 ionic 设置网格 `.col` `display:block` 和 `width: 100%` 属性？答案

【问题标题】：Why ionic set the grid `.col` `display:block` and `width: 100%` properties?为什么 ionic 设置网格 `.col` `display:block` 和 `width: 100%` 属性？
【发布时间】：2016-11-14 06:47:37
【问题描述】：

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

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

我删除了display:block; 和width: 100%; 也很好用。那么，为什么 ionic 将这些属性放在这里呢？

【问题讨论】：

标签： css ionic-framework sass flexbox

【解决方案1】：

原因

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

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

复制

导航到ionic grid

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

检查其中一个col 元素

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

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

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

【讨论】：

我建议进行编辑。我认为“后备”是比“黑客”更合适的术语，你不同意吗，因为“黑客”似乎指的是 CSS hack 或与 CSS hack 混淆，例如只有旧版浏览器才能识别的前置字符，例如 * 或 \ 9.
@cjross 同意并更新。下次，您实际上可以单击“编辑”按钮并编辑问题。这样你就可以得到 2 个代表。