Flex
You might say
Put these buttons in one row with even spacing and center them vertically.
Arrange items along one row or one columnFlexbox lays items out on a single main axis and handles alignment, spacing, wrapping, and flexible size. It is a good fit for toolbars, form rows, and card content. Use grid when both rows and columns need a planned structure.
Know first
When to use it
- Align items in a row
- Build a vertical stack
- Distribute space between controls
- Let items wrap when room runs out
When NOT to use it
- Use many nested flex containers for a simple grid
- Set fixed widths that fight the flexible layout
- Forget how the order changes on small screens
- Use visual order that differs from keyboard and reading order
Anatomy
itemMain axis →Cross axis ↓
The parent element with display: flex written on it
direct child elements in the container
The arrangement direction of items, justify-content takes care of it
Perpendicular to the main axis, align-items doesn't care
Variants
Row
The default main axis is horizontal; select it when the content needs to flow along the same line.
Column
The main axis is changed to vertical direction; select when the content order should be from top to bottom.
Center
When the container size is clear, allocate the remaining space on both axes to both sides of the content
SpaceBetween
Place the remaining space on the main axis between items; suitable for arrangements that require welting at both ends
Typical use cases
Toolbar
display: flex · horizontal row
VibeHub
Components
Terms
Examples
VibeHub
Components
Terms
Examples
Flex keeps the logo, links, and avatar aligned in one row
Navigation row
flex-direction: column
Form actions
justify-content: space-between
Little Fox has updated the "Home Page Revision"
10:24
Project News
Little Fox has updated the "Home Page Revision"
10:24
Card header
align-items + justify-content: center
No news yet, the content is centered on both axes
Further reading