CSS Flexbox Explained: How to Align and Space Items Without the Headaches

Centering a box, putting items in a row, or spacing buttons evenly used to be surprisingly hard in CSS. Flexbox, short for Flexible Box Layout, was designed to solve exactly those problems. Once you understand a handful of properties, you can build navigation bars, card rows and centered layouts in a few lines of code. This guide walks through the core ideas.

What is Flexbox?

Flexbox is a CSS layout module for arranging items in one dimension at a time: either in a row or in a column. You turn it on by applying display: flex to a parent element, called the flex container. Its direct children automatically become flex items, and you control how they line up, grow, shrink and wrap.

.container {
  display: flex;
}

With just this rule, items that were stacked vertically as blocks now sit side by side in a row.

The two axes: main and cross

The most important idea in Flexbox is the pair of axes. The main axis is the direction in which items are laid out. The cross axis runs perpendicular to it. By default, the main axis is horizontal (a row) and the cross axis is vertical. If you switch to a column, they swap. Almost every confusing Flexbox moment comes from forgetting which axis a property affects.

Properties for the container

Property	What it does	Common values
flex-direction	Sets the main axis	row, column, row-reverse, column-reverse
justify-content	Aligns items along the main axis	flex-start, center, flex-end, space-between, space-around, space-evenly
align-items	Aligns items along the cross axis	stretch, flex-start, center, flex-end
flex-wrap	Lets items move to a new line	nowrap, wrap
gap	Adds space between items	Any length, such as 1rem

justify-content

This property distributes space along the main axis. center packs items in the middle, space-between pushes the first item to the start and the last to the end with equal gaps in between, and space-evenly puts identical space around every item. A typical navigation bar uses space-between to separate the logo from the menu links.

align-items

This property aligns items on the cross axis. In a row, it controls vertical alignment. The default value, stretch, makes items as tall as the container; center centers them vertically.

The classic: centering anything

Centering an element both horizontally and vertically is now a three-line job:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Properties for the items

Each flex item can also be tuned individually:

• flex-grow: how much of the leftover space an item may take. A value of 1 on all items shares the space equally.
• flex-shrink: how willing an item is to get smaller when there is not enough room. The default is 1.
• flex-basis: the starting size of the item before growing or shrinking.
• align-self: overrides align-items for a single item.
• order: changes the visual order of items without changing the HTML.

These three are often combined into the shorthand flex. For example, flex: 1 means the item can grow and shrink and starts from a basis of zero, so several items with flex: 1 share the space equally.

Making a responsive card row

Wrapping lets a layout adapt to different screen sizes. In this example, cards sit side by side on wide screens and drop to the next line on narrow ones:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 250px;
}

Each card tries to be at least 250 pixels wide, grows to fill extra space, and wraps when the line is full.

A quick example: a simple navigation bar

Imagine a header with a logo on the left and three links on the right. Make the header a flex container with justify-content: space-between and align-items: center. The logo and the group of links become two flex items, pushed to opposite ends and centered vertically. If you also make the group of links a flex container with a gap of one rem, the links sit neatly in a row with consistent spacing. On small screens, you can switch the container to flex-direction: column in a media query so everything stacks. That small pattern, nested flex containers, appears in almost every website you use.

Flexbox or Grid?

Flexbox is one-dimensional: it handles a row or a column at a time. CSS Grid is two-dimensional and is better when you need to control rows and columns together, such as a full page layout. In practice, they work well together: Grid for the page skeleton, Flexbox for components inside it, like a toolbar or a group of buttons.

Common mistakes

• Applying flex properties to the wrong element. Container properties go on the parent; item properties go on the children.
• Forgetting that the axes swap. In a column, justify-content works vertically.
• Expecting grandchildren to be flex items. Only direct children are affected.
• Using margins instead of gap. The gap property is cleaner and avoids extra space at the edges.

Conclusion

Flexbox rewards practice more than memorization. Open a small HTML file, change one property at a time and watch what happens; the behavior becomes intuitive within a few sessions. If you want to build on this foundation with HTML, CSS and responsive design, the related web development courses on Cursa are a natural next step.