Edit in JSFiddle

#container {  
  display:flex;  
  flex-direction:row;
  flex-wrap: nowrap;
}
#container2 {  
  display:flex;  
  flex-direction:row;
  flex-wrap: wrap;
}
#container3 {  
  display:flex;  
  flex-direction:row;
  flex-wrap: wrap-reverse;
}


ul {
  list-style-type: none; 
}

li {
  width:200px;
  border:1px solid #cccccc;
  padding:5px;
}

nowrap
<ul id="container">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>

wrap
<ul id="container2">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>

wrap-reverse
<ul id="container3">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>