CSS Academy · Lesson

Flex Item Alignment Override with align-self

Override the container's align-items for individual flex items using align-self.

Flex Item Alignment Override with align-self is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is align-self?

align-self overrides the flex container's align-items setting for a specific flex item. It applies to individual items, not the container.

align-self Values

Accepts the same values as align-items:

auto — inherits container's align-items (default)
flex-start — aligns to cross start
flex-end — aligns to cross end
center — centers on cross axis
stretch — stretches to fill cross size
baseline — aligns text baselines

Practical Example

A navigation where most items are centered but the last button is aligned to the end:

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

.nav .cta-button {
  align-self: flex-end; /* override for this item */
  margin-top: auto;     /* alternative approach */
}

Stretching One Item

Make one card stretch to full height while others shrink-wrap:

.sidebar-layout {
  display: flex;
  align-items: flex-start;
}

.ad-unit {
  align-self: stretch; /* fills full column height */
}

margin: auto as Alignment

Auto margins on flex items push themselves (or siblings) to the opposite side. This is a powerful alternative to align-self for centering or distributing space.

.nav {
  display: flex;
}

.nav .logo { margin-right: auto; } /* push all other items right */
.nav .settings { margin-left: auto; } /* push to far right */

margin: auto Vertical Centering

Auto margins work vertically too. margin-top: auto inside a column flex container pushes an element to the bottom:

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

.card-footer {
  margin-top: auto; /* always at the bottom */
}

Baseline Alignment

Aligning items by text baseline keeps readable relationships between items of different sizes:

.stats-row {
  display: flex;
  align-items: baseline;
}

.big-number {
  font-size: 3rem;
}

.label {
  font-size: 0.875rem;
  /* both align to the text baseline */
}

align-self: auto (Default)

align-self: auto tells the item to use the container's align-items value. You only need to set align-self when you want to deviate from the container's default.

Cross Axis vs Main Axis

Remember: align-self always operates on the cross axis. If flex-direction: column, the cross axis is horizontal, so align-self controls left/right positioning.

Combining align-self with flex-grow

A common pattern: grow an item to fill space AND override its cross alignment:

.feature-card {
  flex-grow: 1;
  align-self: flex-start; /* don't stretch to full height */
}

Grid vs Flexbox Alignment

CSS Grid has both align-self (row axis) and justify-self (column axis) for 2D control. Flexbox's align-self only controls the cross axis — use margin: auto for the main axis.

Quick Check

A flex container has align-items: center. One item needs to align to the top of the cross axis. What property should you set on that item?

Recap

align-self overrides the flex container's align-items for individual items. Use it to break the alignment pattern for specific elements. margin: auto is a complementary tool that distributes remaining space to push items along either axis.

Frequently asked questions

Is the “Flex Item Alignment Override with align-self” lesson free?

Yes — the full text of “Flex Item Alignment Override with align-self” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Flex Item Alignment Override with align-self”?

Override the container's align-items for individual flex items using align-self. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Flex Item Alignment Override with align-self” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Flex Item Alignment Override with align-self
Order Property and Visual Reordering
Flex Shorthand Patterns
Common Flexbox Layouts: Nav Cards Media Object

← Back to CSS Academy