New W3C / CSS Offer - Flexible Flow Module

All those who work professionally with CSS know that this tool is rather poor in terms of layout management. For example, in modern CSS (2.1 and 3) it is technically impossible to reproduce all the capabilities of HTML tables.

In Java / AWT / Swing, for example, from the very beginning Layout Managers were laid out in different ways . In CSS, this is not pure. Disorder.

Actually this was the reason for our proposal in the W3C CSS WG.
')


The idea is simple “like a door”:
1) Enter one CSS 'flow' attribute and
2) Units of measure - flex.

'flow' takes on the values: horizontal | vertical | horizontal-flow | vertical-flow | "template"
and describes different ways of placing blocks inside a container, that is, describes a layout manager.

flex units are weights of the distribution of free space in a container. They are written as <number> '*', for example:
margin-left: 2 *. For clarity, flex length units can be thought of as springs having a certain weight.

Here, for clarity:


The paragraph in the picture is positioned with this style:

  p
 {
   width: 40%;  / * fixed width - 40% of the width of the container * /
   margin-left: 2 *;  / * left "spring" of power 2 * /
   margin-right: 1 *;  / * right "spring" of power 1 * /
   border: 1px solid black;  / * border of fixed width * /
 } 

Those who know what to say means an entry in HTML [frameset cols = "200, *, *"] I think will immediately "move in" the idea of ​​flexs.

Regarding the idea of ​​the 'flow' attribute and its values, I recommend that you run at least through the illustrations in the text of the proposal itself: www.terrainformatica.com/w3/flex-layout/flex-layout.htm

Here are the news from the front of CSS3 and HTML5