VerticalBox

A flex container — children stack vertically in a column.

Properties

Same as HorizontalBox but with Direction pre-set to Column.

Field	Default	Notes
Direction	Column
Justify	FlexStart	Top of main-axis = top of container
Align Items	Stretch	Children stretch horizontally (cross axis)
Wrap	NoWrap
Gap	0	px between rows
Padding	0

Generated output

<div class="modal sui-modal">
  <label class="title sui-title">YOU DIED</label>
  <label class="subtitle sui-subtitle">…</label>
  <div class="primary-btn sui-respawn-btn">…</div>
</div>

.sui-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

Tips

• Use Justify = Center to vertically center children inside the container.
• Use Align Items = Center to horizontally center children when their widths differ.
• Use Justify = SpaceBetween for header/body/footer layouts where header sticks to top and footer to bottom.

See also

• HorizontalBox
• Concepts · Layout modes