Flexbox with Unordered list

Question

I'm trying to learn flexbox and I really like it. I'm trying το play with dynamic widths and when I do it with divs it works. If I try to do it with li, it doesn't work as well. My code is up on codepen.

div.example   ul     li       | 1     li       | 2     li       | 3     li       | 4     li       | 5     li       | 6  div.container   div.col     | 1   div.col     | 2   div.col     | 3   div.col     | 4   div.col     | 5   div.col     | 6 

SASS Code

.container {   border: 1px solid #000;   display: flex;   flex-direction: row;   flex-wrap: wrap;   width: 50%;      .col {     width: calc(100% / 3);     height: 120px;     text-align: center;   } }  .example {   display: flex;   flex-direction: row;   flex-wrap: wrap;   width: 50%;   border: 1px solid #000;   margin: 1em 0;      ul {     width: 100%;     padding-left: 0;   }    li {     list-style: none;     display: inline-block;     width: calc(100% / 3);     height: 120px;     text-align: center;   } } 

Answer 1

You need to apply the flex properties to the <ul>

ul {   display: flex;   flex-direction: row; <-- not needed as this is the default behavior   flex-wrap: wrap; } 

Putting the properties on the <div> tells it to display the <ul> in flex, not <li>.

Answer 2

Based on your markup, note that the <li> elements are the child of <ul>, not the .example division element.

<div class="example">   <ul>     <li>1</li>   </ul> </div> 

Since the immediate parent of the <li> elements are <ul>, use the flex properties on the <ul> that is wrapping around the multiple <li> elements, instead of the outer <div> element:

.example {   width: 50%;   border: 1px solid #000;   margin: 1em 0;    ul {     display: flex;     flex-direction: row;     flex-wrap: wrap;     width: 100%;     padding-left: 0;   }    li {     list-style: none;     display: inline-block;     width: calc(100% / 3);     height: 120px;     text-align: center;   } } 

http://codepen.io/anon/pen/NGPBbg