CSS Flexible box layout module - part 6 - Setting elements in more than one line

Not known amount of flex items not always can be solved with flex-grow property. Sometimes there are too many items to get fit on one line. Then we can put them in many lines using flow-wrap property on flex container.

flow-wrap: nowrap; /* forces flex container to display all flex items in one line */
flow-wrap: wrap; /* allows flex container to display flex items in multiple lines, direction is defined by flex-direction */
flow-wrap: wrap-reverse; /* the same as “wrap”, opposite to direction defined by flex-direction */

So if we have style definitions like:

section {
  border: 1px solid #000000;
  display: flex;
  flex-wrap: wrap;
}

div {
  background-color: #C0C0C0;
  margin: 7px;
  flex-grow: 1;
}

The result will change, depending on browser window width:

1. For section has a 760px of width:

2. section has a 480px of a width: