Sciter CSS 'flow' 属性浏览器替代品

Question

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

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

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

基本上我有两个问题：

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

Answer 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);
}