CSS Flexbox Guide: Align Elements Easily for Beginners

Anyone who wrote CSS before flexbox remembers the struggle: floats that collapsed, hacks to center a box, columns that refused to match in height. CSS flexbox fixes most of that. You tell a parent element to be a flex container, and its children line up and share space in ways that are easy to control.

This guide explains the idea with small examples you can paste into a file and try. It helps to know how boxes get their size first, so read the CSS box model guide if you have not yet.

Turning on flexbox

You need two things: a parent and some children.

<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.row {
  display: flex;
}

That single line makes the three div elements sit side by side instead of stacking. The parent is the flex container and the children are flex items. Most flexbox properties go on the container, which is a nice thing to remember when you get stuck.

The two axes

Everything in flexbox is about two directions:

• The main axis is the direction items flow. By default it runs left to right.
• The cross axis runs perpendicular to it, top to bottom by default.

Change flex-direction to column and the two axes swap: the main axis now runs top to bottom. This is why justify-content sometimes seems to move things vertically. It always follows the main axis, whatever direction that is.

.row { flex-direction: row; }            /* default, left to right */
.stack { flex-direction: column; }       /* top to bottom */

Aligning items

justify-content: the main axis

This property spreads items along the main axis. Common values:

• flex-start: pack items at the start (default).
• center: pack them in the middle.
• flex-end: pack them at the end.
• space-between: first and last touch the edges, equal space between.
• space-around and space-evenly: equal space around each item.

align-items: the cross axis

This one positions items across the other direction. Values include stretch (the default, which makes items equally tall), flex-start, center and flex-end.

The famous centering trick

To center something both horizontally and vertically, you need only three lines:

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px; /* give the parent some height to center in */
}

Whatever is inside .hero now sits in the exact middle. Without a height on the parent, there is no extra vertical room to center in, which is the number one reason this trick appears to fail.

Related reading: CSS Grid Layout: Beginner to Advanced Guide for Modern Web Design

Spacing with gap

Instead of adding margins to every child, use gap on the container. It adds space only between items, never on the outer edges.

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

Wrapping to new lines

By default, flex items squeeze onto one line, even if that makes them tiny. Add flex-wrap: wrap and they move to a new row when they run out of room. This is the basis of many card grids.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cards .card {
  flex: 1 1 200px; /* grow, shrink, start at 200px */
}

How items grow and shrink

Items can also control their own size using three properties, usually written together as the flex shorthand.

• flex-grow: how much of the leftover space this item takes. 1 means "share equally."
• flex-shrink: how willing it is to get smaller when space is tight.
• flex-basis: its starting size before growing or shrinking.

So flex: 1 1 200px in the example above means: start at 200px, grow to fill spare room, and shrink if needed. If you want one item to push the rest away, such as a logo on the left and menu on the right, give the menu margin-left: auto. Auto margins soak up all the free space in a flex container.

Controlling a single item

Sometimes one child needs to behave differently from the rest. align-self overrides the container's align-items for just that item, and order changes its position without touching the HTML.

.special {
  align-self: flex-end; /* sits at the bottom of the row */
  order: -1;            /* moves to the front */
}

Be careful with order. Keyboard users and screen readers still follow the HTML order, so reshuffling visually can confuse them. Use it for small tweaks, not for rewriting the page.

A real example: a navigation bar

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

Put a logo and a list of links inside, and you get a bar with the logo at one end and links at the other, all vertically centered. On narrow screens, combine this with media queries to switch flex-direction to column.

Flexbox or Grid?

Flexbox is one-dimensional: it handles a row or a column at a time. Grid is two-dimensional: it handles rows and columns together. A practical rule is to use flexbox for components such as nav bars, button groups and card rows, and grid for whole-page layouts. Many real pages use both, and the advanced CSS techniques article shows how they combine.

Common mistakes

• Setting flex properties on the child that belong on the parent, such as justify-content.
• Forgetting that flex-direction: column swaps what the two alignment properties do.
• Trying to center vertically in a parent with no height.
• Expecting flex-wrap to be on by default.
• Putting display: flex on the wrong element, so the layout only affects one child.

If a layout misbehaves, open your browser's inspector and click the small "flex" badge next to the element. It overlays guides that show the axes and spacing. For more layout lessons, visit the CSS category.

Conclusion

Flexbox rewards a small amount of practice. Keep these ideas handy:

• Add display: flex to the parent to create a flex container.
• The main axis follows flex-direction; the cross axis is perpendicular.
• justify-content works on the main axis, align-items on the cross axis.
• Use gap for spacing and flex-wrap to flow onto new lines.
• Use the flex shorthand to control how items grow and shrink.