CSS Flexbox Explained with Simple Examples

Originally published on CodingCush.

Flexbox is the CSS tool for arranging items in a row or a column, and it solves the layout problems that used to drive web designers quietly mad: spacing items out evenly, centring something perfectly, or making a navigation bar behave. You turn a container into a flex container with one line, display: flex, and its children become flex items that you can line up, spread out, stretch and wrap using a small set of properties. Learn about six properties — flex-direction, justify-content, align-items, flex-wrap, gap and flex — and you can build almost every one-dimensional layout on the modern web.

Before Flexbox, centring a box was a running joke in web development: people used floats, tables and absolute positioning to fake simple rows and columns, and the results were fragile. Flexbox was designed for this exact job, and once you understand its one big idea — the two axes — everything else falls into place.

The One Big Idea: Container and Items

Every flex layout has two parts. The flex container is the parent element you apply display: flex to. The flex items are its direct children — not grandchildren, only the elements immediately inside it. That parent-child detail matters, because most Flexbox confusion comes from applying a property to the wrong one of the pair.

Here is the smallest possible example. A navigation bar as an unordered list, turned into a neat horizontal row:

.nav {
  display: flex;
  gap: 16px;
}

<ul class="nav">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

With just display: flex, the list items line up in a row instead of stacking vertically, and gap puts clean space between them — no margins to fight with, no last-item special cases. MDN's guide describes the flexible box layout as a one-dimensional layout model for distributing space between items, and its basic concepts of flexbox page on MDN is the reference every developer keeps bookmarked. "One-dimensional" is the phrase to hold on to: Flexbox lays out a row or a column at a time.

The Two Axes: Main and Cross

Flexbox thinks in axes, not in left/right and up/down. The main axis is the direction your items flow. By default, with flex-direction: row, the main axis runs horizontally, left to right, and the cross axis runs vertically. Change to flex-direction: column and the axes swap: main runs top to bottom, cross runs left to right.

Why does this matter? Because the two alignment properties each own one axis. justify-content aligns items along the main axis. align-items aligns them along the cross axis. Beginners constantly mix these up and then wonder why nothing moved — usually because the axis they were picturing was the wrong one after a direction change. When something does not move, ask yourself: which axis am I actually aligning right now?

MDN's flexbox guide open at the two axes — the main axis and the cross axis that every alignment property follows.

justify-content: Spacing Along the Row

justify-content controls how items are spread along the main axis — think of it as deciding what to do with the spare space in the container. The values you will actually use:

.toolbar {
  display: flex;
  justify-content: space-between;
}

flex-start packs items at the start (the default). flex-end packs them at the end. center groups them in the middle — yes, this is the famous centring trick, and combined with align-items: center it centres a box perfectly in both directions. space-between pushes the first item to the start, the last to the end, and spreads the rest evenly — ideal for a header with a logo on the left and a menu on the right. space-around and space-evenly are close cousins that also add space at the edges. Google's web.dev layout course demos these patterns live in its Learn CSS layout module.

align-items: Lining Items Up Across the Axis

While justify-content handles the main axis, align-items positions items on the cross axis. Its default is stretch: in a row, items stretch to fill the container's height, which is why cards in a flex row magically become equal height — a behaviour designers used to fake with all sorts of tricks. Set align-items: center and items sit centred on the cross axis; flex-start and flex-end pin them to the top or bottom of a row.

There is also align-self, the same idea applied to one single item, for when four items should behave and one should be different. And when items wrap onto several lines (coming next), align-content controls how those lines are spaced as a group. Keep the family straight: justify = main axis, align-items = cross axis for items, align-content = cross axis for whole lines.

flex-wrap and the flex Shorthand on Items

By default, flex items refuse to wrap: if they do not fit, they squeeze. Add flex-wrap: wrap and items that run out of room flow onto a new line — the behaviour behind every tidy grid of product cards that reshuffles itself on a phone screen. Pair wrapping with a sensible minimum width on items and you get a responsive layout with no media queries at all, which still feels a little like magic the first time it works.

Finally, items have their own sizing property, flex, a shorthand for grow, shrink and basis. The version you will write most is beautifully simple:

.card {
  flex: 1;
}

flex: 1 on every item in a row makes them all grow to share the available space equally. Give one item flex: 2 and it takes twice the share of the others. Set flex: 1 on a sidebar and flex: 3 on the main content and you have the classic page layout in two lines of CSS. This is where the "flex" in Flexbox earns its name: items flex to fit the space they are given.

Flexbox vs CSS Grid: Which One When?

Point	Flexbox	CSS Grid
Dimensions	One at a time — a row or a column	Two at once — rows and columns together
Starts from	The content: items size the layout	The layout: you define the grid first
Best for	Navbars, toolbars, card rows, centring	Full page layouts, galleries, dashboards
Typical first line	display: flex	display: grid
Combine them?	Yes — Grid for the page, Flexbox inside components is the common pattern

If you are still building your picture of how the three web languages fit together, our explainer on HTML vs CSS vs JavaScript is the friendly starting point, and the Coding Cush tools hub has small helpers like a word counter that come in handy while you write your first pages. Flexbox sits firmly in the CSS layer: HTML provides the boxes, Flexbox arranges them.

Common Beginner Mistakes

Mistake one: applying flex properties to the wrong element. Alignment properties live on the container; flex and align-self live on the items. Mistake two: wondering why justify-content seems to do nothing in a column layout — it is aligning vertically now, because the main axis swapped. Mistake three: forgetting that only direct children are flex items; a wrapper div in between silently breaks your layout. Mistake four: reaching for margins to space items when gap does it cleanly. And the classic: trying to centre with three hacks at once, when justify-content: center plus align-items: center on the container is the whole answer.

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (the direction they flow), and align-items aligns them along the cross axis. In a default row, that means justify-content works horizontally and align-items vertically.

How do I centre a div with Flexbox?

Give the parent display: flex, justify-content: center and align-items: center, and make sure the parent has a height to centre within. Three lines — the joke is finally over.

When should I use Grid instead of Flexbox?

Use Grid when you need to control rows and columns at the same time, like a full page layout or a photo gallery. Use Flexbox for one-dimensional arrangements — a row of cards, a navbar, a toolbar. Many real pages use both.

Do flex items wrap by default?

No. The default is flex-wrap: nowrap, so items squeeze to fit on one line. Add flex-wrap: wrap when you want overflow items to move onto a new line.

Conclusion

Flexbox becomes simple the moment you hold onto its structure: a container, its direct items, and two axes. Set display: flex, spread items with justify-content, line them up with align-items, let them wrap with flex-wrap: wrap, and size them with flex. Build one navbar and one row of cards with these examples, resize your browser while you watch, and Flexbox will stop being a mystery and start being the first tool you reach for. That is exactly what it was designed to be.