CSS flex shorthand and order: distribute space without changing meaning

When to use it

A case toolbar has a title that should absorb spare width and an action group that should retain its content width. Give the title a flexible basis and allow it to shrink to zero minimum inline size when a long title is present. Keep actions later in the markup if they are read later. Do not use order to move a destructive action to the beginning on mobile while keyboard focus stays at the end. If the toolbar wraps, test the visual grouping rather than relying on one wide screenshot. The sample uses the flex shorthand as a concise contract: the title can grow and shrink from an 18-rem basis, while actions use their natural width.

.case-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.case-toolbar__title { flex: 1 1 18rem; min-inline-size: 0; }
.case-toolbar__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .5rem; }

Cost and verification

Flex layout cost is usually small for a toolbar. Complexity arrives when several children have implicit minimum sizes and cannot shrink as expected. Inspect flex-basis, content width, and the item's min-inline-size before adding overflow hidden. The action group may wrap at high zoom; it should remain reachable. A visual order change can create an accessibility defect even though the CSS parses and paints correctly, so read through the controls with a keyboard after any order declaration is introduced.

Common Mistakes

• Do not use order to repair the document sequence.
• Do not assume flex: 1 means the same thing as flex: 1 1 auto.
• Do not clip the title before testing its minimum size.

Connected lessons

• CSS Property Decisions
• CSS flexbox sizing: make control rows wrap without clipping
• CSS alignment and gap: distribute space inside the correct box
• Responsive CSS: keep reading order and controls usable