🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS Align Items

Master vertical alignment in Flexbox. Learn how to control the Cross Axis with confidence.

style.css
/* Vertical Center */
.container {
display: flex;
align-items: center;
}
🎯
style.css
1 / 8
📐

Tutor:The align-items property defines how flex items are laid out along the Cross Axis. By default, items stretch to fill the container.


CSS Layout Mastery

Unlock nodes by learning Flexbox alignment properties.

Concept 1: Flex Basics

Before aligning items, the container must be a flex container. This activates the power of the Main and Cross axes.

System Check

Which property enables flexbox on a container?

Community Layout Lab

Share Flex Snippets

Created a complex layout using align-items? Share your CSS patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Align-Items Property

Author

Pascual Vila

Frontend Instructor.

The align-items property is a sub-property of the Flexible Box Layout module. It defines the default behavior for how flex items are laid out along the Cross Axis on the current line.

Understanding the Cross Axis

To understand align-items, you must understand the axes. If your flex-direction is row (default), the Cross Axis is vertical. Therefore, align-items controls vertical alignment. If your direction is column, the Cross Axis is horizontal.

Key Values

  • stretch (default): Stretch to fill the container (respects min-width/max-width).
  • flex-start: Items align to the start of the cross axis (top, usually).
  • flex-end: Items align to the end of the cross axis (bottom, usually).
  • center: Items are centered along the cross axis.
  • baseline: Items align such that their baselines align.

Common Confusion: Justify vs Align

Remember: justify-content is for the Main Axis. align-items is for the Cross Axis.

Flexbox Glossary

Cross Axis
The axis perpendicular to the Main Axis. In a row layout, this is the vertical axis. align-items controls this.
stretch
The default value for align-items. It makes items fill the available space on the cross axis.
baseline
Aligns items based on the baseline of their text content. Useful for items with varying font sizes.