How Can I Justify Flexbox Items in the Last Row to Their Natural Width?

Achieving Justified Alignment with Flexbox for Dynamic Last Row Items

In this scenario, the goal is to ensure that the flex items on the last row of a container naturally align to their content width, while respecting the container's available space. This contradicts the inherent behavior of flexbox to stretch flex items to fill the entire row.

Attempting Flexbox Justification

An initial attempt to utilize flexbox with display: flex; and flex-wrap: wrap; achieves a decent result until reaching the last row, where all flex items stretch to fit the container width. This effect is undesirable, especially when only one or two items remain on the last line.

Solution: Phantom Items and Flex-Grow

The solution involves introducing "phantom" items that continuously occupy the last row, essentially serving as placeholders to fill in the excess space and prevent the remaining items from over-stretching. To implement this approach:

1. After the last real flex item in the container, append 3-4 phantom items with equal dimensions and visibility: hidden.
2. Alternatively, create a single phantom item with visibility: hidden and flex-grow: 10. Use the :last-child or :last-of-type pseudo-class to specifically target this element.

Practical Implementation

For example, if user #82 is the last visible item in the container:

• Add phantom users #83, #84, and #85 with visibility: hidden.
• Or, append a single phantom item with visibility: hidden and flex-grow: 10, targeted as :last-child.

Result

This approach results in the last row of flex items aligning naturally to their content width, eliminating the excessive stretching observed previously. The container's space is effectively filled without sacrificing the desired alignment behavior.

The above is the detailed content of How Can I Justify Flexbox Items in the Last Row to Their Natural Width?. For more information, please follow other related articles on the PHP Chinese website!