The Complete Guide to CSS Flexbox
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system that provides efficient ways to distribute space and align content along a single axis – either horizontally or vertically. Our free CSS Flexbox generator offers a visual interface for creating flexible layouts with precise control over container and item properties. Whether you're building navigation bars, centering content, creating equal-height columns, or designing responsive components, this tool generates production-ready CSS and HTML code with live interactive preview.
Flexbox excels at one-dimensional layouts where items arrange in rows or columns, automatically distributing space and aligning elements. Our generator provides complete control over container properties (flex-direction, justify-content, align-items, flex-wrap, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, align-self, order). With 6 preset layouts covering common patterns and the ability to add unlimited items, you can quickly prototype and perfect your flex layouts.
✨ Key Features
- Visual Flex Builder: Interactive preview with selectable items
- Container Control: All flex container properties in one place
- Item Control: Adjust flex-grow, flex-shrink, flex-basis, align-self, order
- Add/Remove Items: Test your layout with different item counts
- 6 Preset Layouts: Common patterns like center, space-between, sidebar, navbar
- Copy CSS & HTML: Get both stylesheet and markup code instantly
- Live Preview: Click items to select and edit their properties
- 100% Free: No premium features, completely free to use
Understanding Flexbox Fundamentals
Flex Container and Flex Items
Flexbox layouts consist of a flex container (parent element with display: flex;) and flex items (direct children). The container controls overall layout with properties like justify-content and align-items, while items can override alignment with align-self or control their sizing with flex-grow/shrink/basis. Applying display: flex; activates Flexbox, changing how children are laid out but not affecting grandchildren or other descendants. For more CSS tools, check our CSS Beautifier.
Main Axis and Cross Axis
Flexbox operates on two axes: the main axis (direction set by flex-direction) and the cross axis (perpendicular to main axis). In flex-direction: row;, main axis is horizontal and cross axis is vertical. In flex-direction: column;, main axis is vertical and cross axis is horizontal. Understanding these axes is crucial: justify-content aligns along main axis, align-items aligns along cross axis. This axis-based system makes Flexbox properties work consistently regardless of direction.
Flex Container Properties
flex-direction
The flex-direction property defines the main axis direction. row (default) arranges items horizontally left-to-right, row-reverse goes right-to-left, column stacks vertically top-to-bottom, and column-reverse goes bottom-to-top. Use row for horizontal layouts (navigation bars, toolbars), column for vertical layouts (sidebars, mobile menus). Changing flex-direction switches which properties control which dimension – this is Flexbox's key flexibility advantage.
justify-content
The justify-content property aligns items along the main axis. flex-start (default) packs items at the start, flex-end at the end, center in the middle. space-between distributes items with equal space between them (no space at edges), space-around adds equal space around each item, and space-evenly creates equal space between and around all items. These are perfect for distributing buttons, navigation links, or cards evenly across available space.
align-items
The align-items property aligns items along the cross axis. stretch (default) makes items fill container height/width, flex-start aligns to cross axis start, flex-end to the end, center vertically centers items, and baseline aligns items by text baseline. Use center for vertically centering content (the famous Flexbox centering trick), stretch for equal-height cards, or baseline for aligning text across items.
flex-wrap
The flex-wrap property controls whether items stay on one line or wrap to multiple lines. nowrap (default) forces all items onto one line, potentially shrinking them to fit. wrap allows items to wrap to new lines when space runs out, wrap-reverse wraps in reverse direction. Use wrap for responsive card grids or tag lists where items should wrap rather than shrink below readable size. Wrapping creates multi-line flex containers where align-content becomes relevant.
align-content
The align-content property aligns multiple flex lines (only relevant with flex-wrap: wrap). It distributes space between lines along the cross axis, similar to how justify-content works on the main axis. Values include flex-start, flex-end, center, space-between, space-around, and stretch. Use this to control how wrapped rows or columns distribute vertically (in row direction) or horizontally (in column direction). When there's only one line, align-content has no effect – use align-items instead.
gap
The gap property adds space between flex items without using margins. Syntax: gap: 16px; or gap: row-gap column-gap; Gap is cleaner than margins because it only creates space between items, not at the edges, and it's easier to adjust globally. Fully supported in modern browsers, gap makes Flexbox layouts cleaner and more maintainable. Use gap for consistent spacing in navigation menus, button groups, card grids, and any multi-item flex layout.
Flex Item Properties
flex-grow
The flex-grow property determines how much an item grows relative to other flex items when extra space is available. Default is 0 (doesn't grow). Setting flex-grow: 1; makes an item grow to fill available space. If all items have flex-grow: 1, they share space equally. If one item has flex-grow: 2 and others have flex-grow: 1, the first item gets twice as much extra space. Use flex-grow for flexible columns where certain areas should expand more than others, like main content vs sidebars.
flex-shrink
The flex-shrink property determines how much an item shrinks relative to other flex items when space is limited. Default is 1 (items shrink equally). Setting flex-shrink: 0 prevents an item from shrinking below its flex-basis. Higher values make items shrink more. For example, a logo with flex-shrink: 0 maintains its size while navigation links shrink. Use flex-shrink to control which items compress first when container is too small, protecting important content from becoming too small.
flex-basis
The flex-basis property sets the initial size of a flex item before growing or shrinking. Default is auto (uses item's content size). You can set specific values: 200px, 50%, 20em. Flex-basis is like width or height (depending on flex-direction) but more flexible. Use fixed flex-basis for items that should start at a certain size, then let flex-grow/shrink handle available space. Perfect for sidebar layouts: sidebar with flex-basis: 250px, content with flex-grow: 1.
align-self
The align-self property allows individual items to override the container's align-items value. Use it to align one item differently from others. For example, in a horizontal navigation with align-items: center, one item can have align-self: flex-end to stick to the bottom. Values match align-items: auto (default, uses container's align-items), flex-start, flex-end, center, baseline, stretch. Perfect for layouts where most items align one way but specific items need different alignment.
order
The order property controls the order in which flex items appear, independent of their HTML source order. Default is 0. Items are arranged by order value (lowest first), with source order as tiebreaker. For example, setting order: -1 on an item moves it before all items with default order. Use order sparingly – it can confuse screen reader users if visual order differs significantly from DOM order. Best for small reorderings like moving a button to the start or end based on screen size.
Common Flexbox Use Cases
Navigation Bars
Navigation bars are Flexbox's perfect use case. Horizontal navbar: display: flex; align-items: center; gap: 20px; creates aligned links with spacing. For logo-left, links-right pattern: justify-content: space-between; or put gap between logo and links with margin-left: auto; on first link. For centered nav: justify-content: center; Flexbox automatically handles different link sizes and keeps everything aligned. Our "Navbar" preset demonstrates this pattern.
Centering Content
The famous Flexbox centering trick: display: flex; justify-content: center; align-items: center; centers content both horizontally and vertically. This works for single items or multiple items (which center as a group). Unlike older centering methods requiring positioning hacks or table display, Flexbox centering is clean, predictable, and works regardless of content size. Perfect for hero sections, modals, empty states, loading spinners, or any centered content. Our "Center" preset shows this pattern.
Card Layouts
Card layouts benefit from Flexbox's wrapping capability. display: flex; flex-wrap: wrap; gap: 16px; with cards having flex: 0 0 300px; creates a responsive grid that wraps naturally. Cards maintain minimum width while filling available space. For equal-width flexible cards: flex: 1 1 200px; makes cards grow to fill space but wrap when they'd shrink below 200px. Our "Card Grid" preset demonstrates this. While CSS Grid excels at complex grids, Flexbox is simpler for basic card rows.
Sidebar Layouts
Sidebar layouts use Flexbox for two-column designs. Fixed sidebar, flexible content: sidebar gets flex: 0 0 250px; (fixed 250px width), main content gets flex: 1; (fills remaining space). For responsive layouts, use media queries to change flex-direction from row to column on mobile, stacking sidebar above/below content. Flexbox handles this transition smoothly. Our "Sidebar Layout" preset shows this pattern. For more complex layouts, check our CSS Grid Generator.
Form Layouts
Form elements align beautifully with Flexbox. Label-input pairs: display: flex; align-items: center; gap: 10px; aligns labels and inputs horizontally. For vertical forms with inline buttons: input gets flex: 1; to fill space, button has fixed width. Search bars commonly use this pattern. For complex forms with multiple fields per row, Flexbox creates flexible, responsive layouts where fields wrap naturally on narrow screens. Use flex-wrap: wrap with appropriate flex-basis on inputs for responsive multi-column forms.
Footer Layouts
Footer layouts often need space-between distribution. Logo or copyright left, links right: display: flex; justify-content: space-between; align-items: center; For multi-section footers with several link groups, Flexbox distributes groups evenly with gap or space-around. Responsive footers change from row to column on mobile, stacking sections vertically. Flexbox's flex-direction switching makes this trivial. For sticky footers (footer at bottom of page), use Flexbox on body with main content having flex: 1.
Flexbox Best Practices
Use Flexbox for One-Dimensional Layouts
Flexbox excels at one-dimensional layouts where content flows in a single direction. Use it for rows or columns where you need flexible spacing, alignment, or wrapping. For two-dimensional layouts needing control over both rows AND columns simultaneously, CSS Grid is better. In practice: Flexbox for component internals (button groups, nav links, form fields), Grid for page structure (header/sidebar/content/footer). They complement each other perfectly – use both in the same project for different purposes.
Avoid Overusing flex: 1
While flex: 1; is convenient for equal-width columns, be specific when needed. flex: 1; is shorthand for flex: 1 1 0%; which sets flex-basis to 0%, potentially causing unexpected sizing. For truly equal items, flex: 1; works fine. But for items that should start at content size and grow, use flex-grow: 1; without changing flex-basis. Understanding the three values (grow, shrink, basis) helps you control sizing precisely rather than relying on shorthand defaults.
Prefer gap Over margins
Modern Flexbox supports the gap property, which is cleaner than margins for spacing. Gap only creates space between items, not at container edges, eliminating the need for negative margins on containers or :first-child/:last-child selectors. Gap also collapses properly at line breaks with flex-wrap, unlike margins which can create uneven spacing. Use gap unless you need different spacing for specific items. For older browser support (pre-2021), fall back to margins, but gap is now safe for most projects.
Consider Order and Accessibility
The order property and flex-direction: *-reverse create visual order that differs from DOM order. Screen readers follow DOM order, not visual order, potentially confusing users. Keyboard navigation also follows DOM order. Use order sparingly and only for minor reorderings that don't affect content understanding. For major layout changes at different breakpoints, consider changing HTML order with server-side or client-side rendering rather than relying purely on CSS reordering. Accessibility should guide layout decisions.
Responsive Flexbox Techniques
Changing flex-direction at Breakpoints
The most common responsive Flexbox pattern is switching flex-direction from row to column at mobile breakpoints. Desktop horizontal layout becomes mobile vertical stack. Use media queries: @media (max-width: 768px) { flex-direction: column; } This handles most responsive component needs without complex changes. Navigation bars, card rows, sidebar layouts all benefit from this technique. The same justify-content and align-items values often work in both directions, though their visual effect differs.
Flex-wrap for Responsive Cards
Flex-wrap with minimum widths creates responsive card grids without media queries. Cards with flex: 1 1 300px; try to grow equally but wrap when they'd shrink below 300px. This automatically adjusts column count based on container width: 3 columns on wide screens, 2 on medium, 1 on mobile. Adjust the basis value (300px) based on your card's minimum readable width. Add gap for spacing. This technique is simpler than Grid's auto-fit for basic responsive card rows.
Adjusting gap at Breakpoints
Responsive gap values improve mobile layouts. Large gaps (24px) work on desktop but waste space on mobile. Use media queries to reduce gap on smaller screens: desktop 24px, tablet 16px, mobile 8px. This maintains breathing room without overwhelming small screens. Relative units like vw or clamp() can create fluid gaps that scale with viewport, though fixed pixel values at breakpoints are often clearer. Test gap values on actual devices to ensure comfortable spacing across screen sizes.
Performance and Browser Support
Flexbox Performance
Flexbox has excellent performance in modern browsers. Layout calculations are optimized and don't require JavaScript. Flexbox is faster than float-based layouts and typically faster than table-based layouts. Very large Flexbox containers (100+ items) perform well on modern devices. For best performance, avoid deeply nested flex containers where possible, though moderate nesting (2-3 levels) is fine. Animating flex properties (flex-grow, flex-basis) can trigger layout recalculation – use transforms instead for smooth animations. Use our CSS Minifier to optimize your Flexbox code.
Browser Compatibility
Flexbox has universal browser support in 2025. All modern browsers (Chrome, Firefox, Safari, Edge) and mobile browsers fully support Flexbox. Gap property support is also universal in current browsers. Very old browsers (IE10, IE11) have partial Flexbox support with bugs and require vendor prefixes, but IE usage is negligible now. No vendor prefixes needed with modern syntax. The code our generator produces works everywhere without compatibility concerns. Flexbox is production-ready and has been the standard for one-dimensional layouts for years.
Frequently Asked Questions
What's the difference between justify-content and align-items?
Justify-content aligns items along the main axis (horizontal in row, vertical in column), while align-items aligns along the cross axis (vertical in row, horizontal in column). In a horizontal flex container (flex-direction: row), justify-content controls horizontal distribution and align-items controls vertical alignment. The axes switch when you change flex-direction to column. Remember: justify = main axis, align = cross axis.
Should I use Flexbox or CSS Grid?
Use Flexbox for one-dimensional layouts (content flowing in a single direction – row or column). Use Grid for two-dimensional layouts (needing control over both rows and columns). In practice, use Grid for page structure and major layout, Flexbox for component internals and content flow. They complement each other – most projects use both. For example, Grid for overall page layout, Flexbox for navigation bar items within the header. Our generators for both help you choose the right tool.
How do I center content with Flexbox?
Use display: flex; justify-content: center; align-items: center; on the container. This centers children both horizontally and vertically. For single items, this is the simplest centering method. For multiple items, they'll center as a group. If you want items centered but with space between them, use justify-content: center with gap for spacing. Our "Center" preset demonstrates this classic pattern. This works for any content size and doesn't require knowing dimensions.
What does flex: 1 actually mean?
flex: 1; is shorthand for flex: 1 1 0%; meaning flex-grow: 1 (grows to fill space), flex-shrink: 1 (can shrink), flex-basis: 0% (starts from zero, not content size). This makes items share available space equally regardless of content size. If all items have flex: 1, they'll be equal width. If you want items to start at content size and grow, use flex-grow: 1; instead, which keeps the default flex-basis: auto.
How do I make Flexbox items wrap to new lines?
Add flex-wrap: wrap; to the flex container. By default, flex-wrap is nowrap, forcing all items onto one line (they'll shrink to fit). With wrap, items that don't fit will wrap to new lines. For cards or tags, combine with flex-basis: flex: 0 0 200px; means items are 200px wide and wrap when container is too narrow for another 200px item. Use wrap-reverse to wrap in reverse direction. Enable this in our tool to see the effect.
Why is my Flexbox not working?
Check: 1) Container has display: flex; 2) Properties are applied to correct element (container vs items). 3) Items are direct children of flex container (Flexbox doesn't affect grandchildren). 4) If items aren't wrapping, add flex-wrap: wrap. 5) If alignment seems wrong, check flex-direction – it affects which properties control which dimensions. Use browser DevTools Flexbox inspector (available in Chrome, Firefox) to visualize flex container and items, highlighting main/cross axes.
Build Flexible Layouts Now
Our free Flexbox generator provides complete control over flex layouts with live interactive preview and instant code generation. Adjust container properties to control overall layout, select items to customize their individual flex properties, and add or remove items to test your design. With 6 preset layouts and the ability to copy both CSS and HTML, you can quickly prototype and perfect your flex layouts for any project.
Start by selecting a preset layout or adjust properties to create custom designs. Click preview items to select and edit their flex-grow, flex-shrink, flex-basis, align-self, and order. Copy CSS for your stylesheet and HTML for your markup. For complete web design workflows, explore our CSS Grid Generator, Box Shadow Generator, and Gradient Generator.