Advanced Flexbox (Wrapping and Growing)

In this lesson you'll learn flex-wrap and flex-grow as an application of Flexbox, so you can build a more flexible layout. This is for people searching "CSS flex-wrap usage."

Specifying flex-wrap: wrap makes side-by-side elements automatically wrap onto a new line once they no longer fit. Using flex-grow lets you distribute leftover space, letting elements stretch to fill it.

The sample code specifies flex-wrap: wrap; on .box-row, and adds flex-grow: 1; only on elements with the .grow class. Confirm how fixed-width elements keep their original size, while only the grow-specified element stretches to fill leftover space.

A common beginner stumbling block is that without specifying flex-wrap, elements don't wrap even when they overflow the screen width, causing horizontal scrolling to occur instead. If you want to build a responsive layout, don't forget this setting.

This is a commonly used combination for situations like tiling product cards to fill the screen width and automatically sending overflow onto the next row. It lets you build a practical layout that holds up well on both phones and computers.