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 managernpm
.- 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 linevertical
contained elements are on a vertical linehorizontal-wrap
same as above with wrapping to the next line when the line is too longrow(item1, item2, ...)
items are on a horizontal linegrid
custom layoutstack
elements are on top of each othertable
,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*;