How to set box amount with flex

Asked

Viewed 1,978 times

2

If I use display:flex in a structure ul>li, all items will be squeezed into a single row. I wonder if it is possible to determine the limit per line, for example three..

I can do with float:left, but I’d like to use flexbox..

Ex: Determine that three LI will appear per line

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
css css3
  • 3

    The question is interesting. If you know how to do with float:left, flexbox is similar. You can set a minimum width on each block so that it only fits 3 on the line. Now, a curiosity: What is the advantage of using flex-box if it will have fixed amount of items per line? Another caution: if, by chance, you are doing something with a table function (presenting naturally tabulated data), the correct element is <table>. (But it’s funny, some people don’t understand that the table, provided that used correctly, ie for tables, is an element as valid as any other).

  • I’m still not sure if I’ll use flex or float, but when I went to develop, I came up with both ideas, and then the doubt arose.. I think that would be an option, something else, you know? There would be an example on top of the question html?

  • 2

    I believe that li {min-width:30%} already solve. The good thing about the flex relative to the float is that you make the fill of the line be 100%, what with float is more boring because of the roundness of the percentages. Putting the current CSS in your example makes it easier for someone to give a more complete answer.

  • I believe it’s just that, it was just an idea that came to me! Anyway, and once again, thank you!

1 answer

4


You can set a width on 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: Don’t forget to add the flex-wrap property: wrap; in the parent element, so that it allows line breaking of flex-items.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.