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

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

1、flow:vertical

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

如图所示：

2、flow:horizontal

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

如图所示：

3、flow:horizontal-flow

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

如图所示：

4、flow:vertical-flow

这样的布局是一种多列布局方式，类似与flow:horizontal-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部分表格被合并了，应该可以更好理解吧）

如图所示：

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>