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

1、第一，我们先来认识下flow的主要布局有哪些：1、flow:vertical这种布局方式，就是比较传统的那种像是DIV一样的布局，从上到下，垂直布局方式如图所示：

3、flow:horizontal-flow这种布局其实是flow:horizontal布局的一种变化方式，不同的是，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部分表格被合并了，应该可以更好理解吧）如图所示：