Sciter CSS'流'属性浏览器替代

最近我一直在玩Sciter，并发现了令人难以置信的有用的flow CSS属性。该文档没有多少关于它的说法，请将其列为Sciter功能，并链接到this article。Sciter CSS'流'属性浏览器替代

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

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

基本上我有两个问题：

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

来源

2017-10-09 Milo Christiansen

您的要求的方式，它看起来像你问类似的东西是为“类似的东西”快速阅读中的Sciter。我删除了我的投票结束。抱歉。 – Rob

啊，我可以看到它是如何被读取的。稍微编辑一下这个问题来澄清这个问题。 –

使用从网站的例子：

你可以这样做（背景增加了观赏用途：

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-09 04:02:40 Booligoosh

我很确定那不会有相同的效果。完全一样。所有这些都是定位一个项目，它不会像'流程'那样定位项目的子项目。此外，它似乎并没有根据彼此的立场来妥善安置儿童。 –

AFAIK使用这些公式可以使用JavaScript来做某些事情，但这不是我正在寻找的。仍然有趣，虽然... –

@MiloChristiansen这个https://sciter.com/docs/flex-flow/flex-layout.htm是我的W3C CSS工作组添加到CSS的建议。试图说服人们，但当时谷歌正在推动他们自己的柔性盒。所以flexbox http://www.w3.org/TR/css-flexbox-1/是我们应得的唯一。 –

Sciter CSS'流'属性浏览器替代

回答

相关问题