Flexbox in 60 seconds
Flexbox arranges items along one main axis. The container (set display: flex) decides how items are laid out; each item can override with its own properties.
flex-direction— row (default) or column. Defines the main axis.flex-wrap— single-line or multi-line.justify-content— align along the main axis.align-items— align along the cross axis.align-content— align multi-line content (only withwrap).gap— the modern replacement for margin hacks.
How to use the Flexbox Generator
Getting a working flexbox layout takes three steps:
- Set direction. Choose
flex-direction:rowlays items out horizontally (the default),columnstacks them vertically. Add-reverseto flip the order. - Configure alignment. Use
justify-contentto space items along the main axis andalign-itemsto align them on the cross axis. Toggleflex-wrapif items should wrap onto a new line instead of overflowing. - Copy the CSS. Click the copy button. The generator outputs only the container properties — paste into your stylesheet and you're done.
Flexbox properties cheat sheet
Every flexbox container and item property, with the values you'll actually use:
| Property | Values | What it does |
|---|---|---|
flex-direction | row, row-reverse, column, column-reverse | Main axis direction |
flex-wrap | nowrap, wrap, wrap-reverse | Whether items wrap to next line |
justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly | Align along main axis |
align-items | flex-start, flex-end, center, stretch, baseline | Align along cross axis |
align-content | flex-start, flex-end, center, space-between, space-around, stretch | Align wrapped rows |
gap | any length value | Space between flex items |
flex-grow | number (default 0) | How much item grows to fill space |
flex-shrink | number (default 1) | How much item shrinks when space is tight |
flex-basis | auto, length | Initial size before grow/shrink |
Flexbox centering — the most common use case
Centering an element used to require negative margins or absolute positioning tricks. With flexbox, it's two properties on the parent:
/* Perfect center (horizontal + vertical) */
display: flex;
justify-content: center;
align-items: center;
/* Center in full viewport */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;The key point: the parent holds the flex properties. You do not add anything to the child element to center it — the container handles all alignment.
Flexbox vs CSS Grid
Both are modern layout systems, but they solve different problems:
- Flexbox works in one direction at a time — either a row or a column. It's the right choice for navbars, button rows, card rows, form fields, and any layout where items line up along a single axis.
- Grid works in two directions simultaneously — rows and columns at the same time. It's the right choice for page layouts, dashboards, and image galleries where you need explicit placement in both axes.
In practice you'll use both. Use Grid for the top-level page shell, then Flexbox inside each component. Try the CSS Grid Generator for two-dimensional layouts.
Frequently asked questions
Why isn't flexbox centering my element?
The parent element needs display: flex. The child is centered by the parent's justify-content and align-items settings — not by anything on the child itself. If centering isn't working, check that you've added display: flex to the container, not the item you're trying to center. Also make sure the container has enough height for vertical centering to be visible.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It tells the item to grow and fill all available space equally with its siblings. If three flex items all have flex: 1, they each take up one third of the container. It's one of the most useful single-line flexbox patterns for equal-width columns.
When should I use flex-wrap: wrap?
Use flex-wrap: wrap when items should flow onto a new line instead of overflowing the container or shrinking below their natural width. It's essential for responsive card grids and tag lists where you want items to reflow on smaller screens. Without it, all flex items stay on one line and can overflow or compress to fit.
Common flexbox patterns
These layouts come up constantly in real projects. Each one is a few lines of CSS:
Sticky footer
Make the main content push the footer to the bottom of the viewport even when there isn't enough content to fill the page. Set display: flex; flex-direction: column; min-height: 100vh on the body or page wrapper, then add flex: 1 to the main content area. The footer stays at the bottom without absolute positioning.
Equal-height cards
Flexbox makes all sibling items stretch to the same height by default — align-items: stretch is the initial value. Put a row of cards in a flex container and they'll automatically match the tallest card's height. No JavaScript, no extra markup, no fixed height values needed.
Responsive navbar
A typical navbar uses display: flex; justify-content: space-between; align-items: center to push the logo to the left and the navigation links to the right. On smaller screens, switch to flex-direction: column inside a media query to stack items vertically for a mobile menu layout.
When to nest flexbox and grid
For a header / sidebar / main / footer layout, use CSS Grid for the outer page shell and Flexbox inside each section for component-level alignment. The CSS Grid Generator handles the outer layout; this flexbox generator handles alignment within each panel. Mixing them is not just acceptable — it's the recommended approach.
Flexbox browser support
Flexbox is supported in every modern browser and has been baseline-supported since 2015. You can use it without any vendor prefixes or fallbacks in production. The gap property on flex containers (not just on grid containers) arrived slightly later — it's supported in all current browsers as of 2021, so it's also safe to use. If you need to support Internet Explorer 11, gap on flex requires a polyfill or margin-based workaround, but IE11 usage is below 0.3% globally for most products and declining.
Related tools
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
- CSS Grid Generator — Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
- Box Shadow Generator — Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.
Related articles
- 4 min readCSS flex-order Property — Reorder Flex Items Without Changing HTMLThe CSS order property reorders flex items visually without changing the DOM. Learn how to use order for responsive layouts, reverse column order on mobile, and the...
- 5 min readCSS flex-grow, flex-shrink, flex-basis — The Flex Property ExplainedThe CSS flex shorthand controls three properties: flex-grow (how much to expand), flex-shrink (how much to contract), and flex-basis (initial size). Learn the common values,...
- 4 min readCSS Sticky Footer with Flexbox — Keep Footer at Bottom of PageA sticky footer stays at the bottom of the viewport when content is short, and below the content when content is tall. The flexbox approach is the cleanest modern solution...
- 6 min readCSS Flexbox Cheatsheet — Every Property with Visual ExamplesCSS Flexbox has 12 container properties and 6 item properties. Here's a complete reference for every flexbox property with examples, common patterns, and browser support notes.
- 9 min readCSS Flexbox — Complete Guide to flex-direction, justify-content, and align-itemsFlexbox aligns items in one dimension — a row or a column. Here's how flex-direction, justify-content, align-items, flex-grow, and the other Flexbox properties work with visual...
- 5 min readFlexbox Alignment — justify-content, align-items, and align-selfMaster Flexbox alignment properties: justify-content distributes items along the main axis, align-items aligns on the cross axis, and align-self overrides per item. Includes...
Further reading
Pillar
Part of Frontend & Design.
Written by Mian Ali Khalid. Last updated 2026-05-12.