If I use display:flex in a ul>li structure, all items will be squeezed in a single line. I would like to know if it is possible to determine the limit per line, such as three for example ..
I can do with float:left , but I'd like to use flexbox ..
Ex: Determine that three LI's per line will appear
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
You can define a width in the flex-items, so they occupy the total space (100%), half (50%), 1/3 (33%), etc.
ul {
display: flex;
flex-wrap: wrap;
}
li {
/* 1 por linha */
/* width: 100%; */
/* 2 por linha */
/* width: 50%; */
/* 3 por linha */
/* width: 33%; */
/* 4 por linha */
width: 25%;
}
obs: Do not forget to add the flex-wrap: wrap property; in the parent element, so that it allows the line break of the flex-items.