Flexbox changed web development forever. Before it existed, centering a div vertically was genuinely painful. Now it takes one line. Whether you're building navigation bars, card grids, hero sections, or complex page layouts — Flexbox handles it cleanly. This guide covers every single Flexbox property, with working code examples and real layouts you can copy and use today.
Copy any CSS and HTML example from this guide and paste it into our free HTML Editor Online Pro to see Flexbox working live. Change values and see results instantly — the best way to actually learn this stuff.
CSS Flexbox — officially called the Flexible Box Layout Module — is a CSS layout system that makes it incredibly easy to arrange elements in a row or column, control their spacing, alignment, and size, and make them respond to different screen sizes. It was designed specifically to solve the layout problems that plagued web developers for years.
Before Flexbox, creating common layouts required hacks — using float, negative margins, inline-block tricks, and JavaScript measurements. These approaches were fragile, hard to maintain, and broke easily on different screen sizes. Flexbox replaced all of that with clean, predictable, purpose-built CSS.
Today, Flexbox is supported in 100% of modern browsers and is used in virtually every professional website. It works alongside CSS Grid — Flexbox is best for one-dimensional layouts (rows OR columns), while Grid handles two-dimensional layouts (rows AND columns at the same time). You'll use both, but Flexbox is what you'll reach for more often in everyday coding.
The mental model that makes Flexbox click: There is a container (the parent element with display: flex) and items (the direct children). Properties applied to the container control how items are arranged. Properties applied to the items control how individual items behave within that arrangement. Keep this distinction clear and Flexbox becomes logical.
You activate Flexbox with a single CSS property on the parent container. Just one line turns any element into a flex container, and all its direct children automatically become flex items.
The moment you add display: flex, the child items line up in a horizontal row — left to right — by default. That's the starting point. Everything else in Flexbox is about controlling how those items are arranged, sized, and aligned from there.
That horizontal row arrangement — without writing any other CSS — is the default Flexbox behavior. Now let's learn how to control it.
The main axis is the primary direction flex items are laid out. By default it's horizontal (left to right). flex-direction lets you change this.
flex-direction: column is extremely useful for mobile layouts. A common pattern: use row on desktop and switch to column on mobile with a media query. This is how most responsive navigation bars and card grids work.
justify-content controls how flex items are distributed along the main axis (horizontal by default). This is where the magic of Flexbox spacing happens. Six values cover every layout scenario you'll ever encounter.
space-between is one of the most used values in real projects — it's perfect for navigation bars where the logo is on the left and links are on the right, or for putting items at opposite ends of a container.
align-items controls alignment on the cross axis — perpendicular to the main axis. When flex-direction is row (horizontal), the cross axis is vertical. So align-items controls vertical alignment.
This is the property that finally solves the "how do I center this vertically" problem that drove developers crazy for years.
This is probably the most googled CSS layout question of all time. With Flexbox, it's two lines:
This two-property combination — justify-content: center + align-items: center — is used in virtually every modern website. Buttons, hero text, modal dialogs, icon circles, loading spinners — all centered with this pattern.
By default, flex items all try to fit onto one line — even if it means shrinking them. flex-wrap changes this behavior, allowing items to wrap onto multiple lines when they run out of space.
flex-wrap: wrap combined with flex: 1 1 250px on the items is one of the most powerful responsive layout patterns in CSS — it creates a grid that automatically adapts to any screen size without any media queries. Cards fill the row, and when there isn't enough space, they wrap to the next line.
These three properties are applied to flex items (the children), not the container. Together they define how a flex item should grow, shrink, and what its base size should be. They're often written together using the flex shorthand.
flex-grow defines how much extra space an item takes when there is leftover space in the container. A value of 0 means "don't grow." A value of 1 means "take equal share of available space." A value of 2 means "take twice as much space as items with flex-grow: 1."
flex-shrink controls how much an item shrinks when the container runs out of space. The default is 1 — all items shrink equally. Setting it to 0 prevents an item from shrinking at all, keeping its original size.
flex-basis sets the initial size of a flex item before any growing or shrinking happens. Think of it as the "ideal size" the item starts at. It can be a pixel value, a percentage, or auto (uses the item's content width).
flex: 1 1 250px is a game-changer for responsive layouts. Applied to cards inside a flex container with flex-wrap: wrap, cards automatically fill the row, wrap to the next line when the screen is too small, and you never need to write a single media query for the card grid. This pattern is used constantly in real projects.
align-self is applied to individual flex items and overrides the container's align-items value for just that one item. It accepts the same values as align-items: auto, flex-start, flex-end, center, stretch, baseline.
The order property lets you change the visual order of flex items without changing the HTML. By default, all items have order: 0 and appear in the order they appear in the HTML. Lower order values appear first, higher values appear last.
Theory only goes so far. Here are the most common real-world layouts built with Flexbox — complete, copy-ready code for each one.
The navigation bar is the most common Flexbox use case. Logo on the left, links on the right, perfectly vertically centered.
Optimized for speed
Enterprise security
Works on all devices
A footer that always stays at the bottom of the screen — even when page content is short — is one of the hardest things to achieve without Flexbox. With it, it's simple:
Copy any code from this guide into HTML Editor Online Pro and see it working live. Change values, experiment, and learn by seeing — the fastest way to master Flexbox.
📐 Open HTML Editor Free →Quick reference for every Flexbox property — container properties and item properties in one place.
| Property | Values | What it does |
|---|---|---|
display | flex | inline-flex | Activates Flexbox. inline-flex makes the container itself inline. |
flex-direction | row | row-reverse | column | column-reverse | Sets the main axis direction |
flex-wrap | nowrap | wrap | wrap-reverse | Controls whether items wrap to multiple lines |
flex-flow | Shorthand for direction + wrap | e.g. flex-flow: row wrap |
justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | Aligns items on the main axis |
align-items | stretch | flex-start | flex-end | center | baseline | Aligns items on the cross axis |
align-content | Same as align-items | Aligns multiple lines of items (only works when flex-wrap: wrap) |
gap | Any CSS length value | Spacing between items. Can set row-gap and column-gap separately. |
| Property | Values | What it does |
|---|---|---|
flex-grow | Number (default: 0) | How much the item grows relative to others |
flex-shrink | Number (default: 1) | How much the item shrinks relative to others |
flex-basis | Length | auto | The starting size before grow/shrink |
flex | Shorthand: grow shrink basis | e.g. flex: 1 1 250px or just flex: 1 |
align-self | Same as align-items values | Overrides align-items for this specific item |
order | Integer (default: 0) | Controls visual order — lower numbers appear first |
Q: When should I use Flexbox vs CSS Grid?
Use Flexbox when you're working in one dimension — either a row or a column, but not both at the same time. Navigation bars, button groups, centering an item, card rows — these are Flexbox situations. Use CSS Grid when you need two-dimensional control — defining both rows and columns simultaneously, like a full page layout or a photo gallery. In practice, most websites use both: Grid for the overall page layout, Flexbox for components within that layout.
Q: Why aren't my flex items centered vertically?
The most common reason: the flex container doesn't have a defined height. align-items: center centers items within the container's height — but if the container is only as tall as its content, there's no extra vertical space to center within. Add a height or min-height to the container: height: 200px or min-height: 100vh for a full-screen section.
Q: What does min-width: 0 on a flex item do?
This is one of Flexbox's quirks. Flex items have a default minimum width based on their content — they won't shrink below the width of their longest word. This causes overflow in many layouts. Setting min-width: 0 removes this restriction, allowing the item to shrink fully. You'll see this especially in sidebar layouts where the main content overflows.
Q: What is the difference between gap and margin in Flexbox?gap (also called grid-gap) adds spacing only between items — not on the outer edges. This is perfect for card grids where you want spacing between cards but not on the sides. margin adds spacing to all sides including the outside edges. For most Flexbox layouts, gap is cleaner and easier to control than using margins on individual items.
Q: Does Flexbox work in all browsers?
Yes — CSS Flexbox has 100% support in all modern browsers as of 2025: Chrome, Firefox, Safari, Edge, Opera, and all their mobile versions. You do not need any vendor prefixes or fallbacks for current browser versions. The only situation where you might need to worry is if you need to support Internet Explorer 11, which has partial and buggy Flexbox support — but IE11 has been officially discontinued and has a global usage under 0.5%.