How Can I Prevent Last-Row Stretching in Flexbox Layouts?

Proper Sizing and Alignment of the Last Row's Flex Item(s)

In a scenario where inline-block elements containing user names and associated numbers display with inconsistent right edges, the objective is to achieve a consistent and dynamic justification-align behavior.

Flexbox offers a solution to this alignment issue. By applying display: flex; flex-wrap: wrap; to the container and flex: 1 0 auto; to the elements, you can achieve a satisfactory outcome. However, the last line of elements still stretches unnaturally.

To resolve this challenge and avoid the undesired stretching, a technique using "phantom" items can be employed. By creating 3 or 4 invisible "phantom" items that always occupy the last slots, the natural width of the last row's elements is preserved.

Alternatively, you can use a single "phantom" item with visibility: hidden and flex-grow: 10. Targeting this item with the :last-child or :last-of-type pseudo-class ensures that it always occupies the last position.

This technique effectively achieves justify-align-like behavior, allowing elements to fill the container's width without overstretching on the last line, resulting in a visually pleasing layout.

The above is the detailed content of How Can I Prevent Last-Row Stretching in Flexbox Layouts?. For more information, please follow other related articles on the PHP Chinese website!