2

最近我一直在玩Sciter，发现了非常有用的flowCSS 属性。除了将其列为 Sciter 功能并链接到本文之外，文档对此几乎没有什么可说的。

显然，这在浏览器中不起作用，并且查找有关该主题的更多信息相当困难。

我发现此功能非常有助于快速创建漂亮的布局，并且无需大惊小怪，因此我对在浏览器中可以使用的类似功能非常感兴趣。

基本上我有两个问题：

  1. 我可以在普通浏览器中使用类似的东西（例如，使用标准 CSS）吗？什么和如何？
  2. （主要是为了满足空闲的好奇心）除了 Sciter 之外，这个特殊的扩展是否用于其他任何东西？
4

1 回答 1

1

使用网站上的示例：

您可以这样做（为查看目的添加了背景：

p {
  margin-left: calc((100% - 40%) / (2 + 1) * 2);
  margin-right: calc((100% - 40%) / (2 + 1) * 1);
  background-color: #fdfcc1;
}
<p>... some text ...</p>

您可以使用任何值来实现它：

p {
  margin-left: calc((100% - ELEMENT_WIDTH) / (FLEX_VALUE_LEFT + FLEX_VALUE_RIGHT) * FLEX_VALUE_LEFT);
  margin-right: calc((100% - ELEMENT_WIDTH) / (FLEX_VALUE_LEFT + FLEX_VALUE_RIGHT) * FLEX_VALUE_RIGHT);
}

或者，如果您使用的是 SCSS，则可以执行以下操作：

$elem-width: 40%;
$flex-left: 2;
$flex-right: 1;

p {
  margin-left: calc((100% - $elem-width) / ($flex-left + $flex-right) * $flex-left);
  margin-right: calc((100% - $elem-width) / ($flex-left + $flex-right) * $flex-right);
}
于 2017-10-09T04:02:40.263 回答