Subframe uses a CSS flexbox model underneath the hood. That means common CSS layout properties like flex-direction and gap translate directly to layout properties in Subframe. That also means most layout properties are updated from the parent, not the child. As an example, space between two elements is adjusted by first selecting their parent.
You will find layout properties on the right-hand side under Layout. These properties like direction and child spacing are only available for a Stack element. You can create stacks by grouping elements together, which wraps them in a stack.
Change direction
The child contents of a stack can either be vertically or horizontally arranged. You can configure the direction by:
Select the stack
Click Vertical / Horizontal under Layout on the right-hand side
Allow contents to wrap
If a stack has more elements than it has available space, you can ask it to wrap the elements to the next line.
To toggle wrapping on and off:
Select the stack
Click on Layout >
...on the right-hand side to open the wrap menuClick Wrap / No wrap to toggle wrapping on / off
Update space between elements
You can update the space between all elements within a stack:
Select the stack
Click on a spacing size under Layout > Space between children
Click on Space between children >
...for additional spacing options.Select Fill if you'd like the space between elements to fill up all available space
💡 Tip: You can update the space between two specific elements without affecting other spacing by first wrapping them with another stack.
Update alignment
You can update both the vertical and horizontal alignment of child contents.
To update the alignment:
Select the stack
Click on the alignment you want in our alignment selector (highlighted in red above)
Common alignment issues
Alignment affects how an element is positioned relative to the empty available space. Sometimes alignment may not appear to work if there is not enough space. Here are a few common issues:
You need to wrap your element with a stack
You can have one element be aligned differently from other elements by first wrapping it in another stack and then changing the alignment for the new stack.
Your stack needs its width / height to be fill
Updating alignment won't have any effect unless there is enough empty space. You can create more empty space by making your wrapping stack Width > Fill or Height > Fill
In the above example, aligning the gray box left / center / right will not work because the wrapping stack does not have extra horizontal space. By making the wrapping stack Width > Fill, there is now extra space for the stack