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.

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.

Conclusion

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

Leave a Reply

Your email address will not be published. Required fields are marked *