Pure C# port of FaceBook.Yoga - implementation of flexbox CSS layout algorithm.
Initial code was extracted from endlesstravel/Rockyfi, which containts pure c#-port of kjk/flex, which is pure go-port of facebook/yoga
Initial code was extracted on May 16, 2019 and represent state of commit 9b9728
var root = Flex.CreateDefaultNode();
var node1 = Flex.CreateDefaultNode();
var node2 = Flex.CreateDefaultNode();
var node3 = Flex.CreateDefaultNode();
root.AddChild(node1);
root.AddChild(node2);
root.AddChild(node3);
root.nodeStyle.Apply("flex-direction: row; width: 200px; height: 200px; padding: 5px;");
node1.nodeStyle.Apply("align-self: flex-start; margin: 5px; height: 50%; flex-grow: 1;");
node2.nodeStyle.Apply("align-self: center; margin: 5px; height: 50%; flex-grow: 1;");
node3.nodeStyle.Apply("align-self: flex-end; margin: 5px; height: 50%; flex-grow: 1;");
Flex.CalculateLayout(root, 200f, 200f, Direction.LTR);If you render rectangles for each node with (x: node.layout.x, y: node.layout.y, w: node.layout.width, h: node.layout.height) you will get same result as this html:
<html>
<head><style> node { display: flex; box-sizing: border-box; border: 1px solid black; }</style></head>
<body>
<node id="root" style="flex-direction: row; width: 200px; height: 200px; padding: 5px;">
<node id="node1" style="align-self: flex-start; margin: 5px; height: 50%; flex-grow: 1;"></node>
<node id="node2" style="align-self: center; margin: 5px; height: 50%; flex-grow: 1;"></node>
<node id="node3" style="align-self: flex-end; margin: 5px; height: 50%; flex-grow: 1;"></node>
</node>
</body>
</html>- Default values sets to flexbox CSS, instead of facebook/yoga values:
- align-content: flex-start;
- flex-direction: column;
- Some changes in
Flex.Parse.cs Node.LayoutGet*()methods are internal: use Node.layout instead -Node.Layoutstruct (seeNode.Layout.cs), which contain cached layout dimensions, including rectangles in absolute coordinates.Stylecan parse text in css format. Change tracking support.
<integer>=integer value like [-1, 0, 1]<number>=extend <integer> with float values like [-1.2, 0, 1.2]<length>=<integer>|<integer>px<length-percentage>=<length>|<number>%
| Name | Default | Value |
|---|---|---|
| display | flex | none | flex |
| overflow | visible | visible | hidden | scroll |
| position | relative | relative | absolute |
| align-content | stretch | auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around |
| align-items | stretch | auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around |
| align-self | auto | auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around |
| flex-direction | row | column | column-reverse | row | row-reverse |
| flex-wrap | no-wrap | no-wrap | wrap | wrap-reverse |
| flex-basis | auto | auto | <length> |
| flex-shrink | 1 | <number> |
| flex-grow | 0 | <number> |
| justify-content | flex-start | flex-start | center | flex-end | space-between | space-around |
| direction | inherit ltr | inherit | ltr | rtl |
| left | auto | auto | <length-percentage> |
| top | auto | auto | <length-percentage> |
| right | auto | auto | <length-percentage> |
| bottom | auto | auto | <length-percentage> |
| width | auto | auto | <length-percentage> |
| height | auto | auto | <length-percentage> |
| min-width | auto | auto | <length-percentage> |
| min-height | auto | auto | <length-percentage> |
| max-width | auto | auto | <length-percentage> |
| max-height | auto | auto | <length-percentage> |
| margin | 0 | <length-percentage>{1,4} |
| margin-left | 0 | <length-percentage> |
| margin-right | 0 | <length-percentage> |
| margin-top | 0 | <length-percentage> |
| margin-bottom | 0 | <length-percentage> |
| padding | 0 | <length-percentage>{1,4} |
| padding-left | 0 | <length-percentage> |
| padding-right | 0 | <length-percentage> |
| padding-top | 0 | <length-percentage> |
| padding-bottom | 0 | <length-percentage> |
| border-width | 0 | <length>{1,4} |
| border-left-width | 0 | <length> |
| border-right-width | 0 | <length> |
| border-top-width | 0 | <length> |
| border-bottom-width | 0 | <length> |