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 and 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.
Start building freeFrequently 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.