Flow aims to be a high-performance Flexbox layout engine that adheres closely to the Flexbox specification. It is based
on Meta’s Yoga library and has an end-to-end benchmark and test suite that ensures spec compliance.
What is Flexbox?
Flexbox is a layout model designed for complex layout structures with a more predictable way of distributing space and aligning items in complex layouts when the size of your items is unknown or dynamic. In contrast to Roblox’s more static layout system, Flexbox is great for responsive design. It automatically adjusts the layout based on container and item properties, making creating UIs that adapt to various screen sizes and orientations easier without requiring extensive code adjustments.
From this blog post.
Usage
Please note that Flow is a low-level API and doesn’t provide out-of-the-box integration for any specific UI system (including Roblox’s). I am working on a high-level integration for Roblox that works for any UI setup you may have (no library, Roact/React, Fusion, etc.)
local Flow = require(Path.To.Flow)
local Node = Flow.Node
-- Create a new Flow node for the root container
local parent = Node.new()
-- Set the width and height for the root container
parent:setWidth(500)
parent:setHeight(300)
-- Apply Flexbox layout properties
parent:setFlexDirection(Flow.FlexDirection.Row)
parent:setJustifyContent(Flow.Justify.SpaceBetween)
-- Create two child nodes
local child1 = Node.new()
local child2 = Node.new()
-- Set dimensions for the child nodes
child1:setWidth(100)
child1:setHeight(100)
child2:setWidth(200)
child2:setHeight(100)
-- Add child nodes to parent
parent:insertChild(child1, 1)
parent:insertChild(child2, 2)
-- Calculate layout
-- You can think of the dimensions here as the area elements shouldn't overflow when wrapping is enabled.
parent:calculateLayout(500, 300, Flow.Direction.LTR)
-- Log calculated layout dimensions
print(`Parent Layout: Width={parent:getComputedWidth()}, Height={parent:getComputedHeight()}`)
print(`Child1 Layout: Width={child1:getComputedWidth()}, Height={child1:getComputedHeight()}`)
print(`Child2 Layout: Width={child2:getComputedWidth()}, Height={child2:getComputedHeight()}`)
For more usage examples, see the test cases here.
Support
Flow has a thread in the Roblox OSS Community Discord server. You can find the thread here. You can also reply to this thread or submit a GitHub issue with any questions or concerns.
Acknowledgements
Flow is a Lua adaptation of Typeflex, a Typescript port of Yoga. It also incorporates some work by Roblox for Flexbox exploration in Lua.
As time goes on, it’s likely Flow will deviate from Typeflex and align more closely with upstream Yoga. See
this issue for more details.
