How to prevent flex items from stretching with CSS?

Spread the love

Sometimes, we want to prevent flex items from stretching with CSS.

In this article, we’ll look at how to prevent flex items from stretching with CSS.

To prevent flex items from stretching with CSS, we set the align-items property.

For instance, we write

<div>
  <span>This is some text.</span>
</div>

to add some elements.

Then we write

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}

span {
  background: red;
}

to make the div a flex container with display: flex;.

Then we add align-items: flex-start; to stop the contents from stretching vertically.

To prevent flex items from stretching with CSS, we set the align-items property.