HTMLayout flow布局样式

quicker

http://bbs.aardio.com/doc/htmlayout/HTMLLayoutDocMx3.htm

布局方向

direction: ltr;  /* 从左到右布局 */

direction: rtl;  /* 从右到左布局 */

自适应高度和自适应宽度

width: 50%%;

height: 100%%;

使用双百分号表示占用剩余空间的比例.

margin 和 padding 等属性也可以使用 %% 单位.
       100%% 也可以用 * 号表示

垂直/水平布局

flow: vertical; /* 将容器内部变为垂直布局. (标准的布局模式) */

flow: horizontal; /* 将容器内部变为横向布局. */

垂直/水平流式布局

flow: v-flow;                             /* 将容器内部变为垂直流式布局. */

flow: h-flow;                             /* 将容器内部变为水平流式布局. */

quicker

官方文档
http://www.terrainformatica.com/htmlayout/flow.whtm

The flow style attributeHTMLayout specific flow CSS attribute describes method of placement of blocks in block containers. Typical block containers are div, ul, ol, blockquote, etc. flow attribite accepts values: vertical, horizontal, h-flow, v-flow and grid:

value	description
vertical	Default value. Standard layout of <div> element. Contained blocks replaced from top to bottom forming single column spanning width of the container. %% units calculation: width, left and right margins, borders and paddings of each contained block in %% units calculated against width of the container. Container width here minus minimum width of the content of the child is a free space available for distribution. height, top and bottom margins, borders and paddings of all contained blocks (if given in %% units) are participating in free space distribution. Therefore if minimal height of content of the container is less than its height then there is a free space. This free space is distributed among all parts of all blocks competing for it, in other words, having values defined in %% units.
horizontal	Single row horizontal layout. All contained blocks are replaced in single row. %% units calculationIt is similar to the vertical but directions are different: height, top and bottom margins, borders and paddings of each contained block given in %% units calculated against height of the container. Container height here minus content height of the contained block is a free space available for distribution. width, left and right margins, borders and paddings of all children (if given in %% units) are participating in free space distribution. Therefore if minimal width of content of the container is less than its height then there is a free space. This free space is distributed among all parts competing for it, in other words, having values defined in %% units. See this illustration: four overflowed blocks contained in one flow:horizontal container.
h-flow	Multiple row horizontal layout. All contained blocks are replaced from left to right and then from top to bottom forming rows of blocks. %% units calculation: vertical margins if given in %% units are simply ignored - interpreted as undefined. Vertical borders, paddings and height in %% units are calculated against row height which is equal to tallest element in the row. width, left and right margins, borders and paddings of all children in the row are calculated exactly as in flow:horizontal. Row splitting algorithmAssembling single row, HTMLayout is trying to replace available contained blocks horizontally. Wrapping into new row happens if either one of conditions met: either sum of width, paddings, borders of current block exceedes available container width; or total sum of all %% units in the row exceedes 100. Second condition allows to define number of columns for h-flow layout. For example if you have something like this: ul { flow:h-flow; } ul li { width:50%%; } then list items will be placed in two columns and elements in each row will span available width of ul element. Illustration: options in multicolumn select
v-flow	Multiple columns layout. Similar to h-flow but in vertical direction. All contained blocks are replaced from top to bottom and then from left to right forming columns of blocks.
grid	Multiple columns and rows layout. Close to <table> layout but does not require <tr>s and any arbitrary block element can be used as a cell. left/top/right/bottom attributes of child elements and special grid location units (#) used for definition of block location in final grid. Example, style block: #cell { left:2#; top:1#; right:3#; bottom:2#; } replaces block with id="cell" in the grid so it occupies 4 cells of the grid from r1:c2 to r2:c3. Pay attention that left/top/right/bottom define  positive cell position numbers that start from 1. width and height attributes of the cell blocks define dimensions of border box of the element (normaly they are dimensiopns of the content box). %% units calculation: width and height of cell blocks declared in %% (or *) flex units are computed against width and height of the grid container (that has flow:grid declared). See sdk/html_samples/flows/grid***.htm samples. paddings and borders of cell elements given in flex units are computed against dimensions of block itself. This makes possible to use for example #cell { left:2#; top:1#; right:3#; bottom:2#; padding-top:*; padding-bottom:*; } to align vertically content of the cell block to the middle. Top Left Right Example, following HTML and style declarations allow to define layout similar to the table on the right: <div #container> <p #left>Left</p><p #right>Right</p> <p #top>Top</p> </div> div#container { flow:grid; } p#left { left:1#; top:2#; } p#right { left:2#; top:2#; } p#top { left:1#; right:2#; top:1#; } Note: engine does not check cells for overlapping. So multiple blocks can occupy the same cell.

quicker

grid网格布局怎么理解呢？

可以设想：容器左侧有一个虚拟的纵坐标，用top表示一个子节点顶部从哪开始，bottom表示底部在哪结束。
容器顶部有一个虚拟的横坐标,  用left表示左侧从哪开始，右侧到哪结束。

示例:

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
winform.add(  )
/*}}*/

import web.layout;
wbLayout = web.layout(winform)

wbLayout.html = /**
<body>
<div #container>
<p #a>Left</p><p #b> Right</p>
<p #c>Top</p>
</div>
</body>
**/

wbLayout.css = /**
div#container { flow:grid; }
p#a { left:1#; top:2#; } //ID为a的节点,横坐标序号为1,纵坐标序号为2, #可以理解为行号或列号
p#b { left:2#; top:2#; } //ID为b的节点,横坐标序号为2,纵坐标序号为2, 也就是在第2行第2列
p#c { left:1#; right:2#; top:1#; } //ID为c的节点, 左坐标为1,右坐标为2,横坐标为1, 也就是位于第一行的第一列到第二列
**/

winform.show();
win.loopMessage();

quicker

flow样式还有一种有意思的矩阵布局模式，
官方文档里没讲这个, 但范例里有, 反复试验总结出其用法

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
winform.add(  )
/*}}*/

import web.layout;
wbLayout = web.layout(winform)

wbLayout.html = /**
<body>
        <div>1....................</div>
        <div>2....................</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6....................</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
</body>
**/

wbLayout.css = /**
div { width:*; } //指定宽度才行
body {
  flow: "1 1 1 1" //第一行分为四列,都为body的第一个子节点占用
        "2 2 6 6" //第二个子节点占用两列, 第六个节点占用两列
        "7 8 9 10" //其他元素顺序排列
        "11 12 3 4";  
  border-spacing-x: 10px;
}   

**/

winform.show();
win.loopMessage();

简单讲，就是将布局节点内的空间分割成一个一个的格子.
然后每个引号内表示一行,多个字符串表示多行,最后用一个分号结束(css必须用分号结束一个属性)

然后将节点内的子节点,按他本来的位置,每人分配一个id（按顺序分给他们  1，2，3，4，5，6，7.......)
然后，谁要占用哪个格子,就在相应位置填上自已的ID.当然，相同的ID必须是连续的,不然就把自已给剁了.

HTMLayout的布局非常方便，是其一大特色。

quicker

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
winform.add(  )
/*}}*/

import web.layout;
wbLayout = web.layout(winform)

wbLayout.html = /**
<body>
  <div #da> aaaaaa </div>
  <div #db> bbbbbb </div>
  <div #dc> cccccc </div>
</body>
**/

wbLayout.css = /**
body {
  /*布局使用模板名字组成的矩阵,名字放到哪里就表示占用哪个位置*/
  flow: "c a"
        "c b";  
}

div{
  border:1px solid darkgray;
}

div#da{
  float: "a"; //定义一个用于布局的模板名字"a"
  width:50px;
  height:50px;
}
div#db{
  float: "b"; //定义一个用于布局的模板名字"b"
  width:50px;
  height:50px;
}
div#dc{
  float: "c"; //定义一个用于布局的模板名字"c"
  width:50px;
  height:100px;
}

**/

winform.show();
win.loopMessage();

大家可以试试，如果将层"c"移到右侧，应当怎么移动模板里的名字？

落伍者

quicker 发表于 2012-6-6 12:10
大家可以试试，如果将层"c"移到右侧，应当怎么移动模板里的名字？

flow: "a c" "b c";
是不是这样.

hurricane_tx

mark 一下