How to Remove Gaps Between Flex Items When They Wrap?

Remove Space Between Flex Items When They Wrap

You're attempting to achieve a multi-lined flex layout where items flow horizontally when there isn't enough space vertically. However, you're encountering gaps between columns.

The initial setting for flex containers is align-content: stretch. This evenly distributes flex items across the cross axis of a multi-line container. To prevent this behavior, apply align-content: flex-start to the container.

When working with single-line flex containers, you use align-items and align-self to distribute space along the cross axis. However, in multi-line containers, such as in your case, you use the align-content property to distribute flex lines (rows or columns) along the cross axis.

The align-content property accepts various values, including:

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

By default, the value is stretch, which means leftover free space is split equally between all lines, causing them to expand.

Solution

To eliminate the gaps between columns in your code example, modify the CSS:

.container {
  align-content: flex-start;
}

Conclusion

Using align-content: flex-start ensures that flex lines start from the top of the container and continue downwards without any additional gaps. This aligns with the intended layout you were seeking.

The above is the detailed content of How to Remove Gaps Between Flex Items When They Wrap?. For more information, please follow other related articles on the PHP Chinese website!