I'm trying to learn flexbox and I really like it. I'm trying το play with dynamic widths and when I do it with div
s 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;
}
}
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>
.