This is a sciter.js demo that explores the different block layout possibilities.

• git clone the repository
• install packages npm install
• install latest sciter sdk npm run install-sdk
• start the demo npm run scapp

• A recent version of Node.js node (tested with 16 LTS) and its package manager npm.
  • On Windows download and run the installer
  • On Linux check the installation guide

Layout concepts are introduced in these articles:

• https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm
• https://sciter.com/docs/flex-flow/flex-layout.htm

flow is the sciter analog to display: flex. Possible values are:

• horizontal contained elements are on a horizontal line
• vertical contained elements are on a vertical line
• horizontal-wrap same as above with wrapping to the next line when the line is too long
• row(item1, item2, ...) items are on a horizontal line
• grid custom layout
• stack elements are on top of each other
• table, table-fixed ? add an example

Flex length units are "weights" used in distribution of free space along some direction.

https://sciter.com/css-extensions-in-h-smile-engine-part-ii-flex-units/

width: 50%;
margin-left: 30%%;
margin-right: 70%%;

1* == 100%%

width: 50%;
margin-left: 1*;
margin-right: 2*;