What is CSS Flexbox?
Flexbox, or the Flexible Box Layout Module, is a CSS layout model designed for creating efficient, responsive layouts without using floats or positioning hacks.
It provides powerful alignment capabilities, allowing you to distribute space and align items within a container, even when their sizes are unknown or dynamic.
Since its introduction, flexbox has become the go-to solution for one-dimensional layouts—arranging items in rows or columns with precise control over spacing, alignment, and order.
Understanding Flexbox Properties
Master the key properties that control flexbox layouts
Flex Direction
The flex-direction property establishes the main axis along which flex items are laid out. It defines whether items flow horizontally in rows or vertically in columns.
Options include row (default, left to right), row-reverse (right to left), column (top to bottom), and column-reverse (bottom to top). This fundamental property determines the entire layout orientation.
Justify Content
Controls alignment along the main axis. Options include flex-start, center, flex-end, space-between, and space-around.
Align Items
Controls alignment along the cross axis. Choose from stretch, flex-start, center, flex-end, or baseline.
Flex Wrap
Determines if items wrap onto multiple lines. Set to nowrap, wrap, or wrap-reverse for responsive behavior.
Gap Property
The gap property (formerly grid-gap, now supported in flexbox) provides consistent spacing between flex items without using margins. This modern property simplifies spacing by applying uniform gaps between all children, making responsive designs cleaner and easier to maintain.
Common Flexbox Layouts
Real-world patterns you can build with flexbox
Centered Content
Perfect centering is one of flexbox's superpowers. Use justify-content: center and align-items: center together to center any element both horizontally and vertically within its container.
This technique works regardless of content size, making it ideal for modal dialogs, hero sections, and card layouts where you need perfect alignment.
Navigation Bars
Flexbox excels at creating responsive navigation menus. Use space-between to push items to edges, or center to create balanced horizontal navigation.
Combine with flex-wrap for mobile-friendly menus that automatically reflow when space is limited, eliminating the need for complex media query logic.
Card Grids
Create responsive card layouts that adapt to screen size using flex-wrap and flex-basis. Cards automatically flow to new rows while maintaining consistent spacing.
Flexbox handles varying content heights gracefully, aligning cards at the top while allowing each to grow naturally with its content.
Holy Grail Layout
The classic header-content-footer layout with fixed header and footer is trivial with flexbox. Set the main content area to flex: 1 to fill available space.
This pattern ensures footers stick to the bottom of the viewport even with minimal content, solving a layout challenge that previously required absolute positioning or JavaScript.
Flexbox Best Practices
Start with mobile-first thinking when building flexbox layouts. Use flex-direction: column for mobile, then switch to row for larger screens. This approach creates naturally responsive designs.
Avoid using flexbox for complex two-dimensional layouts—that's where CSS Grid shines. Flexbox is optimal for one-dimensional layouts (single row or column), while Grid handles two-dimensional layouts (rows and columns simultaneously).
Remember that flexbox items shrink by default (flex-shrink: 1). If you need items to maintain their size, set flex-shrink: 0. Conversely, use flex-grow: 1 when you want items to expand and fill available space.
Pro Tip
Use the shorthand flex property instead of setting flex-grow, flex-shrink, and flex-basis individually. For example, flex: 1 is equivalent to flex: 1 1 0% and creates flexible items that share space equally.
Browser Support for Flexbox
Flexbox enjoys excellent browser support across all modern browsers. All current versions of Chrome, Firefox, Safari, and Edge fully support the flexbox specification without prefixes.
If you need to support older browsers like Internet Explorer 10-11, vendor prefixes may be required. Tools like Autoprefixer can automatically add these prefixes during your build process, ensuring maximum compatibility without manual intervention.
Frequently Asked Questions
Everything you need to know about CSS Flexbox
When should I use Flexbox vs CSS Grid?+
Use flexbox for one-dimensional layouts where items flow in a single direction (row or column). It's perfect for navigation bars, card layouts, and aligning items within containers. Use CSS Grid for two-dimensional layouts where you need control over both rows and columns simultaneously, like page layouts or complex dashboards. Many modern designs use both together—Grid for overall page structure and Flexbox for component-level layouts.
What is the difference between align-items and align-content?+
The align-items property controls how individual flex items are aligned along the cross axis within a single line. The align-content property only works when there are multiple lines (with flex-wrap enabled) and controls the spacing between those lines. Think of align-items as alignment within each row, while align-content aligns the rows themselves. If you have only one line of items, align-content has no effect.
How do I create equal-width columns with Flexbox?+
Apply flex: 1 to each child element within a flex container. This shorthand sets flex-grow to 1, causing each item to grow and take up equal portions of available space. For three equal columns, place three items with flex: 1 inside a flex container. To create columns with specific ratios, adjust the flex-grow value—for example, flex: 2 on one item and flex: 1 on others creates a 2:1:1 ratio.
Why are my flex items not wrapping?+
By default, flex-wrap is set to nowrap, meaning all items will try to fit on a single line. To allow items to wrap to new lines, set flex-wrap: wrap on the flex container. Additionally, ensure your flex items have a defined width or flex-basis that, when combined, exceeds the container width. Items will only wrap when there's insufficient space to fit them on one line.
What's the difference between flex-basis and width?+
The flex-basis property defines the initial size of a flex item before space distribution, while width sets a rigid dimension. Flex-basis is more flexible because it works with flex-grow and flex-shrink to create responsive layouts. It also respects the flex-direction—in a column layout, flex-basis affects height rather than width. Use flex-basis when building flexible, responsive components and width when you need fixed dimensions.
How can I change the order of flex items?+
Use the order property on individual flex items to change their visual order without modifying the HTML. All items default to order: 0, so setting order: 1 moves an item to the end, while order: -1 moves it to the beginning. This is particularly useful for responsive designs where you want to reorder elements at different breakpoints. Remember that this only changes visual order—screen readers and keyboard navigation follow the DOM order.
Ready to Build Flexible Layouts?
Use our interactive flexbox generator above to create responsive layouts visually, then copy the CSS code directly into your project.