A decade of Canvas at your command — powered by our custom cutting-edge, continuously trained AI engineStart Building →
Glossary

What Is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to align and distribute space among items in a container, even when their sizes are unknown or dynamic. Flexbox works in one dimension at a time — either as a row or as a column — making it ideal for navigation bars, card layouts, and centering elements.

Flexbox container properties

To use flexbox, set display: flex on a parent container. Key container properties: flex-direction (row, column, row-reverse, column-reverse), justify-content (aligns items on the main axis — flex-start, center, space-between, space-around, space-evenly), align-items (aligns items on the cross axis — stretch, flex-start, center, flex-end), flex-wrap (whether items wrap to new lines), and gap (spacing between items).

Flexbox item properties

Individual flex items can be controlled with: flex-grow (how much an item grows relative to others), flex-shrink (how much it shrinks), flex-basis (its default size), the shorthand flex (combines grow, shrink, basis), align-self (overrides the container's align-items for that item), and order (reorders items visually without changing HTML).

Flexbox vs CSS Grid

Flexbox is one-dimensional (row or column). CSS Grid is two-dimensional (rows AND columns simultaneously). Use flexbox for navigation bars, button groups, centered content, and card rows. Use Grid for full page layouts, image galleries, and complex two-axis arrangements. They work well together — flexbox inside grid cells is a common pattern.

Flexbox in Bootstrap 5

Bootstrap 5 is built on flexbox internally and exposes it through utility classes. Classes like d-flex, justify-content-between, align-items-center, flex-column, and gap-3 let you use flexbox without writing custom CSS. Canvas Builder's generated HTML makes heavy use of Bootstrap 5 flex utilities for clean, responsive layouts.

CSS Flexbox & Canvas Builder

Canvas Builder generates Bootstrap 5 HTML that uses CSS flexbox extensively — via Bootstrap utility classes — to create clean, responsive layouts without custom CSS.

Try Canvas Builder →

Frequently Asked Questions

When should I use flexbox instead of CSS Grid?
Use flexbox when you're working in one dimension — aligning items in a row or stacking them in a column. CSS Grid is better when you need to control both rows and columns simultaneously (two-dimensional layouts).
Is flexbox supported in all browsers?
Yes — CSS Flexbox has full support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. Browser support is essentially universal as of 2026.
Does Bootstrap 5 use flexbox?
Yes — Bootstrap 5's grid system and many of its components are built on CSS flexbox. Bootstrap utility classes like d-flex, align-items-center, and justify-content-between map directly to flexbox properties.