Rows and Columns with Flexbox
Align menu items, add spacing, and wrap items into another row.
Use display: flex on the element containing your buttons or panels. Edit its
CSS in the component's style section.
.menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}This stacks children vertically with 12 pixels between them. Change
flex-direction to row to place them beside each other.
| Property | What to change |
|---|---|
justify-content | Position children along the row or column |
align-items | Align children in the other direction |
gap | Space between items, using one pixel value |
flex-wrap: wrap | Let items continue on another line |
flex-grow / flex-shrink | Let a child grow or shrink with available space |
For a centered row, try justify-content: center and align-items: center.
With wrapping enabled, the same gap applies between items and between lines.
Keep the gap on the base rule, then preview at a narrow and wide resolution.
Wrap into two equal columns
For two equal columns, subtract half the horizontal gap from each item's width:
.stats-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 0 20px;
}
.stats-row {
width: calc(50% - 10px);
min-width: 0;
box-sizing: border-box;
}The percentage uses the container's width and updates when that width changes.
The same calculation can be used for flex-basis.
Keep a long list inside the screen
In Studio, preview the panel with enough items to fill several rows. Keep the heading outside the scrolling area so its close button remains reachable.
.picker {
display: flex;
flex-direction: column;
max-height: calc(100vh - 132px);
}
.picker-heading {
flex-shrink: 0;
}
.picker-list {
min-height: 0;
overflow: auto;
}The panel grows with short lists up to its height limit. Longer lists scroll inside the remaining space. Choose the viewport margin to leave room for your HUD, and check both short and long lists at the smallest supported resolution.