align-content Deep Dive — CSS

align-items & align-content

align-items aligns items on the cross axis (vertically for row layout). align-content aligns wrapped lines. Both are essential for vertical alignment in flexbox.

Align Items

Value	Alignment	Use Case
stretch	Fill container height	Default, equal heights
flex-start	Start of cross axis	Top alignment
flex-end	End of cross axis	Bottom alignment
center	Center of cross axis	Vertical center
baseline	Text baseline	Text alignment

CSS

/* Stretch (default) */
.container {
  display: flex;
  align-items: stretch;
  height: 200px;
  /* Items fill height */
}

/* Center */
.container {
  display: flex;
  align-items: center;
  height: 200px;
  /* Items centered vertically */
}

/* Flex start */
.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
  /* Items at top */
}

/* Flex end */
.container {
  display: flex;
  align-items: flex-end;
  height: 200px;
  /* Items at bottom */
}

Align Content (for wrapped items)

CSS

/* Align wrapped lines */
.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: flex-start;
  /* Lines start at top */
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: center;
  /* Lines centered vertically */
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: space-between;
  /* Lines spread out */
}

Practical Examples

CSS

/* Vertical center with align-items */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  background: linear-gradient(to right, blue, purple);
  color: white;
  text-align: center;
}

/* Navigation with centered items */
nav {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: #333;
}

nav a {
  color: white;
  margin: 0 15px;
}

/* Wrapped gallery with space */
.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 600px;
  gap: 20px;
}

Note

align-items aligns on cross axis. align-content aligns wrapped lines. Use center for vertical centering, stretch for equal heights.

Flex items and gap: [Flex Item Properties](/css/flex-items).