A pure C# implementation of the Flexbox layout algorithm for .NET applications.
TimeWarp.Flexbox is a from-scratch C# port of the algorithm behind Facebook's Yoga layout engine. It computes CSS-flexbox layouts (positions and sizes) for a tree of nodes — no UI framework required — and its behavior is verified against Yoga's own generated conformance suite (530 tests, LTR and RTL).
The library has zero runtime dependencies and is fully Native AOT and
trimming compatible (IsAotCompatible): no reflection, no dynamic code. A
PublishAot smoke test runs in CI on every build.
dotnet add package TimeWarp.Flexbox<PackageReference Include="TimeWarp.Flexbox" Version="1.0.0" />using TimeWarp.Flexbox;
// Create a flex container
Node root = new();
root.Style.FlexDirection = FlexDirection.Row;
root.Style.SetDimension(Dimension.Width, StyleSizeLength.Points(300));
root.Style.SetDimension(Dimension.Height, StyleSizeLength.Points(200));
// Add children that share the free space 1:2
Node left = new();
left.Style.FlexGrow = 1;
root.InsertChild(left, 0);
Node right = new();
right.Style.FlexGrow = 2;
root.InsertChild(right, 1);
// Calculate layout
CalculateLayout.Calculate(root, float.NaN, float.NaN, Direction.LTR);
// Read computed positions and sizes
Console.WriteLine($"left: x={left.Layout.GetPosition(PhysicalEdge.Left)} width={left.Layout.GetDimension(Dimension.Width)}");
Console.WriteLine($"right: x={right.Layout.GetPosition(PhysicalEdge.Left)} width={right.Layout.GetDimension(Dimension.Width)}");
// left: x=0 width=100
// right: x=100 width=200Styles are set through Node.Style:
- Dimensions:
SetDimension,SetMinDimension,SetMaxDimensionwithStyleSizeLength.Points(..),.Percent(..),.Auto - Flex:
FlexDirection,FlexGrow,FlexShrink,FlexBasis,FlexWrap - Alignment:
JustifyContent,AlignItems,AlignSelf,AlignContent - Box model:
SetMargin,SetPadding,SetBorderperEdge,SetGapperGutter - Positioning:
PositionType(relative/absolute/static) withSetPositioninsets
Results are read from Node.Layout after calling CalculateLayout.Calculate
(or the equivalent instance convenience root.CalculateLayout()):
GetPosition(PhysicalEdge) and GetDimension(Dimension).
Defaults match Yoga (not web CSS): flex-direction: column, flex-shrink: 0,
align-content: flex-start, and box-sizing: border-box. Construct nodes with
new Node(new Config { UseWebDefaults = true }) for web-style defaults.
Run the visual demo to see computed layouts rendered as ASCII boxes, or as an HTML page comparing the engine's output against your browser's native flexbox:
./samples/layout-demo/layout-demo.cs # terminal
./samples/layout-demo/layout-demo.cs --html out.html # browser comparisonMIT — see LICENSE for details. Behavior modeled on Facebook's Yoga (MIT, Copyright (c) Meta Platforms, Inc.).