Why align-items: center squishes things?

Why does the items in the box-container get squished when align-items is set to center? I’m confused.

This does not happen when we apply justify-content: center to an element.

I checked it with my browser and it works. Maybe there’s something wrong with the preview box on the website?

Hello.

The size of the boxes are different because the font-size is different.

No, I did not ask that. Even with the the font-sizes are set same for both boxes. it’s still squishing them to the center.

When you use flexbox, the flex-direction is set to row by default… So the align-items will align the content to the center in a row perspective… Try to set flex-direction: column and align-items to the center and see if that answers your question

1 Like

It’s the size of the content. If you give both <p> elements the same font-size and remove the margin you can see the box will only take up the height of the letters (content).

#box-1 {
  background-color: dodgerblue;
  width: 200px;
}

#box-2 {
  background-color: orangered;
  width: 200px;
}
p {
  margin: 0;
  font-size: 18px;
}

The reason it squishes two boxes accordingly is because it’s heights aren’t defined like in the justify-content challenge (here, we had set each box’s height to auto), so, it adjusts the height with respect to the div element and other properties associated with it.