How to Prevent Flexbox Items from Stretching to Fill Available Space?-CSS Tutorial-php.cn

How to Prevent Flexbox Items from Stretching to Fill Available Space?

Susan Sarandon

Release： 2024-11-29 15:28:10

Original

673 people have browsed it

How to Prevent Flexbox Items from Stretching to Fill Available Space?

Flexbox Item Stretching: Solution and Considerations

In a flexbox layout, it's possible for flex items to stretch to fill the available space, even when their own content is much smaller. This can be an issue in certain situations.

Root Cause of Item Stretching

In the example provided, the element is stretching to the height of its flex container,

, because of the following CSS:

div {
  display: flex;
  height: 200px;
}

Copy after login

This sets the

as a flex container and sets its height to 200px. Since the element is the only flex item, it's automatically stretched to fill the entire available space.

Preventing Item Stretching

There are two main ways to prevent flex items from stretching:

Set the align-items property: Setting align-items to flex-start will align all flex items to the top of the container, regardless of their content size. This ensures that no item will stretch vertically.

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

Copy after login

Use the flex property: The flex property can be used to control the flexibility of individual flex items. By default, all flex items have a flex value of 1, which means they will stretch to fill any available space. To prevent an item from stretching, set its flex value to a lower number, such as 0.

span {
  flex: 0;
}

Copy after login

The above is the detailed content of How to Prevent Flexbox Items from Stretching to Fill Available Space?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Keep Edges Sharp When Blurring an Image with CSS3 Filter? Next article：Why Do My 50% Width Inline-Block Columns Wrap to the Next Line?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn