homehtmlayoutflow

The flow style attribute

HTMLayout 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 calculation

It 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 algorithm
Assembling single row, HTMLayout is trying to replace available contained blocks horizontally. Wrapping into new row happens if either one of conditions met:
  1. either sum of width, paddings, borders of current block exceedes available container width;
  2. 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.

 

HTMLayout

Download

Documentation

Screenshots!

HTMLayout Wrappers