Step 30-33

The flex-wrap property can accept three values:

wrap — child elements of a flex container that don’t fit into a row will move down to the next line
wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

body {

font-family: 'Roboto Mono', monospace;

}

h1 {

font-size: 18px;

}

h1,

h3 {

text-align: center;

}

.container {

background-color: dodgerblue;

display: flex;

align-items: center;

min-height: 125px;

}

.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;

}

#wrap {

}

#nowrap {

}

#reverse {

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h1>Flex-Wrap: Wrap-Reverse</h1>

</div>

</div>

</div>

</div>

</div>

</body>

</html>