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"这种方式就是以一种”矩阵方式“让你的布局来实现，每个布局bloc娱浣嫁装k做为一个单元格形式存在例如：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>