flex-wrap

Flex items by default try to fit into one row, even if the size does not allow it.

To change this behavior, the flex-wrap property needs to be set to a value other than nowrap.

Flex items nested in a flex container with the class .container will not wrap onto a new row under any circumstances. They will always be in one line.

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Inside the flex container, items are laid out along the main axis. The standard behavior is to place items in one row.

If you allow items to wrap onto a new row by changing the value of the flex-wrap property, additional main axes will be created for each row. Each row will behave like a separate flex container but with shared management.

By default, the value of the flex-wrap property is nowrap. In this case, flex items are placed (or try to fit) into one row and do not wrap onto a new line, even if they do not fit within the parent's dimensions.

By setting the value to wrap, we can change this behavior, and flex items will have the ability to wrap onto a new row if they do not fit in one line within the parent.

Another possible value is wrap-reverse. In this case, items will be positioned from bottom to top, filling the lower row first, and those that do not fit will jump to the row above.

💡 The situation when the sum of the sizes of the items exceeds the size of the parent is called container overflow. This is what will happen if you do not allow flex items to wrap onto a new row.