Edit in JSFiddle

/* row */
#container {  
  display:flex;  
  flex-direction:row;
}

/* row-reverse */
#container2 {  
  display:flex;  
  flex-direction:row-reverse;
}

/* column */
#container3 {  
  display:flex;  
  flex-direction:column;
}

/* column-reverse */
#container4 {  
  display:flex;  
  flex-direction:column-reverse;
}
ul {
  list-style-type: none;
  border:1px solid #cccccc;  
}

li {
  flex-grow:1;
  padding:5px;
}

row
<ul id="container">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>
row-reverse
<ul id="container2">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>
column
<ul id="container3">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>
column-reverse
<ul id="container4">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
</ul>