CSS Flexbox: A Beginner’s Guide to Building Better Layouts

If you’ve ever tried to line up a few items on a webpage and ended up fighting with margins, padding, or awkward positioning, you’ve probably come across a problem that Flexbox can solve.

CSS Flexbox is a layout system that makes it easier to arrange elements in a row or a column. It gives you control over how items are aligned, how much space sits between them, and what happens when the available space changes.

In this article, we’ll look at how Flexbox works, the properties you’ll use most often, and a few examples of where it comes in handy.

What is CSS Flexbox?

Flexbox stands for Flexible Box Layout. It’s a CSS layout model designed to arrange elements within a container.

Imagine you’re building a navigation bar with links for Home, About, Services and Contact. You want them on the same line, with consistent spacing and everything lined up neatly. Flexbox makes this much simpler than trying to position each link individually.

To get started, you apply display: flex to the parent element:

<nav class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

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

That’s the basic setup. The links become flex items, and the navigation element becomes the flex container. By default, the items sit next to each other in a row.

One important thing to understand is that Flexbox mainly controls the layout of an element’s direct children. If you apply display: flex to a parent, its immediate children become flex items, but their own children aren't automatically flex items of that same container.

Understanding the main Flexbox properties

Once you’ve set up a flex container, you can use a handful of properties to control how everything is arranged.

1. flex-direction

This property controls the direction in which flex items are placed.

.container {
  display: flex;
  flex-direction: row;
}

The default value is row, which places items in a horizontal line. If you want them stacked vertically, use:

.container {
  display: flex;
  flex-direction: column;
}

You’ll often use row for navigation bars and horizontal groups of buttons, while column is useful for stacking content.

There are also row-reverse and column-reverse, which reverse the direction of the items.

2. justify-content

This property distributes items along the main axis. With the default flex-direction: row, that usually means horizontal alignment.

.container {
  display: flex;
  justify-content: center;
}

This centres the items along the row.

Other useful values include:

• flex-start — places items at the start.
• flex-end — places items at the end.
• space-between — puts the available space between items.
• space-around — distributes space around each item.
• space-evenly — distributes space evenly between items and the container edges.

For example, a navigation bar might use space-between to position a logo at one end and navigation links at the other.

3. align-items

While justify-content handles the main axis, align-items controls alignment along the cross axis.

.container {
  display: flex;
  align-items: center;
}

With a row layout, this usually centres items vertically. It’s particularly useful when a navigation bar contains a logo and text that need to line up neatly.

Common values include flex-start, flex-end, center, stretch and baseline.

Get Harisamaan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Remember that the main and cross axes depend on your flex-direction. If you switch to column, their orientation changes too.

4. gap

The gap property sets the space between flex items.

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

This creates a 16-pixel gap between neighbouring items.

You could add margins to individual elements instead, but gap is often cleaner when you simply want consistent spacing between items.

You can also specify different row and column gaps when working with wrapped items.

5. flex-wrap

By default, flex items generally try to stay on one line. This can become a problem when the screen gets smaller or the container doesn’t have enough room.

That’s where flex-wrap helps.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

With wrap, items can move onto another line when they run out of space. This is useful for groups of cards, tags, buttons and other content that needs to adapt to different screen sizes.

A practical example: Building a navigation bar

Let’s put a few of these properties together. Imagine you have a website with a logo on the left and navigation links on the right.

<nav class="navbar">
  <h2 class="logo">MySite</h2>

  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
}

Here’s what’s happening:

• display: flex arranges the logo and the links container in a row.
• justify-content: space-between pushes them apart.
• align-items: center lines them up along the cross axis.
• The second flex container uses gap to space out the individual links.

Notice that we’ve used Flexbox twice: once for the main navigation bar and once for the links inside it. This is called nesting flex containers, and it’s a common pattern in real websites.

For a finished, responsive navigation bar, you’d also need to consider what happens on smaller screens. You might reduce the gap, allow the layout to wrap, or introduce a mobile menu.

Common mistakes to watch out for

Flexbox is fairly straightforward once you understand the axes, but a few things can cause confusion.

Using justify-content when you mean align-items. If the items aren't moving in the direction you expect, check your flex-direction first. It determines the main axis.

Applying Flexbox to the wrong element. display: flex affects the direct children of the element you apply it to. If you want to arrange links inside a nested container, that container may need its own Flexbox rules.

Expecting gap to create space around the outside. gap controls the space between items, not the space between the items and the container's edges. Padding can help with the latter.

Forgetting smaller screens. A layout that looks great on a wide monitor might become cramped on a phone. Test different screen sizes and decide whether your items should wrap or change direction.

When should you use Flexbox?

Flexbox is especially useful when you’re arranging items along one main direction. Common examples include navigation bars, button groups, form controls, card content, and vertically centred elements.

If you’re building a more complex layout with rows and columns that need to be controlled together, CSS Grid may be a better fit. The two aren’t competitors, though. It’s common to use Grid for the overall page layout and Flexbox inside individual sections.

Final thoughts

Flexbox is one of those CSS tools that becomes much easier once you start experimenting with it. You don’t need to memorise every property straight away. Start with display: flex, practise changing flex-direction, and see what happens when you adjust justify-content, align-items and gap.

A good way to practise is to build a navigation bar, then try arranging a set of cards or buttons. Change one property at a time and observe the result.

Once you understand how the main and cross axes work, a lot of Flexbox starts to make sense. And the more you use it in small projects, the easier it becomes to choose the right layout for the job.