Flexbox - Display list vertically instead of wrap - html

Question

I have a simple flexbox list like this...
ul {
display:flex;
}
li {
background:red;
padding:10px;
margin:10px;
list-style:none;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
When there is not enough room for the list to be displayed horizontally then I would like it to display vertically.
Is there a way in flexbox to tell it to display vertically instead of wrap when there is not enough space?

Answer 1

I suggest you to use media queries alongside with flex direction property.
change the flex direction of the ul tag with a media query
ul {
display: flex;
#media (max-width: <Xpx>){
flex-direction: column
}
}
Xpx - The position you want to stack it vertically.

Answer 2

Use this trick
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
// set new style in case you have 5 li or more
}
Working code
ul {
display: flex;
flex-wrap: wrap;
}
li {
background:red;
padding:10px;
margin:10px;
list-style:none;
}
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
flex: 1 1 100%;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<h1>Same style with 5 items or less</h1>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>

Answer 3

Use media-queries to set different properties at a different width,
and play a game at https://flexboxfroggy.com/ to master flexbox.
To generate a media query for a specific screen resolution visit
http://giona.net/tools/css3-mediaquery-generator/
Hope this helps