How to make a flex display of divs inside a div

I would like to know if there is any way to make a flex div, which will contains some little divs, with fixed width and height, depending of the users. That means that some users might have no divs to display, some others might have a hundred divs to show.

I want to know if anyone have an idea of how to make those subdivs kind of justified inside the main div, depending on the number of subdivs and the width of the screen (for example, users with big wide screen could have like 10 subdivs per line, where somebody on mobile phone should see 1 or 2 items per line).

I know I can do it with hardcoding responsive, but is there any way to have a smart and clean CSS code to fill my expectations ?

2 answers

  • answered 2017-06-17 20:03 Jorge

    It is possible to do it maybe using the subdivs with a % on its width size, for example, .subdiv {width: 20%; height: you choose the size;}. The way the subdivs will distribute horizontally will vary, depending on the screen size, by putting the property FLEX-WRAP. If you really wanna use fixed sizes (on width) of the subdivs, it must be necessary to put media-queries on your css. I hope it will help you.

  • answered 2017-06-17 20:03 Tomas Musiol

    try flex-wrap property - flex-wrap: wrap;

    https://jsfiddle.net/kozleek/w86qq9tt/6/