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

Space

Flexbox

You can say this to an AI Agent

Use Flex for the toolbar with the title on the left, actions on the right, and vertical centering. Preserve that relationship as actions change, and allow sensible wrapping when narrow. Do not force placement with absolute positioning or fixed margins.

When to use it

Align items in a row
HomeComponentsTerm
Build a vertical stack
NameEmailflex-direction: column changes the layout to vertical.
Distribute space between controls
Sign inSet both the main and cross axes to center.
Let items wrap when room runs out
Project newsView all

When NOT to use it

Use many nested flex containers for a simple grid
float leftfloat rightUsing floats for ordinary layout also requires clearing them.
Set fixed widths that fight the flexible layout
Grid is usually more direct when you need to control rows and columns together.
Forget how the order changes on small screens
When the width is fixed and line wrapping is prohibited, child elements may overflow the container.
Use visual order that differs from keyboard and reading order
Label oneLabel twoLabel threeTag fourTag fiveTag six

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; controlled by justify-content

Cross axis alignment perpendicular to the main axis; controlled by align-items.

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

Flex keeps the logo, links, and avatar aligned in one row

Navigation row

flex-direction: column

Nickname Email

Form actions

justify-content: space-between

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

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A toolbar has one row: a title on the left and a changing number of actions on the right, all vertically centered. Which layout is most direct?

A. Use Flex on the parent, distribute both sides, and center the cross axisB. Give the title and every action fixed margins until they reach the target positionsC. Absolutely position the actions on the right and tune each top value