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.