Different number of divs based on how large is the screen best practices?

Question

I am having a problem regarding elements inside a flex box. I am using flex: 1 1 auto with flex-flow: column wrap . I want to show a number of divs whose size increases along with that of the screen.

Using media queries would be so confusing and the code would be so large. I am searching for a way to achieve it without using media queries because the size of each div in the flex is about 200px each, I would need to make a lot of media queries incrementing from low to high resolutions.

Answer 1

The min-width property is rather useful here. I put fifteen divs to show the effect on multiple screen sizes.

 .flex-parent { display: flex; flex-wrap: wrap; /* this makes the divs wrap */ } .flex-child { margin: 3px; background-color: lightblue; min-width: 200px; /*prevents the flex-child from shrinking more than 200px */ height: 50px; flex: auto; /* this auto-adjusts the width */ /* Everything after this is just to align everything to the center */ padding-top: 20px; text-align: center; }

 <div class='flex-parent'> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> <div class='flex-child'>CHILD</div> </div>

Answer 2

Use flex-flow: row wrap .

If you want to show more div elements as the screen gets wider , you'll want to use row for flex-direction , not column . With flex-direction: row , the flex items will be put into each line from left to right, like a line of text. And the bigger the screen, the more items will fit.

If you want your flex items to grow and fill all the available space, use flex: auto . This might mean the items end up with different sizes, because you can have a different number of items in each flex line. If you want all of them to be the same size, you could set something like flex: 200px .

 .flex-container { display: flex; flex-flow: row wrap; gap: 8px; } .flex-item { flex: auto; padding: 32px; background-color: bisque; }

 <div class="flex-container"> <div class="flex-item">One</div> <div class="flex-item">Two</div> <div class="flex-item">Three</div> <div class="flex-item">Four</div> <div class="flex-item">Five</div> <div class="flex-item">Six</div> <div class="flex-item">Seven</div> <div class="flex-item">Eight</div> <div class="flex-item">Nine</div> <div class="flex-item">Ten</div> <div class="flex-item">Eleven</div> <div class="flex-item">Twelve</div> </div>

If you want to arrange the div elements as columns (top to bottom), then your flex container needs to have a height set on it, for example height: 500px . This is so that the flex container can calculate how many flex items can fit into each column.

 .flex-container { display: flex; flex-flow: column wrap; height: 100vh; gap: 8px; } .flex-item { flex: auto; padding: 32px; background-color: bisque; }

 <div class="flex-container"> <div class="flex-item">One</div> <div class="flex-item">Two</div> <div class="flex-item">Three</div> <div class="flex-item">Four</div> <div class="flex-item">Five</div> <div class="flex-item">Six</div> <div class="flex-item">Seven</div> <div class="flex-item">Eight</div> <div class="flex-item">Nine</div> <div class="flex-item">Ten</div> <div class="flex-item">Eleven</div> <div class="flex-item">Twelve</div> </div>