Align-Items: Vertical Alignment in Flexbox

If you’ve ever struggled to make things line up neatly on a web page, you’re not alone. Centering text or buttons vertically can feel surprisingly hard when you’re just starting out.

That’s where Flexbox and the align-items property come in. In this article, you’ll learn how to use align-items to control vertical alignment (and sometimes horizontal too) in a simple, beginner-friendly way.

We’ll walk through clear examples, explain each piece of code, and help you actually see what’s going on—no previous coding experience required.

---

What is Flexbox?

Flexbox (short for Flexible Box Layout) is a modern way to arrange items on a web page using CSS. It makes it much easier to:

• Line things up in a row or a column
• Center items horizontally and vertically
• Spread items out with space between them

To use Flexbox, you pick a container (like a div) and tell the browser:

.container {
  display: flex; /* Turn on Flexbox for this box */
}

Once you do this, all the elements inside .container become flex items. Then properties like align-items can control how those items line up.

---

What Does align-items Do?

Think of align-items as the property that tells the browser:

“How should I line up these items across the main direction?”

That sounds a bit technical, so let’s simplify:

• If your items are in a row (left to right), align-items controls vertical alignment.
• If your items are in a column (top to bottom), align-items controls horizontal alignment.

We’ll mostly focus on the common case: items in a row, aligned vertically.

Some common values you’ll use are:

• flex-start – align at the top
• center – align in the middle
• flex-end – align at the bottom
• stretch – stretch items to fill the container (default in many cases)

---

Example 1: Basic Flexbox With align-items

Let’s start with a simple example: three boxes inside a container.

HTML:

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS:

.container {
  display: flex;          /* Turn on Flexbox */
  border: 2px solid #333; /* Just so we can see the container */
  height: 200px;          /* Give it some height so vertical alignment is visible */
  align-items: center;    /* Vertically center items inside this container */
}

.item {
  background: #4CAF50;    /* Green background */
  color: white;           /* White text */
  padding: 10px 20px;     /* Space inside the box */
  margin: 5px;            /* Space between boxes */
}

What you’ll see:

• A horizontal row of three green boxes: A, B, C.
• The container is 200px tall, but the boxes sit vertically centered in the middle.

Key idea:

align-items: center;

This is doing the vertical centering for you.

Try it yourself

• Change align-items: center; to align-items: flex-start; and refresh.
  • The boxes move to the top of the container.
• Change it to align-items: flex-end;.
  • The boxes move to the bottom.

Just by changing this one property, you control where items sit vertically.

---

Example 2: Comparing flex-start, center, and flex-end

Now let’s put three containers on the page, each using a different value for align-items. This will help you see the differences side by side.

HTML:

<h2>flex-start</h2>
<div class="container start">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<h2>center</h2>
<div class="container center">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<h2>flex-end</h2>
<div class="container end">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS:

.container {
  display: flex;          /* Flexbox on */
  border: 2px solid #333; 
  height: 150px;          /* Same height for comparison */
  margin-bottom: 20px;    /* Space between examples */
}

.item {
  background: #2196F3;    /* Blue boxes */
  color: white;
  padding: 10px 20px;
  margin: 5px;
}

.start { align-items: flex-start; }  /* Top */
.center { align-items: center; }     /* Middle */
.end { align-items: flex-end; }      /* Bottom */

What you’ll see:

• In the flex-start section, the items are aligned at the top of each container.
• In the center section, they’re in the vertical middle.
• In the flex-end section, they’re at the bottom.

Try it yourself

• Change the height of .container to 300px. See how the items keep their relative vertical position.
• Try changing the background color or text of the items to make the differences clearer.

This is an easy way to remember what each value does.

---

Example 3: Different Heights, Neat Alignment

Real layouts often have elements with different heights (for example, cards with more or less text). Flexbox with align-items helps keep things tidy.

HTML:

<div class="container center">
  <div class="item tall">Short</div>
  <div class="item">A bit longer text</div>
  <div class="item">This is much, much longer text that makes this box taller.</div>
</div>

CSS:

.container {
  display: flex;
  border: 2px solid #333;
  height: 250px;
  margin-bottom: 20px;
}

.item {
  background: #FF9800;   /* Orange boxes */
  color: white;
  padding: 10px;
  margin: 5px;
  width: 120px;          /* Fixed width so height differences are obvious */
}

.center {
  align-items: center;   /* Vertically center all items */
}

.tall {
  font-size: 20px;       /* A bit different style just to show variety */
}

What you’ll see:

• Boxes of different heights sitting in a row.
• Even though the heights are different, they’re all centered vertically inside the container.

This is very useful for card layouts, pricing tables, or any row of content that doesn’t have the exact same height.

Try it yourself

• Change align-items: center; to flex-start;.
  • All boxes align at the top, even though their bottoms are uneven.
• Change it to flex-end;.
  • Now their bottoms line up nicely at the bottom.

Play with the text inside each .item to see how alignment changes as the heights shift.

---

Example 4: stretch and Column Direction

By default, align-items often acts like stretch, which means items grow to fill the container in the cross direction.

Let’s see stretch and also what happens when we switch to a column layout.

HTML:

<div class="container stretch">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

<div class="container column-center">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

CSS:

.container {
  display: flex;
  border: 2px solid #333;
  margin-bottom: 20px;
}

.item {
  background: #9C27B0;   /* Purple */
  color: white;
  padding: 10px;
  margin: 5px;
}

/* Row with stretch (cross axis is vertical) */
.stretch {
  height: 150px;
  align-items: stretch;  /* Items will stretch to fill height */
}

/* Column with center (cross axis is horizontal) */
.column-center {
  flex-direction: column; /* Stack items top to bottom */
  height: 200px;
  align-items: center;    /* Now this centers items horizontally */
}

What you’ll see:

• In .stretch, the purple boxes stretch to match the full height of the container.
• In .column-center, items are stacked in a column, and align-items: center; now centers them horizontally (left-right), not vertically.

This shows an important idea:

• flex-direction: row; → align-items controls vertical alignment.
• flex-direction: column; → align-items controls horizontal alignment.

---

Common align-items Values (Cheat Sheet)

When flex-direction is row (the default):

• align-items: flex-start; → items at the top
• align-items: center; → items in the middle vertically
• align-items: flex-end; → items at the bottom
• align-items: stretch; → items fill the full height of the container

When flex-direction is column:

• align-items controls horizontal alignment (left/right) instead.

---

Quick Practice Idea

Create a small layout with a title, a paragraph, and a button inside a flex container.

• Try making them sit at the top of the container.
• Then center them vertically.
• Finally, move them to the bottom.

Use only this property to change it:

align-items: flex-start;
align-items: center;
align-items: flex-end;

This kind of practice helps the behavior become second nature.

---

Recap: What You Learned

• Flexbox is a powerful layout tool that makes alignment much easier.
• align-items controls how flex items line up across the main direction:
  • In rows, that usually means vertical alignment.
  • In columns, that usually means horizontal alignment.
• You used common values like flex-start, center, flex-end, and stretch to control how items sit inside their container.

If Flexbox feels confusing at first, that’s completely normal. The more you experiment with small, simple examples like these, the more comfortable you’ll become.

Next steps you can explore:

• Learn about justify-content (for alignment along the main direction).
• Combine align-items and justify-content to perfectly center items both vertically and horizontally.

Keep experimenting, changing one line at a time, and watching what happens. Every small test you try is a real step forward in learning to code.