Sciter CSS＆＃39; flow＆＃39;属性浏览器替代品

Question

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

显然，这在浏览器中不起作用，找到关于这个主题的更多信息是相当困难的。

我发现这个功能非常有助于快速创建漂亮的布局，并且只需要少量的麻烦和麻烦，所以我对在浏览器中可以使用的任何类似内容非常感兴趣。

基本上我有两个问题：

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

Answer 1

使用网站上的示例：

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

＆＃13;

＆＃13;

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

＆＃13;

<p>... some text ...</p>

＆＃13;

＆＃13;

＆＃13;

你可以用任何值来实现它：

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