How to Remove Gaps Between Flexbox Columns After Wrapping?

Remove Space Between Flex Item Columns After Wrapping

When using flexbox to create columns of items within a container with a set height, you may encounter unwanted gaps between the columns when they wrap onto a new line. This issue occurs due to the default setting of align-content: stretch.

Align-content determines the distribution of multiple lines of flex items along the cross axis. When set to stretch, flex lines evenly distribute along the available space. To override this behavior and remove the gaps, you can apply align-content: flex-start to the container.

In contrast to single-line flex containers, multi-line flex containers (flex-wrap: wrap) utilize the align-content property to distribute flex lines. According to the flexbox specification, align-content has the following six values:

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch (default)

Stretch allows flex lines to expand and fill any remaining space. If there is negative free space, stretch behaves like flex-start, while in all other cases, it divides the space equally among the lines.

By setting align-content: flex-start, you align the flex lines to the beginning of the cross axis, effectively removing any gaps between the columns. This gives you the desired result of items lined up neatly beneath each other, filling the available space.

The above is the detailed content of How to Remove Gaps Between Flexbox Columns After Wrapping?. For more information, please follow other related articles on the PHP Chinese website!