htmlayout设计ui 基础篇：[9]flow详细用法

来源：互联网 2023-03-16 19:19:20 版权归原作者所有，如有侵权，请联系我们

flow做为Sciter布局管理器，它定义的元素如何更好的布局，来实现我们想要的效果。

使用它，我们可以更方便的来实现，元素之间的布局管理，不用再使用原来那种只用DIV层来定义位置及实现方式。

它也可以叫做柔性流，顾名思义，就是可以自由的，随意的而局，自由性比较高。

今天我们来说下：如何用flow来更好的对元素进行布局，实现我们自定义的布局

工具/原料

Sciter v.3

方法/步骤

第一，我们先来认识下flow的主要布局有哪些：

1、flow:vertical

这种布局方式，就是比较传统的那种像是DIV一样的布局，从上到下，垂直布局方式

如图所示：

htmlayout设计ui 基础篇：[9]flow详细用法

1相关内容未经授权抓取自百度经验

2、flow:horizontal

这样的布局，就是布局在一行上，所有的元素一个接一个的按一行来排列

如图所示：

htmlayout设计ui 基础篇：[9]flow详细用法

3、flow:horizontal-flow

这种布局其实是flow:horizontal布局的一种变化方式，不同的是，flow:horizontal-flow允许折行，当布局空间宽度不够的时候，它可以自动“流”到下一行，继续显示布局元素

如图所示：

htmlayout设计ui 基础篇：[9]flow详细用法

4、flow:vertical-flow

这样的布局是一种多列布局方式，类似与flow:horizontal-flow布局，当空间不够的时候，可以自动“流”布局。

不同的是，不再是垂直方向，从上到下的"流"布局

而是，垂直方面空间不够的情况下，它可以自动”流“到下一列，以更多"列"的方式显示

如图所示：

htmlayout设计ui 基础篇：[9]flow详细用法

5、flow:"template"

这种方式就是以一种”矩阵方式“让你的布局来实现，每个布局block做为一个单元格形式存在

例如：

flow:"a a a"

"b c e"

"d c e"

"d c f";

li:nth-child(1) { float:"a"; }

li:nth-child(2) { float:"b"; width:150px;height:max-intrinsic; }

li:nth-child(3) { float:"c"; width:*; height:*; }

li:nth-child(4) { float:"d";width:150px;height:*; }

li:nth-child(5) { float:"e";width:150px;height:*; }

li:nth-child(6) { float:"f";width:150px;height:150px; }

就是以矩阵图显示，每一个矩阵单元，做为一个DIV写对应的样式就可以了

相同的矩阵样式，例如上面的”第二行第二列和第三行第二列都是C“,你就可以认为这2个位置其实就是一个DIV而已（可以把它看成一个表格，就是这2部分表格被合并了，应该可以更好理解吧）

如图所示：

htmlayout设计ui 基础篇：[9]flow详细用法

6、flow: row(tag1, tag2, ...)

这个row就是一行的多个元素，可以直接用它来布局

比如下面这个布局：都是前面的”文字 input“的格式来实现的，而且它们是在一行上的，我们就可以用这个flow：row()来实现布局

样式代码：

.element_layout {

flow:row(label,input);

}

布局代码：

div .element_spacing>

form>

div>

label>选片师编号：/label>

input />

/div>

div .element_spacing>

form>

div>

label>选片师姓名：/label>

input />

/div>

htmlayout设计ui 基础篇：[9]flow详细用法

自定义滚动条|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：如何使用html语言做导航栏下一篇：html5的特点剖析

htmlayout设计ui 基础篇：[9]flow详细用法

工具/原料

方法/步骤

热门文章

标签列表