Flexbox Sandbox

Common Use Cases

• Building responsive navigation bars and menus that adapt to different screen sizes
• Creating centered layouts for hero sections, login forms, and call-to-action components
• Designing card grids that wrap naturally across breakpoints with equal spacing
• Aligning items vertically and horizontally in modal windows and overlay components
• Building flexible form layouts where labels and inputs align consistently
• Creating multi-column page layouts that reflow on mobile devices

Pro Tips

• Use justify-content: space-between with a fixed number of items to create evenly spaced navigation links with the last item pushed to the right edge.
• Combine flex-wrap: wrap with gap to build responsive grids without media queries — items automatically break to the next line when the container shrinks.
• Set min-width or flex-basis on flex children to control their minimum size, preventing items from becoming too squished as the container shrinks.
• Use align-self on individual flex items to override the container's align-items — perfect for making one item taller or differently aligned than its siblings.
• For equal-width columns, add flex: 1 to each flex child. This distributes remaining space evenly, creating proportional layouts without fixed widths.

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content controls alignment along the main axis (the direction set by flex-direction). For a row direction, this is horizontal alignment. align-items controls alignment along the cross axis (perpendicular to the main axis). For a row direction, this is vertical alignment. Think of justify as the main axis and align as the cross axis.

When should I use flexbox vs CSS Grid?

Use Flexbox when you have a one-dimensional layout — items in a single row or column, such as navigation bars, centered content, or card rows that need to wrap. Use CSS Grid for two-dimensional layouts where you need control over both rows and columns simultaneously, such as page layouts, image galleries, or dashboard interfaces. Flexbox is content-first (items determine the layout), while Grid is layout-first (you define rows and columns first).

How does flex-wrap work with gap?

When flex-wrap: wrap is set, items that don't fit in the container width automatically move to the next line. The gap property adds consistent spacing both between items in the same row and between rows of wrapped items. This combination lets you create responsive grids without media queries — items wrap naturally at every breakpoint while maintaining even spacing.

What is the difference between space-between and space-around?

space-between distributes items evenly along the main axis with the first item flush against the start edge and the last item flush against the end edge. space-around distributes items with equal space around each item — the space before the first item and after the last item is half the space between items. space-evenly (the newest option) gives exactly equal space between all items, including before the first and after the last item.

Why is my flex container not wrapping even with flex-wrap: wrap?

Flex items will only wrap when their total width (or height in column mode) exceeds the container's width. If all items fit on one line, no wrapping occurs even with flex-wrap: wrap. To force wrapping, add min-width or flex-basis values on flex items that collectively exceed the container width. You can also set flex: 0 0 200px to give each item a fixed base width.

Want to master both layout systems? Try the CSS Grid Builder to compare flexbox and grid layouts. Also check out the Box Shadow Generator to style your flex items. Part of the FreeQ.One tools suite.