What is the CSS property align-items used for and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The align-items defines the alignment of the flex items within the flex-container when the items are wrapped/when there are multiple rows (or columns) on the main axis.

The property can have the following values:

  • stretch - items are stretched to fit the container
  • center - items are positioned at the center of the container
  • flex-start - items are positioned at the beginning of the container
  • flex-end - items are positioned at the end of the container
  • baseline - items are positioned at baseline of the container
CSS
div {
  display: flex;
  align-items: center;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself