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

Quick checkChoose the best answer

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?

Use Flex on the parent, distribute both sides, and center the cross axisGive the title and every action fixed margins until they reach the target positionsAbsolutely position the actions on the right and tune each top value

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