Я пытаюсь выучить flexbox, и мне это очень нравится. Я пытаюсь играть с динамической шириной, и когда я делаю это с divs, это работает. Если я попытаюсь сделать это с помощью li, это не сработает. Мой код на 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
.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;
}
}