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.