Flexbox Align Items

CSS align-items Property

The align-items property aligns the flex items vertically (on the cross-axis).

This property can have one of the following values:

• normal (default)
• stretch
• center
• flex-start
• flex-end
• baseline

Example

  .flex-container {

  display: flex;
  height: 200px;

  align-items: center;
}

Example

  .flex-container {

  display: flex;
  height: 200px;

  align-items: flex-start;
}

Example

  .flex-container {

  display: flex;
  height: 200px;

  align-items: flex-end;
}

Example

  .flex-container {

  display: flex;
  height: 200px;

  align-items: stretch;
}

CSS align-content Property

The align-content property aligns the flex lines. It only has effect when flex items wrap onto multiple lines.

This property can have one of the following values:

• stretch (default)
• center
• flex-start
• flex-end
• space-between
• space-around
• space-evenly

Example

  .flex-container {

  display: flex;
  height: 400px;

  flex-wrap: wrap;

  align-content: center;

}

Example

  .flex-container {

  display: flex;
  height: 400px;

  flex-wrap: wrap;

  align-content: space-between;

}

True Centering With Flexbox

The following example shows how to solve a common style problem: true centering.

To achieve true centering, set both the justify-content and the align-items properties to center for the flex container, and the flex item will be perfectly centered both horizontally and vertically:

Example

  .flex-container {
  display: flex;
  height: 400px;
  justify-content:
  center;
  align-items: center;
}