The unknown behavior of flex-wrap
4/14/25About 1 minCSSArticle(s)blogcss-tip.comcss
The unknown behavior of flex-wrap 관련
CSS > Article(s)
Article(s)
The unknown behavior of flex-wrap
flex-wrap doesn't only control the wrapping of items but also affects the alignment
flex-wrap: wrap allows items to wrap onto multiple lines but it has another function. It transforms your flex container from a single-line to a multi-line container even if at the end you have only one flex line. This means we can use align-content to align the content.
In other words, you need to use flex-wrap: wrap to align the content using align-content even if there is no wrapping.
It's different from align-items which aligns the items inside the line whereas align-content aligns the whole line. Here is an interactive demo to see the behavior of each property:
See flex-wrap & alignment by t_afif on CodePen.
More CSS Tips
- Arrow-like Box with rounded corners Create a rectangle with a rounded triangle shape on one side. April 22, 2025
- Polygon shapes with rounded corners Use modern CSS and Sass to generate the code of rounded polygon shapes. April 17, 2025
- Zig-Zag edges using CSS mask One line of code to add Zig-Zag edges to any element using the mask property. March 20, 2025
- Split and assemble an image using CSS mask A few lines of code to create a fancy reveal animation for images. March 18, 2025
The unknown behavior of flex-wrap
flex-wrap doesn't only control the wrapping of items but also affects the alignment