How to move an element to a new line using flexbox?

Question

Layout

There is a list. The elements of the list contain some elements. How to use flexbox so that when the monitor screen is reduced, the elements adapt to the screen?

<ul>
   <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
display:flex;
}
ul li {
background: red;
text-decoration: none;
align-items: center;
}

Thanks to all

Answer 1

ul {
display:flex;
flex-wrap:wrap;
}