Align Items on the Cross Axis

Align Items on the Cross Axis

We've covered justify-content (main axis). Now let's go deeper into cross-axis alignment — the tools that control how items are positioned perpendicular to the flow direction.

align-items — All Items at Once

Applied to the container, affects all flex items:

Value	Behavior
stretch (default)	Items stretch to fill the container height
flex-start	Items align to the top (start of cross axis)
flex-end	Items align to the bottom (end of cross axis)
center	Items are vertically centered
baseline	Items align based on their text baseline

stretch (Default)

.container {
    display: flex;
    align-items: stretch;
    height: 300px;
}

/* All items stretch to 300px height, regardless of content.
   This is why flex items have "equal height columns" by default! */

flex-start vs flex-end

.container {
    display: flex;
    height: 300px;
}

/* Items at the top */
.container { align-items: flex-start; }
/* Items only as tall as their content, sitting at the top */

/* Items at the bottom */
.container { align-items: flex-end; }
/* Items only as tall as their content, sitting at the bottom */

center — Vertical Centering

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

/* Items are vertically centered within the 300px container.
   Each item is only as tall as its content. */

baseline — Text Alignment

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

.item-1 { font-size: 14px; padding: 10px; }
.item-2 { font-size: 28px; padding: 20px; }
.item-3 { font-size: 18px; padding: 15px; }

/* Despite different font sizes and padding,
   the first line of text in each item aligns on a single line.
   Useful for mixing heading and paragraph text in a row. */

align-self — Individual Item Override

Applied to an individual flex item, overrides align-items for just that item:

.container {
    display: flex;
    align-items: flex-start;  /* All items at the top */
    height: 300px;
}

.special-item {
    align-self: flex-end;  /* This one goes to the bottom */
}

.centered-item {
    align-self: center;  /* This one centers vertically */
}

align-self Values

Value	Behavior
auto (default)	Inherits from the container's align-items
stretch	Stretch to fill container height
flex-start	Align to the start of the cross axis
flex-end	Align to the end of the cross axis
center	Center on the cross axis
baseline	Align to text baseline

Practical Example: Card with Bottom Button

.card-row {
    display: flex;
    gap: 20px;
    align-items: stretch;  /* Cards equal height */
}

.card {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 24px;
}

.card-title { font-size: 18px; }
.card-text  { flex-grow: 1; }  /* Takes up remaining space */
.card-btn   { align-self: flex-start; margin-top: 16px; }

/* The flex-grow: 1 on card-text pushes the button to the bottom,
   keeping buttons aligned across cards of different content lengths. */

Practical Example: Chat Bubble Alignment

.chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 12px;
}

.message.sent {
    align-self: flex-end;   /* Right side */
    background: #3498db;
    color: white;
}

.message.received {
    align-self: flex-start; /* Left side */
    background: #ecf0f1;
}

Key Takeaways

• align-items on the container aligns all items on the cross axis
• stretch (default) gives equal-height items — a built-in Flexbox benefit
• baseline aligns items by their text baseline — great for mixed font sizes
• align-self overrides alignment for individual items
• Use align-self for positioning chat bubbles, bottom-aligned buttons, etc.