Flex Wrap

The flex-wrap property controls whether flex items should stay on a single line or wrap onto multiple lines when there is not enough space in the flex container.

By default, Flexbox tries to keep all items on one line. When many items are present or the container becomes smaller, items may overflow. The supporting concepts are explained in Flex Container and Flex Item Sizing.

The flex-wrap property helps create responsive layouts by allowing items to move to the next line automatically.

Syntax

.container {
    display: flex;
    flex-wrap: value;
}