A flex line by default overflows the edge (i.e., main-end edge) of the flex container when it is longer than the width/height of the flex container. The flex-wrap property allows you to specify whether the flex container should wrap the line onto multiple lines and is specified for the container. It is noninherited and takes the values listed in Table 19.2. Figure 19.5 shows the effects of the values, and Figures 19.6 and 19.7 show example usage, using the wrap value.
In the #container{} rule in the example, the width and height properties specify the size of the <div> element of id=“container”, the border property makes the border 1px-thick black solid line, display makes the element a flex container, and flex- wrap says to wrap the <div> elements (i.e., flex items) inside it to the next line when necessary. The #container div{} rule styles the <div> elements (i.e., flex items) inside the flex container, specifying the size, background color, the thickness, style and color of the border, and the roundness of the corners.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.