Flex CSS tricks help teams build responsive, aligned interfaces with less code. By combining display flex properties with smart spacing and alignment strategies, you can handle complex layouts in predictable ways.
Use these patterns to solve common UI challenges, from navigation bars to card grids, while maintaining readability and performance across devices.
| Pattern | Use Case | Key Property | Typical Gap Handling |
|---|---|---|---|
| Horizontal Nav | Top-level menu | justify-content: space-between | Auto margins on brand |
| Card Grid | Product listing | flex-wrap: wrap | Gap with margin or gap property |
| Sticky Footer | Push footer down | flex-grow: 1 on main | Min-height on container |
| Center Overlay | Modal dialogs | Align items + justify content center | No gap needed |
Horizontal Layouts with Justify Content
Control spacing between items
Use justify-content to distribute space horizontally. Options like space-between position the first item at the start and the last item at the end, while space-around provides balanced breathing room on each side.
For brand-centric patterns, apply margin auto on the navigation wrapper instead of forcing a rigid gap. This keeps the brand stable while other items react to container width changes.
Vertical Alignment and Cross Axis Control
Align items on the cross axis
Control vertical placement with align-items for inline cases and align-self for individual overrides. This prevents awkward baseline shifts when mixing text and icons inside the same row.
Set align-content only on multi-line containers to manage rows collectively. Pair it with flex-wrap to avoid overflow surprises when the viewport narrows suddenly.
Flex Direction and Responsive Reordering
Change layout flow on different screens
Direction values like row and column define primary flow, while flex-direction: column-reverse can assist with visual hierarchy in compact views. On small screens, switch to a column layout to improve readability without extra JavaScript.
Use order utilities carefully to reposition elements visually. Ensure the source order stays logical for assistive tech so keyboard and screen reader users follow a coherent sequence.
Sizing, Growth, and Shrink Behavior
Control how items expand or contract
The flex shorthand sets flex-grow, flex-shrink, and flex-basis in one declaration. A grow value of 1 allows an item to fill leftover space, while a shrink value of 0 prevents compression beyond a minimum width.
Define base widths with flex-basis or width/height to avoid ambiguous sizing. Avoid aggressive shrinking on inputs and buttons, or you risk clipping labels and disrupting touch targets.
Key Takeaways and Practical Recommendations
- Prefer gap over margin for consistent spacing between flex items.
- Keep logical source order intact to support accessibility and keyboard navigation.
- Use flex-direction column on small screens to avoid horizontal scrolling.
- Control grow and shrink values to prevent unexpected compression or overflow.
- Test with long content and tight viewports to ensure layouts stay stable.
FAQ
Reader questions
How does gap compare to margin on children for spacing
The gap property adds consistent spacing without affecting outer edges, while margin on children creates space at the container boundaries and may require negative adjustments or extra wrappers to avoid overflow.
Can I mix fixed and flexible widths in the same flex row
Yes, assign fixed widths to specific items and flexible widths using flex-grow on others. This combination lets navigation elements keep exact sizes while the main content area absorbs remaining space.
What is the safest way to center a modal with flex
Set the container to display flex with align-items center and justify content center. Ensure the container has a defined height, such as viewport height, so the modal stays centered even with little content.
Why do items overflow when flex-shrink is enabled
Items may overflow if min-width defaults prevent shrinking below intrinsic size. Override min-width or min-height on those items or set flex-shrink to a controlled value to allow predictable compression.