flexbox item direction

by danield770

HTML

<p>items in column direction</p>  
<ol>
     <li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ><li><a href="#">Calendula</a></li
    ><li><a href="#">Damiana</a></li
    ><li><a href="#">Elderflower</a></li
    ><li><a href="#">Feverfew</a></li
    ><li><a href="#">Ginger</a></li
    ><li><a href="#">Hops</a></li
    ><li><a href="#">Iris</a></li
    ><li><a href="#">Juniper</a></li
    ><li><a href="#">Kava kava</a></li
    ><li><a href="#">Lavender</a></li
    ><li><a href="#">Marjoram</a></li
    ><li><a href="#">Nutmeg</a></li
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>
<hr/>
<p>items in row direction</p>  
<ol>
     <li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ><li><a href="#">Calendula</a></li
    ><li><a href="#">Damiana</a></li
    ><li><a href="#">Elderflower</a></li
    ><li><a href="#">Feverfew</a></li
    ><li><a href="#">Ginger</a></li
    ><li><a href="#">Hops</a></li
    ><li><a href="#">Iris</a></li
    ><li><a href="#">Juniper</a></li
    ><li><a href="#">Kava kava</a></li
    ><li><a href="#">Lavender</a></li
    ><li><a href="#">Marjoram</a></li
    ><li><a href="#">Nutmeg</a></li
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>

CSS

ol {
    display:flex;
    flex-flow: column wrap; /* direction: column */
    height: 100px; /* need to specify height :-( */
}
ol ~ ol {
    flex-flow: row wrap; /* direction: row */
    max-height: auto; /* override max-height of the column direction */
}
li {
    width: 150px;
}

a {
    display: inline-block;
    padding-right: 35px;
}